Make DIV disappear with Javascript

Asked

Viewed 642 times

2

So I have a problem, I have two radio input (yes and no) and I need that when the input "is not selected the DIV goes away and when the input "yes" is selected it comes back. I looked in some places but there’s always some kind of mistake:

Referenceerror: Mudarestado is not defined.

function Mudarestado(el) {
  var display = document.getElementById(el).style.display;
  if (document.cadastroDeAvaliacaoNew.possuiCaderneta[0].checked)
    document.getElementById(el).style.display = 'block';
  else
    document.getElementById(el).style.display = 'none';
}

if (document.cadastroDeAvaliacaoNew.possuiCaderneta[0].checked ||
  document.cadastroDeAvaliacaoNew.possuiCaderneta[1].checked) {} else {
  alert('6 - A criança caderneta de saúde sem seleção');
  document.cadastroDeAvaliacaoNew.possuiCaderneta.focus();
  return false;
}

if (document.cadastroDeAvaliacaoNew.possuiCaderneta[0].checked) {
  function mostraDiv() {
  	document.getElementById("visibilidade").style.display = "blockj"
  }


  if (document.cadastroDeAvaliacaoNew.curvaPeso[0].checked ||
    document.cadastroDeAvaliacaoNew.curvaPeso[1].checked) {} else {
    alert('7 - O peso da criança está com curva sem seleção');
    document.cadastroDeAvaliacaoNew.curvaPeso.focus();
    return false;
  }

  if (document.cadastroDeAvaliacaoNew.curvaAltura[0].checked ||
    document.cadastroDeAvaliacaoNew.curvaAltura[1].checked) {} else {
    alert('8 - A altura da criança está com curva sem seleção');
    document.cadastroDeAvaliacaoNew.curvaAltura.focus();
    return false;
  }
} else if (document.cadastroDeAvaliacaoNew.curvaPeso[1].checked) {
  function someDiv() {
  	document.getElementById("visibilidade").style.display = "none";
  }

} else {
  alert('6 - A criança caderneta de saúde sem seleção');
  document.cadastroDeAvaliacaoNew.possuiCaderneta.focus();
  return false;
}

function mostraDiv() {
  document.getElementById("visibilidade").style.display = "block";
}

function someDiv() {
  document.getElementById("visibilidade").style.display = "none";
}
<div class="rowCadastro">
  <span class="label">
	6 - A criança possui caderneta de saúde? <span class="campoObrigatorio"> *</span>
  </span>
  <span class="input">
	<input class="campoSelecao"
		type="radio" name="possuiCaderneta" value="1" onclick="mostraDiv()"
		title="Marque esta opção se a criança possuir caderneta de saúde" {selpossuiCaderneta1}=""/>Sim
	&nbsp;&nbsp;&nbsp;
	<input class="campoSelecao"
		type="radio" name="possuiCaderneta" value="0" onclick="function (){someDiv()"
		title="Marque esta opção se a criança não possuir caderneta de saúde" {selpossuiCaderneta0}="" />Não
	</span>
</div>
<br></br>
<div class="rowCadastro">
  <span class="label" style="font-weight: bold; font-size: 18px;">
Observe na caderneta da criança:
<div id="visibilidade">
	<div class="rowCadastro" id="visibilidade">
		<span class="label">
		7 - O peso da criança está com curva:
		</span>
  <span class="input">
		<input class="campoSelecao"
		type="radio" name="curvaPeso" value="1
		title="Marque esta opção se a curva de peso da criança está Ascendente" {selcurvaPeso1}=""/>Ascendente
		&nbsp;&nbsp;&nbsp;
		<input class="campoSelecao"
			type="radio" name="curvaPeso" value="2"
			title="Marque esta opção se a curva de peso da criança está Descendente" {selcurvaPeso2}=""/>Descendente
		&nbsp;&nbsp;&nbsp;
		<input class="campoSelecao"
			type="radio" name="curvaPeso" value="3"
			title="Marque esta opção se a curva de peso da criança está Horizontal" {selcurvaPeso3}=""/>Horizontal
		&nbsp;&nbsp;&nbsp;
		Peso: <input class="alinhamentoDireita" type="text" name="pesoAtual" id="pesoAtual" size="4" 
			maxLength="6" value="{pesoAtual}"  title="Peso da criança na realização da avaliação" />	Kg
		</span>
</div>
<br></br>
<div class="rowCadastro">
  <span class="label">
		8 - altura da criança está com curva:
		</span>
  <span class="input">
		<input class="campoSelecao"
			type="radio" name="curvaAltura" value="1"
			title="Marque esta opção se a curva de peso da criança está Ascendente" {selcurvaAltura2}=""/>Ascendente
		&nbsp;&nbsp;&nbsp;						
		<input class="campoSelecao"
			type="radio" name="curvaAltura" value="2"
			title="Marque esta opção se a curva de peso da criança está Horizontal" {selcurvaAltura2}=""/>Horizontal
		&nbsp;&nbsp;&nbsp;
		Altura: <input class="alinhamentoDireita" type="text" name="alturaAtual" id="alturaAtual" size="3" 
			maxLength="5" value="{alturaAtual}" title="Altura da criança na realização da avaliação"> m	
		</span>
</div>
</div>

1 answer

2

There are several syntax errors in your code, never, ever, under any circumstances, from the same id to more than one element (at least in my head it doesn’t come where it might be useful) as you did here: <div id="visibilidade"><div class="rowCadastro" id="visibilidade">

function div(valor) {
  if (valor) {
    document.getElementById("visibilidade").style.display = "block";
  } else {
    document.getElementById("visibilidade").style.display = "none";
  }
}
<div class="rowCadastro">
  <span class="label">
	6 - A criança possui caderneta de saúde? <span class="campoObrigatorio"> *</span>
  </span>
  <span>
	<input
		type="radio" name="possuiCaderneta" value="1" onclick="div(true)"
		title="Marque esta opção se a criança possuir caderneta de saúde"/>Sim
	<input class="campoSelecao"
		type="radio" name="possuiCaderneta" value="0" onclick="div(false)"
		title="Marque esta opção se a criança não possuir caderneta de saúde" />Não
	</span>
</div>
<br></br>
<div class="rowCadastro">
  <span class="label" style="font-weight: bold; font-size: 18px;">
Observe na caderneta da criança:
<div id="visibilidade" style="display:none;">
	<div class="rowCadastro">
		<span class="label">
		7 - O peso da criança está com curva:
		</span>
  <span class="input">
		<input class="campoSelecao"
		type="radio" name="curvaPeso" value="1"
		title="Marque esta opção se a curva de peso da criança está Ascendente" {selcurvaPeso1}=""/>Ascendente
		&nbsp;&nbsp;&nbsp;
		<input class="campoSelecao"
			type="radio" name="curvaPeso" value="2"
			title="Marque esta opção se a curva de peso da criança está Descendente" {selcurvaPeso2}=""/>Descendente
		&nbsp;&nbsp;&nbsp;
		<input class="campoSelecao"
			type="radio" name="curvaPeso" value="3"
			title="Marque esta opção se a curva de peso da criança está Horizontal" {selcurvaPeso3}=""/>Horizontal
		&nbsp;&nbsp;&nbsp;
		Peso: <input class="alinhamentoDireita" type="text" name="pesoAtual" id="pesoAtual" size="4" 
			maxLength="6" value="{pesoAtual}"  title="Peso da criança na realização da avaliação" />	Kg
		</span>
</div>
<br></br>
<div class="rowCadastro">
  <span class="label">
		8 - altura da criança está com curva:
		</span>
  <span class="input">
		<input class="campoSelecao"
			type="radio" name="curvaAltura" value="1"
			title="Marque esta opção se a curva de peso da criança está Ascendente"/>Ascendente
		&nbsp;&nbsp;&nbsp;						
		<input class="campoSelecao"
			type="radio" name="curvaAltura" value="2"
			title="Marque esta opção se a curva de peso da criança está Horizontal" />Horizontal
		&nbsp;&nbsp;&nbsp;
		Altura: <input class="alinhamentoDireita" type="text" name="alturaAtual" id="alturaAtual" size="3" 
			maxLength="5" title="Altura da criança na realização da avaliação"> m	
		</span>
</div>
</div>

  • in fact I had put the second id for a test and forgot to erase afterwards. Even solving the problem here, there continues to say that the value fa function div is null or undefined. I do internship and maintenance in this system, so I’m trying to understand certain parts of it yet.

  • @Douglasnunes, all right? If possible, copy here all html and js... it is better that we understand and help you in the best way, quiet?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.