does not work when you put in the onchange javascript form

Asked

Viewed 401 times

1

function teste(valor)
{
    if( valor=="novo" )
    {
        document.getElementById('quantdependente').style.display = 'block';
    }
    else
    {
        document.getElementById('quantdependente').style.display = 'none';
    }
}
#quantdependente {
    display: none;
}
<html>

<body>
  <form id="formulario" name="formulario" action="montadependente.php" method="post">
    <select name="teste" id="teste" onchange="teste( this.value );">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="novo">novo</option>
    </select>
    <div id="quantdependente" name="quantdependente">
      <input type="number" value="" step="1">
    </div>
    <input type="submit" name="btenviar" value="enviar">
  </form>
</body>

</html>

javascript

  • Don’t understand the question? The code apparently works. You can add a detailed description of your problem?

  • 1

    @Augustewhat when testing code in Chrome error occurs Uncaught TypeError: teste is not a function, because he created an element with the id="teste", what conflicts with the called function function teste(valor), as it is common for browsers to use DOM Ids as global object variables window., as explained in https://answall.com/q/123098/3635

2 answers

2

Try adding an event to the element, I believe it is the best option

function teste() {
	valor = this.value;

	console.log( 'mudou para: '+ valor )

  if( valor == 'novo' ) {
		document.getElementById('quantdependente').style.display = 'block';
	} else {
		document.getElementById('quantdependente').style.display = 'none';
	}
}
document.getElementById('teste').addEventListener('change', teste);
#quantdependente {
    display: none;
}
<html>

<body>
  <form id="formulario" name="formulario" action="montadependente.php" method="post">
    <select name="teste" id="teste" >
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="novo">novo</option>
    </select>
    <div id="quantdependente" name="quantdependente">
      <input type="number" value="" step="1">
    </div>
    <input type="submit" name="btenviar" value="enviar">
  </form>
</body>

</html>

2

This is a peculiar behavior of the browser. Within the events of each element as onclick and onchange, some variables are initialized implicitly by the browser, such as variables event, arguments, and another variable like the same id of the element, in your case, teste.

You have an element and a function with the name teste, and within the onchange of that element, teste refers to the element, not the function, so invoke teste( this.value ) results in an error as teste is not a function. Note that the code works if the function has another name:

function testeFunc(valor) {
    console.log('Função foi invocada recebendo o valor', valor)
}
#quantdependente {
    display: none;
}
<html>

<body>
  <form id="formulario" name="formulario" action="montadependente.php" method="post">
    <select name="teste" id="teste" onchange="testeFunc( this.value );">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="novo">novo</option>
    </select>
    <div id="quantdependente" name="quantdependente">
      <input type="number" value="" step="1">
    </div>
    <input type="submit" name="btenviar" value="enviar">
  </form>
</body>

</html>

  • His explanation is very coherent. You can tell if there is/is documentation about ... I was curious?

  • 1

    Sorry Lauro, I don’t know any documentation about this. I learned about these variables in the American OS.

Browser other questions tagged javascript

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