Question

我是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/

请帮忙。

Answer 1

Fuzzyzilla解决您的问题。首先加载页面时，脚本标记中的代码将被删除。因此，您的num1.value，num3.value ...都是未定义的，您的事件处理程序在使用它们之前不会重新评估它们。从一开始就只是console.log你正在做什么或者期望找到什么东西开始搞乱！

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

Answer 2

您已从元素

中获取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)

Answer 3

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

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

创建一个乘法输入并继续进行除法

3 个答案: