Question

当前正在学习JavaScript。我想创建一个简单的体积计算器进行练习。首先，当您单击按钮进行计算时，它会起作用，但是如果您更改输入的数字，除非刷新，否则它不会计算。

<!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);

Answer 1

欢迎来到。

您在JS中犯了一个小错误。加载JS文件时，不必在加载JS文件时在变量中加载长度，宽度和高度，而必须在每次单击按钮时即每次调用函数时加载这些值。因此，只需将这些变量声明放入函数中即可。

在坚果壳中

从此：

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);

您将转到：

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);

请注意我已在其中声明变量。

Answer 2

在函数内部获取值

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>

Answer 3

` <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>
`

单击第一个按钮后HTML输出未更新/计算

3 个答案: