How to calculate the Javascript input value and the result appear in the alert?

Asked

Viewed 99 times

-1

I don’t know why you’re not calculating or showing the result on the alert.


<!DOCTYPE html>
<html>
  <head>
    <title>Agência de viagens</title>
    <link href="estilo.css" rel="Stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Pacifico|Roboto+Slab:400,700" rel="stylesheet">

  </head>
  <body>

          <form method="POST" action="index.php">


    <h2>Opção de destinos:</h2><p></p>

    Lisboa: 250€<input type=radio name="cidade" id="Lisboa" onclick="cidValor(250.0)" value="250€"><br>
    Paris: 250€<input type=radio name="cidade" id="Paris" onclick="cidValor(250.0)" value="250€"><br>
    Londres: 250€<input type=radio name="cidade" id="Londres" onclick="cidValor(250.0)" value="250€"><br>
    Roma: 250€<input type=radio name="cidade" id="Roma" onclick="cidValor(250.0)" value="250€"><br>
    Miami: 250€<input type=radio name="cidade" id="Miami" onclick="cidValor(250.0)" value="250€"><br>


    <br>Quantidade de pessoas no quarto: <br><p></p>
    Solteiro: 35€<input type="radio" name="dormitorio" id="Solteiro" onclick="calculo(35)" value="35€"><br>
    Casal: 60€<input type="radio" name="dormitorio" id="Casal" onclick="calculo(60)" value="60€"><br>
    3 pessoas 120€<input type="radio" name="dormitorio" id="4_pessoas" onclick="calculo(120)" value="120€"><br>
    5 pessoas: 180€<input type="radio" name="dormitorio" id="8_pessoas" onclick="calculo(180)" value="180€"><br>


   <input type="submit" name="salvar" id="submit" value="Enviar">
   <input type="Reset" name="apagar" type="text"  value="Apagar tudo">


   <script type="text/javascript">

   var valorCidade=0;

   function cidValor(valor){ valorCidade=valor;}

   function calculo(vlDormitorio){
     if (valorCidade <> 0){
          alert(valorCidade+vlDormitorio);
     }else{
          alert('Cidade não informada');
     }
  }

   </script>

        </form>
  </body>
</html>
javascript html5

  • You have already taken the value by direct id in your calculation function?

  • No if you are comparing value other than 0, correct? Use != no <>.

  • It seems that your real problem is the javascript operators. see this post on javascript operators of equality and inequality.

3 answers

1


The problem is in your javascript, in function calculation, different operator in javascript is the != and not the <> as you are using. Follows the corrected function:

function calculo(vlDormitorio){
     if (valorCidade != 0){
          alert(valorCidade+vlDormitorio);
     }else{
          alert('Cidade não informada');
     }
  }

  • Thanks, that’s exactly what was going wrong

0

Try this test, and tell what happened on the console or on alert().

...
<input type="hide" id="valor_cidade">
...

function cidValor(valor){
   $("#valor_cidade").val(valor);
}

function calculo(qtde){
     var valor_cidade = $("#valor_cidade").val();
     alert(valor_cidade + qtde);
     console.log(valor_cidade + qtde);
}

0

In addition to operator error difference <> (the correct is != or !==), I would suggest changes to your code, starting with the removal of numerous attributes onclick. Instead of using 1 onclick on each radio button, you could use a event listener that already takes clicks on all radios at once. It would already save several bytes of code.

Another thing is to leave in the values of radios only the numerical value, without the symbol of the Euro €.

See how the code looks, much simpler and leaner (see explanations in the comments):

document.addEventListener("click", function(e){
   
   // elemento clicado
   var el = e.target;
   
   // se o elemento clicado tiver o name "dormitorio"
   if(el.name == "dormitorio"){
      
      // pega o valor do radio "cidade" marcado
      var cidade = document.querySelector("[name=cidade]:checked");
      
      // verifica se alguma cidade foi marcada
      if(!cidade){
         alert('Cidade não informada');
         el.checked = false; // desmarca o radio
      }else{
         alert(+cidade.value + +el.value);
      }
   }
});
<form method="POST" action="index.php">

   <h2>Opção de destinos:</h2><p></p>
   
   Lisboa: 250€<input type=radio name="cidade" id="Lisboa" value="250"><br>
   Paris: 250€<input type=radio name="cidade" id="Paris" value="250"><br>
   Londres: 250€<input type=radio name="cidade" id="Londres" value="250"><br>
   Roma: 250€<input type=radio name="cidade" id="Roma" value="250"><br>
   Miami: 250€<input type=radio name="cidade" id="Miami" value="250"><br>
   
   
   <br>Quantidade de pessoas no quarto: <br><p></p>
   Solteiro: 35€<input type="radio" name="dormitorio" id="Solteiro" value="35"><br>
   Casal: 60€<input type="radio" name="dormitorio" id="Casal" value="60"><br>
   3 pessoas 120€<input type="radio" name="dormitorio" id="4_pessoas" value="120"><br>
   5 pessoas: 180€<input type="radio" name="dormitorio" id="8_pessoas" value="180"><br>
   
   
   <input type="submit" name="salvar" id="submit" value="Enviar">
   <input type="Reset" name="apagar" type="text"  value="Apagar tudo">

</form>

Browser other questions tagged javascript html5

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