显示JavaScript的数学结果

我有显示数学函数的麻烦，有什么说的不对的控制台，所以我不知道我要去的地方错了。输出不会在这里显示正确的答案...显示JavaScript的数学结果

预期结果：在每个输入中输入数字，并且javascript将这两个输入值相乘，然后在您单击该按钮时显示结果。

var money = document.getElementById('money').value; 
 
    var years = document.getElementById('years').value; 
 
    var output = document.getElementById('output'); 
 
    var myOutput = money * years; 
 
    const btn = document.getElementById('btn'); 
 

 

 
    btn.addEventListener('click',() => { 
 
     output.innerHTML = myOutput; 
 
    })

<body> 
 
    <h4>how much money do you make a year?</h4> 
 

 
    <input id="money" type="number" placeholder="$$$"></input> 
 
    <input id="years" type="number" placeholder="years"></input> 
 

 
    <div id="output"> 
 

 
    </div> 
 

 
    <button id="btn" type="button">go</button> 
 

 
</body>

来源

2017-09-22 hannacreed

是的，我注意到这一点，并即将编辑，但是，当修复时，代码仍然不显示正确的答案...... – hannacreed

你'关于命令式编程语言如何工作，我们有一些基本的误解。您的myOutput声明不会在该变量和其他值之间建立永久关系;这是一个请求，在声明变量时执行**一次**。 – Pointy

叶，我只希望它显示一次，然后在窗口刷新重置... – hannacreed

你需要设置元素的innerHTML。您想要在点击按钮后获取用户输入值。因此，你移动你的变量回调函数内

const btn = document.getElementById('btn'); 
 

 

 
    btn.addEventListener('click',() => { 
 
     var money = document.getElementById('money').value; 
 
    var years = document.getElementById('years').value; 
 
    var output = document.getElementById('output'); 
 
    output.innerHTML = money * years; 
 
    })

<body> 
 
    <h4>how much money do you make a year?</h4> 
 

 
    <input id="money" type="number" placeholder="$$$"></input> 
 
    <input id="years" type="number" placeholder="years"></input> 
 

 
    <div id="output"> 
 

 
    </div> 
 

 
    <button id="btn" type="button">go</button> 
 

 
</body>

来源

2017-09-22 20:35:57

试试这个设置的DIV内HTML和拥有一切，但BTN元素上点击发生：

const btn = document.getElementById('btn'); 
 

 
    btn.addEventListener('click',() => { 
 
    var money = document.getElementById('money').value; 
 
    var years = document.getElementById('years').value; 
 
    var output = document.getElementById('output'); 
 
    var myOutput = money * years; 
 

 
     output.innerHTML = myOutput; 
 
    })

<body> 
 
    <h4>how much money do you make a year?</h4> 
 

 
    <input id="money" type="number" placeholder="$$$"></input> 
 
    <input id="years" type="number" placeholder="years"></input> 
 

 
    <div id="output"> 
 

 
    </div> 
 

 
    <button id="btn" type="button">go</button> 
 

 
</body>

来源

2017-09-22 20:36:55 rjustin

当你初始化你的应用程序，你的输入字段不甲肝e尚未填写任何值。

var money = document.getElementById('money'); 
 
var years = document.getElementById('years'); 
 
var output = document.getElementById('output'); 
 
const btn = document.getElementById('btn'); 
 

 
function calc(val1, val2) { 
 
\t return Number(val1.value) * Number(val2.value); 
 
} 
 

 

 
btn.addEventListener('click', (e) => { 
 
    output.innerHTML = calc(money, years); 
 
});

<body> 
 
    <h4>how much money do you make a year?</h4> 
 

 
    <input id="money" type="number" placeholder="$$$"></input> 
 
    <input id="years" type="number" placeholder="years"></input> 
 

 
    <div id="output"> 
 

 
    </div> 
 

 
    <button id="btn" type="button">go</button> 
 

 
</body>

来源

2017-09-22 20:48:59

啊好吧，我想这一点，但我不知道如何，除了为它创建一个值“钱= 0;”或类似的东西。 – hannacreed

这个答案和我自己非常相似。唯一的区别在于没有将字符串表单值转换为数字。这可能会导致其他论坛出现问题。 –

嗨@hannacreed，我不明白你的意见，请你澄清一下吗？另外，不需要将字符串值转换为数字，JavaScript会为您处理此操作，只需保持输入类型“数字”即可。 –

我想构建这样的：

const btn = document.getElementById('btn'); 
 
const money = document.getElementById('money'); 
 
const years = document.getElementById('years'); 
 
const output = document.getElementById('output'); 
 

 
btn.addEventListener('click',() => { 
 
    output.innerHTML = Number(money.value) * Number(years.value); 
 
})

<body> 
 
    <h4>how much money do you make a year?</h4> 
 

 
    <input id="money" type="number" placeholder="$$$"></input> 
 
    <input id="years" type="number" placeholder="years"></input> 
 

 
    <div id="output"> 
 

 
    </div> 
 

 
    <button id="btn" type="button">go</button> 
 

 
</body>

正如其他人所说，你需要移动点击处理程序中的逻辑。（在你的代码，因为它的结构，你会得到两个值一次，在脚本的负载，从不更新它们。）

我也爆发了从计算的DOM节点的搜索;任何时候这种改变都可能发生多次，这可能是一种很好的做法。

最后，我做任何工作，他们之前转换的字符串值，你会从表单元素进入数字。这通常是必要的，但由于一些JavaScript魔术，你实际上并不有在这里做了。（尝试从乘法更改为添加，看看忘记这种危险。）

来源

2017-09-22 20:50:02

显示JavaScript的数学结果

回答

相关问题