Value does not enter in conditional

Asked

Viewed 75 times

-1

<html>
    <style>
 h2{
     font-size: 15pt
 }
div#Type{
margin-top: 20px
}
    

div#percs{
margin-top: 20px
} 


div#res{
margin-top: 20px
}
    </style>
<head>
    <body>
<h1>Calculando Consumo</h1>
<h2> Informe o tipo de carro (A, B e C). Informe o percurso rodado em km e calcule o consumo estimado, conforme o tipo, sendo (A=8, B=9 e C=12) km/litro</h2>
<div id='Type'>Tipo de Carro</div>
<input type="text"name="Carro"id="Carro" > 
<div id='percs'>Percurso em km</div>
<input type="number"name="Percurso"id="Percurso"> 
<input Type="button"name="calcular"id='Calcular'value='calcular' onclick="calcular()">
<div Id=res>Resultado</div>

        <script>
        
        //6) Informe o tipo de carro (A, B e C). Informe o percurso rodado em km e calcule o consumo
        //estimado, conforme o tipo, sendo (A=8, B=9 e C=12) km/litro
       calcular ()
       { 

        var carro = document.getElementsByName("Carro")
        var percurso = document.getElementsByName("Percurso")
        var perc = Number.parseInt(percurso.value)
        var consumo = document.getElementById('res');


        if(car == 'A'){
            consumo = perc / 8;
           consumo.innerHTML=('o seu carro consumiu ', consumo,' litros');
        }
            if(car == 'B'){
                consumo = perc / 9;
                consumo.innerHTML=('o seu carro consumiu ', consumo,' litros');
            }
            if(car == 'C'){
            consumo = perc / 12;
            consumo.innerHTML=('o seu carro consumiu ', consumo,' litros');
        }




    }
        </script>
    </body>
</head>
</html>

javascript

  • where the "calculate()" function is being called?

  • if(car == 'A'), who is car? This variable does not seem to exist...

  • Because the <body> is inside the <head>?

  • The function is being called with the command 'onclick no' input#calculate from the button

  • the car variable was misspelled due to a modification I made in the code but even after changing it to car it still not running

  • as for the body being inside the head was a mistake of mine that I have already fixed the error continues

  • What happens is that when I click the calculate button it does not perform anything

  • carro will be an element of the DOM, concerning the <input>. If you need to compare his value you’ll need to do carro.value

Show 3 more comments

2 answers

1

Probably you must be learning Javascript, so there are many errors in your Html how much in your js

  • Html => div with id result without " " in the id attribute
  • Js => document.getElementsByName returns a nodeList, that is, an array of Html elements, which to access them need to insert an index. It did not take the values with value. You are using the same variable to do the percentage and write to Html. Failed to concatenate correctly the consumption variable with the result string and the main failed to also declare the word function for the function.

function calcular() {

  var carro = document.getElementsByName("Carro")[0].value;
  var percurso = document.getElementsByName("Percurso")[0].value;
  var perc = Number.parseInt(percurso)
  var resultado = document.getElementById('res');
  var consumo;
 
  if (carro == 'A') {
    consumo = perc / 8;
    resultado.innerHTML = 'o seu carro consumiu, ' +consumo+  ' litros';
  }
  if (carro == 'B') {
    consumo = perc / 9;
    resultado.innerHTML = 'o seu carro consumiu, ' +consumo+ ' litros';
  }
  if (carro == 'C') {
    consumo = perc / 12;
    resultado.innerHTML = 'o seu carro consumiu, ' +consumo+ ' litros';
  }

}
h2 {
  font-size: 15pt
}

div#Type {
  margin-top: 20px
}

div#percs {
  margin-top: 20px
}

div#res {
  margin-top: 20px
}
<h1>Calculando Consumo</h1>
<h2> Informe o tipo de carro (A, B e C). Informe o percurso rodado em km e calcule o consumo estimado, conforme o tipo, sendo (A=8, B=9 e C=12) km/litro</h2>
<div id="Type">Tipo de Carro</div>
<input type="text" name="Carro" id="Carro">
<div id='percs'>Percurso em km</div>
<input type="number" name="Percurso" id="Percurso">
<input Type="button" name="calcular" id="Calcular" value="calcular" onclick="calcular()">
<div Id="res">Resultado</div>

  • 1

    Yes I started learning JS now on the internet and I’m having a lot of difficulty rsrsrs, but thank you very much helped me a lot!

  • Complicates a little even at first, but then improves a little ;) Success there.

0

There were some errors like... calculate need to have Function before to say that it is function, variable car in the conditional and element with name Car... anyway, simple errors =D

Lucky for you, I hope I helped.

the correct code would be the one below: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Teste</title>

  <style>
    h2{
        font-size: 15pt
    }
    div#Type{
    margin-top: 20px
    }
        

    div#percs{
    margin-top: 20px
    } 


    div#res{
    margin-top: 20px
    }
  </style>
</head>
<body>
  
  <h1>
    Calculando Consumo
  </h1>

  <h2>
    Informe o tipo de carro (A, B e C). 
    Informe o percurso rodado em km e calcule o consumo estimado, conforme o tipo, 
    sendo (A=8, B=9 e C=12) km/litro
  </h2>

  <div id='Type'>
    Tipo de Carro
  </div>

  <Select id="Carro">
    <option value="A">Carro A</option>
    <option value="B">Carro B</option>
    <option value="C">Carro C</option>
  </Select>

  <div id='percs'>
    Percurso em km
  </div>

  <input type="number" name="Percurso" id="Percurso"> 

  <button name="calcular" id="Calcular" onclick="calcular()">
    Calcular
  </button>

  <div id="res">
    Resultado
  </div>

  <script>
    function calcular ()
    { 

      var carro = document.getElementById("Carro").value;
      var percurso = document.getElementById("Percurso");
      var perc = Number.parseInt(percurso.value);
      var consumo = document.getElementById('res');

      if(carro == 'A') {
        consumo.innerHTML = `o seu carro consumiu ${perc / 8} litros`;
      }
      if(carro == 'B') {
        consumo.innerHTML = `o seu carro consumiu ${perc / 9} litros`;
      }
      if(carro == 'C') {
        consumo.innerHTML = `o seu carro consumiu ${perc / 12} litros`;
      }
    }
  </script>
</body>
</html>

Browser other questions tagged javascript

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