创建一个乘法输入并继续除法答案

【问题标题】：Create a multiply input and proceed with the division创建一个乘法输入并继续除法
【发布时间】：2018-06-28 08:13:06
【问题描述】：

我是 javascript 的初学者，我想创建一个遵循公式的输入，

（细胞计数/体积）x 稀释度

体积 = 长 x 宽 x 高

我试过下面的代码。

<!DOCTYPE html>
<html> 
<head>
<meta charset=utf-8 />
<title>Cell Count</title> 
</head>
<body>
<form>
Cell Count : <input type="text" id="cell-count" /><br>
Box Count : <input type="text" id="box-count" /><br>
Dilution : <input type="text" id="dilution" /><br>
Length : <input type="text" id="lgh" /><br>
Width : <input type="text" id="wdh" /><br>
Height : <input type="text" Value="0,1" id="hgt" /><br>
<input type="button" id="count" Value="Cell Count" />
</form>
<p>Results : <span id = "results"></span> </p>

<script> 
var num1 = document.getElementById("cell-count").value;
num2 = document.getElementById("box-count").value;
num3 = document.getElementById("dilution").value;
num4 = document.getElementById("lgh").value;
num5 = document.getElementById("wdh").value;
num6 = document.getElementById("hgt").value;
count = document.getElementById('count');
results = document.getElementById('results');

count.onclick = function(){
if(num1.value && num3.value && num4.value && num5.value && num6.value) {
var volume = num2 * ( num4 * num5 * num6 );
result_count = num1 / volume * num3;
results.innerHTML = funcRound(result_count);
} else {
results.innerHTML = "Please insert values";
}
}
</script>
</body>
</html>

上面的代码没有按照我的预期运行，代码有什么问题吗？

为了更清楚我的错误是什么，请在这里帮助我https://jsfiddle.net/atlm/06a2demh/

请帮忙。

【问题讨论】：

请清楚您遇到了什么错误，您可以从控制台查看
什么num4 ??始终使用正确的变量名！
@ShobiPP 请在这里查看link,
@JonasW.我尝试使用另一个变量的名称，但相同

标签： javascript math input arithmetic-expressions multiplication

【解决方案1】：

您已经从元素中获取value 属性

var num1 = document.getElementById("cell-count").value;

然后再次访问此行中的value 属性：

if(num1.value && num3.value && num4.value && num5.value && num6.value).

而只是使用：

if(num1 && num3&& num4&& num5 && num6)

【讨论】：

谢谢，还是不行，请看这里jsfiddle.net/atlm/06a2demh

【解决方案2】：

您只需获取一次输入的值 - 您不会在每次提交表单时轮询它们。

<!DOCTYPE html>
<html> 
<head>
    <meta charset=utf-8 />
    <title>Cell Count</title> 
</head>
<body>
    <form>
        Cell Count : <input type="text" id="cell-count" /><br>
        Box Count : <input type="text" id="box-count" /><br>
        Dilution : <input type="text" id="dilution" /><br>
        Length : <input type="text" id="lgh" /><br>
        Width : <input type="text" id="wdh" /><br>
        Height : <input type="text" Value="0,1" id="hgt" /><br>
        <input type="button" id="count" Value="Cell Count" />
    </form>
    <p>Results : <span id = "results"></span> </p>

    <script> 
    count.onclick = function(){
        var cellCount = document.getElementById("cell-count").value,
            boxCount = document.getElementById("box-count").value,
            dilution = document.getElementById("dilution").value,
            length = document.getElementById("lgh").value,
            width = document.getElementById("wdh").value,
            height = document.getElementById("hgt").value,
            count = document.getElementById('count'),
            results = document.getElementById('results');


        if(cellCount && dilution && length && width && height) {
            var volume = boxCount * ( length * width * height );
            var result_count = (cellCount / volume) * dilution;
            results.innerHTML = funcRound(result_count);
        } else {
            results.innerHTML = "Please insert values";
        }
    }
    </script>
</body>
</html>

【讨论】：

谢谢，还是不行，请看这里jsfiddle.net/atlm/06a2demh

【解决方案3】：

Fuzzyzilla 解决您的问题。当您的页面首次加载时，您的脚本标签中的代码将被执行。因此，您的 num1.value, num3.value ... 都是未定义的，您的事件处理程序在使用它们之前不会重新评估它们。从一开始只需 console.log 你正在做什么或期望找到事情到底从哪里开始搞砸了！

还有未定义的result_count（初始已更正）；

【讨论】：

谢谢，但还是对你的意思感到困惑，请查看jsfiddle.net/atlm/06a2demh
@KKoku 谢谢 :)