I have a ploblema in my JS code

Question

I created an input in HTML, but I need to put the value of this input in a variable. Yes, I have tried using queryselector the getelementbyid and it didn’t work.

I want to make a speed system and only need this variable if you see any more error in my code warn Please.

  var b = document.getElementById("botao")

  var v1 = document.getElementsByid('num1')

  var v2 = document.getElementsByName("n2")

  function clicar() {
    if (v1 >= v2) {
      alert("você estar com uma velocidade alta ")
    } else {
      alert("voce estar com uma velocidade normal")
    }
  }

    section {
      background-color: rgb(88, 230, 255);
      border-radius: 10px;
      padding: 10px;
      background-clip: initial;
      background-position: 30px;
      font-size: large;
    }
    
    body {
      background-color: aliceblue;
    }
    
    h1 {
      text-align: center;
      text-shadow: 20px;
      scrollbar-shadow-color: rgb(151, 255, 233);
    }
    
    h2 {
      border-bottom-color: aliceblue;
      color: rgb(255, 136, 136);
      text-align: center;
      font: x-small;
      font-family: 'Courier New', Courier, monospace;
    }
    
    input#button {
      font-style: oblique;
      background-color: green;
    }

  <h1><strong> Bem vindo ao sistema de velocidade do detran</strong></h1>

  <section>
    <div id="n1">
      <input type="number" name="n1" id="num1"> Qual é o limite máximo de velocidade dessa área?
    </div>
    <input type="number" name="n2" id="num2"> Qual é a sua velocidade?
  </section>
  <input type="button" value="enviar" onclick="clicar()">

  <h2>obrigado por testar</h2>

Answer 1

There are some problems with your code. Some are even problems, which do not allow the code to work properly, others only hinder the reading and construction of the code.

ex:

• var b = document.getElementById("botao") if b is not used, because have this line?
• v1 and v2 are similar. Why use getElementsByid and getElementsByName on the other?
• There is a div with id n1 and an input where the name has the same value.
• Element and variable names are not "self-explanatory".
• The input value is read outside the function and the variables are with the value when Javascript is interpreted by the browser.

function clicar() {
  var velocidadeMax = document.getElementById('velocidadeMax').value;
  var velocidade = document.getElementById("velocidade").value;

  if (velocidadeMax < velocidade) {
    alert("Velocidade está acima do permitido.");
  } else {
    alert("Velocidade está dentro do permitido.");
  }
}

    section {
      background-color: rgb(88, 230, 255);
      border-radius: 10px;
      padding: 10px;
      background-clip: initial;
      background-position: 30px;
      font-size: large;
    }
    
    body {
      background-color: aliceblue;
    }
    
    h1 {
      text-align: center;
      text-shadow: 20px;
      scrollbar-shadow-color: rgb(151, 255, 233);
    }
    
    h2 {
      border-bottom-color: aliceblue;
      color: rgb(255, 136, 136);
      text-align: center;
      font: x-small;
      font-family: 'Courier New', Courier, monospace;
    }
    
    input#button {
      font-style: oblique;
      background-color: green;
    }

<h1><strong> Bem vindo ao sistema de velocidade do detran</strong></h1>
<section>
  Qual é o limite máximo de velocidade dessa área? <input type="number" id="velocidadeMax"><br />
  Qual é a sua velocidade? <input type="number" id="velocidade">
</section>
<input type="button" value="enviar" onclick="clicar()">

<h2>obrigado por testar</h2>

Answer 2

Wrong var v1 = document.getElementsByid('num1')

The name of this method must be correct getElementById

For example, getElementByID does not work, however natural it may seem.

the Document.getElementById('num1') method returns the elemento which has the attribute id = num1

var v1 = document.getElementById('num1');
  console.log(v1);

<input type="number" name="n1" id="num1">

This method is one of the most common methods in HTML DOM and is used almost every time you want to manipulate or get information from an element in your document.

To refer to the field value use the property value

var v1 = document.getElementById('num1').value;
  console.log(v1);

<input type="number" name="n1" id="num1" readonly value=50>

The syntax is correct var v2 = document.getElementsByName("n2") however, the getElementsByName() method returns a collection of all elements in the document with the specified name (the value of the name attribute) as an object.

The object represents a collection of nodes. Nodes can be accessed by index numbers. The index starts at 0.

To refer to the field value use the property value

  var v2 = document.getElementsByName("n2")[0].value;
  console.log(v2);
  var v3 = document.getElementsByName("n2")[1].value;
  console.log(v3);

<input type="number" name="n2" readonly value=20>
<input type="number" name="n2" readonly value=33>

NOTE: without the index the returned value is undefined even if it has only one element

      var v2 = document.getElementsByName("n2").value;
      console.log(v2);

 <input type="number" name="n2" readonly value=20>

This variable var b = document.getElementById("botao") does not interfere in the execution of the script and is there of silly.

Applying the above we have:

  function clicar() {
  
  //essas variaveis serão recuperadas ao chamar a função portanto devem estar dentro da função
  var v1 = document.getElementById('num1').value;
  var v2 = document.getElementsByName("n2")[0].value;

    if (v1 >= v2) {
       //se v1 for maior ou igual que v2 velocidade normal
      //alert("você estar com uma velocidade alta ");
      alert("você estar com uma velocidade normal ")
    } else {
      //alert("voce estar com uma velocidade normal")
      alert("voce estar com uma velocidade alta");
    }
  }

section {
      background-color: rgb(88, 230, 255);
      border-radius: 10px;
      padding: 10px;
      background-clip: initial;
      background-position: 30px;
      font-size: large;
    }
    
    body {
      background-color: aliceblue;
    }
    
    h1 {
      text-align: center;
      text-shadow: 20px;
      scrollbar-shadow-color: rgb(151, 255, 233);
    }
    
    h2 {
      border-bottom-color: aliceblue;
      color: rgb(255, 136, 136);
      text-align: center;
      font: x-small;
      font-family: 'Courier New', Courier, monospace;
    }
    
    input#button {
      font-style: oblique;
      background-color: green;
    }

<h1><strong> Bem vindo ao sistema de velocidade do detran</strong></h1>

  <section>
    <div id="n1">
      <input type="number" name="n1" id="num1"> Qual é o limite máximo de velocidade dessa área?
    </div>
    <input type="number" name="n2" id="num2"> Qual é a sua velocidade?
  </section>
  <input type="button" value="enviar" onclick="clicar()">

  <h2>obrigado por testar</h2>