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

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

javascript html

Javascript 单击第一个按钮后HTML输出未更新/计算,javascript,html,Javascript,Html,目前正在学习javascript。我想创建一个简单的体积计算器进行练习。首先，当您单击按钮进行计算时，它会工作，但如果您更改输入的数字，则除非刷新，否则它不会计算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- scale

目前正在学习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);

获取函数中的值

const button=document.querySelector'button'； const volume=document.querySelector'.volume'；函数计算{ 常量长度=document.querySelector'.length'.value；常量宽度=document.querySelector'.width'.value；常量高度=document.querySelector'.height'.value； volume.innerHTML=长度*宽度*高度+立方英寸。； } 按钮。addEventListener“单击”，计算；计算您的音量是：

欢迎来到SO

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

请注意我将变量声明放在哪里。

您将在pageload上获取值，而不是在ClickThank上获取值，非常感谢。很高兴终于来到这里。粘贴代码而不做任何解释是没有帮助的。不清楚你改变了什么以及为什么。

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