Javascript does not run

Question

I have the following HTML code:

function idade() {

  var idade = document.getElementById('idade')

  alert("A idade do cliente é: " + idade);
}

<form name="cliente">

  Nome: <input type="text" name="nome" /></br>
  </br>
  Endereço: <input type="text" name="endereco" /></br>
  </br>
  Cidade: <input type="text" name="cidade" /></br>
  </br>
  Sexo: <input type="radio" name="sexo" value="M" />Masculino
  <input type="radio" name="sexo" value="F" />Feminino</br>
  </br>
  Idade: <input type="text" name="idade" /></br>
  </br>

  <input type="submit" onclick="idade()" />

</form>

However, when I click the button nothing happens.

Answer 1

The id="cliente" in the input Idade: <input type="text" name="idade"/>

The .value after the document.getElementById('idade')

And the function had the same name as the variable age.

function idadeCliente(){
	var idade = document.getElementById('idade').value;
	alert("A idade do cliente é: " + idade);
}

<form name="cliente">

        Nome: <input type="text" name="nome"/></br></br>
        Endereço: <input type="text" name="endereco"/></br></br>
        Cidade: <input type="text" name="cidade"/></br></br>
        Sexo: <input type="radio" name="sexo" value="M"/>Masculino
              <input type="radio" name="sexo" value="F"/>Feminino</br></br>
        Idade: <input type="text" id="idade" name="idade"/></br></br>

        <input type="submit" onclick="idadeCliente()"/>

</form>

Answer 2

You selected an element based on unique identification (id) with the method getElementById() of the Document object. document.getElementById('idade')

The purpose of the global id attribute in your case idade, which should be unique throughout the document, is to identify the element when handled by scripts or stylized with CSS.

Well, in your script, once you selected the element, you only had to get the value of the element by making use of the property value document.getElementById('idade').value;

Another thing, the function name can be equal to the variable name but by what I tested should not equal the id of the input.

function idade() {
    var idade = document.getElementById('age').value;

    console.log("A idade do cliente é: " + idade);
}

<form name="cliente">

    Nome: <input type="text" name="nome"/><br><br>
    Endereço: <input type="text" name="endereco"/><br><br>
    Cidade: <input type="text" name="cidade"/><br><br>
    Sexo: <input type="radio" name="sexo" value="M"/>Masculino
          <input type="radio" name="sexo" value="F"/>Feminino<br><br>
    Idade: <input id="age" type="text" name="age"/><br><br>

    <input type="button" value="Gerar" onclick="idade()">

</form>

</br> is not a valid HTML tag. It’s just <br>(or <br />if you are using XHTML, but if you were using XHTML, you would know this)