Estoy tratando de escribir una calculadora de propinas simple para una clase de informática en la que estoy. Está en HTML / JavaScript. La función real de cálculo de propinas está escrita en JavaScript. Me han dicho que use innerHTML para mostrar la salida de la función en HTML. Entonces, según tengo entendido, innerHTML funciona escribiendo cualquier valor / variable (en este caso, la salida de mi función) en un contenedor HTML con cualquier ID definido.

Al principio pensé que tal vez era solo que mi código estaba en el orden incorrecto. Pero he intentado mover la definición de la función y eso no fue de ninguna ayuda. Verifiqué que la ID de entrada es correcta al extraer las variables de HTML. He leído mucho sobre problemas similares y parece que no puedo encontrar lo que estoy haciendo mal.

Así que aquí es donde defino mi función y uso innerHTML para escribir la salida. La función se define antes de la entrada real del usuario.

function calculateTip(){
        var checkAmount = document.getElementById("amountBox").value;
        var percentTip = document.getElementById("tipBox").value;
        var tipTotal = checkAmount * (percentTip / 100);
        document.getElementById("tipVar").innerHTML = tipTotal;
}
<body>
    <P>
      Enter the check amount: 
          $<input type="numeric" id="amountBox" size=10 value="">
      <br>
      Tip percentage: 
          %<input type="numeric" id="tipBox" size=4 value="">

    </P>
    <input type="button" value="Calculate Tip"
    onclick="calculateTip();" >
                  
    <hr>
    <div id="tipVar"></div>

  </body>

Por lo tanto, espero que cuando ingrese la cantidad del cheque y el porcentaje de propina y haga clic en el botón "Calcular propina", ejecutará la función y innerHTML escribirá el resultado de la función en la página en el contenedor div. Sin embargo, cuando hago clic en el botón, aparentemente no sucede nada. Si alguien tiene alguna ayuda / orientación, lo agradecería mucho.

0
Mark Mastandrea 30 oct. 2019 a las 20:42

3 respuestas

La mejor respuesta

Debe poner "tipVar" entre comillas dentro de su función. De lo contrario, el valor de una variable indefinida llamada tipVar se pasa en su lugar, y no encuentra ningún elemento por esa identificación.

0
Faust 30 oct. 2019 a las 17:46

Tienes un error tipográfico en el código:

Utilizar document.getElementById("tipVar").innerHTML = tipTotal;

Su código no funcionaba porque tipVar no estaba definido, es una ID y debe usarse como una cadena.

He actualizado el fragmento de pregunta y debería funcionar ahora.

1
nircraft 30 oct. 2019 a las 17:46

Acabas de olvidar las comillas en getElementById ("tipBox");

<html>
<body>
   <p> Enter the check amount:
   <input type="numeric" id="amountBox" size=10 value="">
<br>
Tip percentage: 
<input type="numeric" id="tipBox" size=4 value="">
</P>
<input type="button" value="Calculate Tip" onclick="calculateTip();">
    <hr>
    <div id="tipVar"></div>

<script>
function calculateTip(){
 var checkAmount = document.getElementById("amountBox").value;
 var percentTip = document.getElementById("tipBox").value;
 var tipTotal = checkAmount * (percentTip / 100);
 document.getElementById("tipVar").innerHTML = tipTotal;
}
</script>
  </body>
</html>
0
Welyngton Dal Prá 30 oct. 2019 a las 17:49