Eu queria adicionar classes as variáveis que eu puxei com o querySelector com os valores do form, porém quando eu uso o classList.add nelas ele aparece Type Error: variavel.classList.add is undefined. Eu já fiz outros testes, por exemplo com alert(variavel), e ele funciona normalmente, porque eu não consigo adicionar classe?
Fala Fernando, tudo bem? Espero que sim!
O que acontece é que você guarda na variável plantao o valor daquele input, entende? Veja:
var plantao = document.querySelector('input[name=plantao]:checked').value;Você utiliza a propriedade value para obter o valor a propriedade e guarda na variável.
A propriedade classList esta disponivel apenas em elementos do dom, ou seja, você teria que criar ou variavel para somente o elemento:
var plantao = document.querySelector('input[name=plantao]:checked').value;
var plantaoElemento = document.querySelector('input[name=plantao]:checked');Agora você deve adicionar a classe a plantaoElemento que guardamos somente o elemento:
plantaoElemento.classList.add("turno");Ou para ficar mais facil e não precisar criar outra variável, você pode guardar na variável plantao somente o elemento:
var plantao = document.querySelector('input[name=plantao]:checked');E adicionar a classe normalmente:
plantao.classList.add("turno");E quando precisar do valor desse elemento, você utila a propriedade value:
document.write("período " + plantao.value+ " " + unidade + " " + hora + " " + zona + " " + relatorio);
Como pode ver logo acima, utilizei o value direto no momento de mostrar na tela.
Testa ai e fala pra gente se funcionou ta bom?
Abraços e bons estudos :D
Olá, eu testei das duas maneiras mas não deu certo, por que?
Deu algum erro?
sim, no primeiro método, ele informa o mesmo problema de antes Type Error: is undefined, no segundo, ele não da erro, mas quando chamo a variável.value, o valor não é impresso pelo document.write com a classe que eu quero, ele aparece sem formatação nenhuma, e eu queria que ele aparecesse com bold como ta no css.
Consegue mandar aqui o código que você fez?
é o código que tá no codepen (eu já atualizei lá)
HTML:
<body>
<h1 class ="titulo-centralizado">Gerador de Relatórios </h1>
<form class="unidade" data-unidade="unidade">
<h2>Unidade:</h2>
<input type="radio" id="unidade1" name="unidade" value="Unidade 1">Unidade 1
<input type="radio" id="unidade2" name="unidade" value ="Unidade 2">Unidade 2
<form>
<form class="hora" data-hora="hora">
<h2>Hora:</h2>
<input type="text" id="disparo" name="disparo" placeholder="Ex: 12h34m">
</form>
<form class="zona" data-zona="zona">
<h2>Zona:</h2>
<input type="text" id="zona" name="zona" placeholder="Ex: Zona 2 - Sala de T.I.">
<form>
<form class="relato" data-relato="relato"> <h2>Relato:</h2>
<input type="radio" id="sem-novidades" name="relato" value="sem-novidades">Sem anormalidades
<input type="radio" id="outro" name="relato" value="outro">Outro
<form>
<form><br>
<input class="botao" type="button" value="gerar-relatório" onclick="geraRelatorio()">
</body>CSS:
*{
text-align: center;
}
#hora{
padding: 3px;
}
#zona {
padding: 3px;
}
.botao {
margin: 20px;
width: 300px;
height: 50px;
}
.titulo {
color: green;
font-weight: bold;
}
JS
function geraRelatorio() {
var plantao = document.querySelector('input[name=plantao]:checked');
var unidade = document.querySelector('input[name=unidade]:checked').value;
var unidadeRelatada = document.querySelector('input[name=unidade]:checked');
unidadeRelatada.classList.add("turno");
var hora = document.querySelector('input[name=disparo]');
var zona = document.querySelector('input[name=zona]');
zona.classList.add("titulo");
var relatorio = document.querySelector('input[name=relato]:checked');
if(relatorio.value == "sem-novidades"){
relatorio = "estar sem anormalidades no local"
}
document.write("<b>Local X </b>" + unidade.value + "<br><b>Disparo: </b>" + hora.value + "<br>" + zona.value + "<br>" + relatorio);
}
No document write, você pode utirar o .value, ja que unidade ja é o valor do checkbox, assim:
document.write("<b>Local X </b>" + unidade + "<br><b>Disparo: </b>" + hora.value + "<br>" + zona.value + "<br>" + relatorio);certo, foi feito, mas ainda assim ele não adiciona a formatação do CSS no valor que ele puxa