Aprendizaje de javascript actualmente. Quería crear una calculadora de volumen simple para practicar. Funciona al principio cuando hace clic en el botón para calcular, pero si cambia los números de las entradas, no se calculará a menos que se actualice.

<!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>Document</title>
    <link rel="stylesheet" href="Calc.css">
</head>
<body>
    <div class="box">
        <input type="number" class="length">
        <input type="number" class="width"> 
        <input type="number" class="height">
        <button type="button">calculate</button>
        <p>Your volume is: <span type="number" class="volume"></span></p> 
</div>

<script src="Calc.js"></script>
</body>
</html>


const length = document.querySelector('.length').value;
const width = document.querySelector('.width').value;
const height = document.querySelector('.height').value;
const button = document.querySelector('button');
const volume = document.querySelector('.volume');

function calculate () {
    volume.innerHTML = length * width * height + " cubic inches.";
}

button.addEventListener('click', calculate);
0
ben 24 sep. 2019 a las 08:26

3 respuestas

La mejor respuesta

Bienvenido a SO.

Hubo un pequeño error que cometiste allí en JS. En lugar de cargar longitud, anchura y altura en variable mientras se carga el archivo JS, debe cargar estos valores cada vez que se hace clic en el botón, es decir, cada vez que se llama a la función. Así que solo pon esas declaraciones de variables dentro de la función.

En pocas palabras,

De esto:

const length = document.querySelector('.length').value;
const width = document.querySelector('.width').value;
const height = document.querySelector('.height').value;
const button = document.querySelector('button');
const volume = document.querySelector('.volume');

function calculate () {
    volume.innerHTML = length * width * height + " cubic inches.";
}

button.addEventListener('click', calculate);

Irás a:

const button = document.querySelector('button');
const volume = document.querySelector('.volume');

function calculate () {
  const length = document.querySelector('.length').value;
  const width = document.querySelector('.width').value;
  const height = document.querySelector('.height').value;
  volume.innerHTML = length * width * height + " cubic inches.";
}

button.addEventListener('click', calculate);

Observe dónde he puesto declaración variable.

2
Saharsh 24 sep. 2019 a las 05:39

Obtener valores dentro de su función

const button = document.querySelector('button');
const volume = document.querySelector('.volume');

function calculate() {
  const length = document.querySelector('.length').value;
  const width = document.querySelector('.width').value;
  const height = document.querySelector('.height').value;
  volume.innerHTML = (length * width * height) + " cubic inches.";
}

button.addEventListener('click', calculate);
<div class="box">
  <input type="number" class="length">
  <input type="number" class="width">
  <input type="number" class="height">
  <button type="button">calculate</button>
  <p>Your volume is: <span type="number" class="volume"></span></p>
</div>
0
Nidhin Joseph 24 sep. 2019 a las 05:29
` <input type="text" id="length">
        <input type="text" id="width"> 
        <input type="text" id="height">
        <button type="button" id="myBtn">calculate</button>
        <p>Your volume is: <span id="Answer"> </span></p> 
<script>

    function calculateVolume()
     {
         var width = document.getElementById("width");
         var height = document.getElementById("height");
         var length = document.getElementById("length");
         var Answer = width * height *length  
        document.getElementById("Answer").innerHTML = Answer +"cubic inches.";

     }

     document.getElementById("myBtn").addEventListener("click", calculateVolume);

</script>
`
-1
sid busa 24 sep. 2019 a las 05:46