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);
3 respuestas
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.
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>` <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>
`
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.