Question

程序应该执行以下操作：用户应在右侧的输入字段中输入数字，然后单击“计算”。该值将在数组中推送。这将完成X次。此时X被硬编码为5，但这不是问题。

问题是在数组中推送最后一个数字后，将计算数组的总和并将其放在网页上。可视化不是问题，我很确定计算是正确的。我认为问题是如何读取输入或在数组中输入inputet。我可能错了。

最后一件事，计算所有内容的函数是compute1。编辑：实际错误：Uncaught TypeError: Cannot read property 'value' of null

这是完整的源代码：

<!DOCTYPE HTML>
<head>
<title>Asd</title>
    <style>
        .btn{
            width : 30px;
        }
    .btn2{
            width : 100px;
            height : 40px;
        }
    </style>
</head>
<body>
<center>    
    <table>
        <tr>
            <td>Number of elements:</td><td><input type="number" id="textField" class="btn"></input></td>
            <td>Please enter a number.</td> <td><input type="number" id="textFiledInp" class="btn"></input></td>        
        </tr>
    </table>
    <button class="btn2" onclick="compute1()" >compute</button>
    <p id="output"></p>
</center>
</body>
<script>
//var eleNum = parseInt(document.getElementById("textField"));
var eleNum = 5;
var arr = new Array;
function compute1()
{
    console.log("hi");
    if(eleNum > 0)
    {
        eleNum--;
        arr.push(parseInt(document.getElementById("textFieldInp").value));
        console.log(arr[arr.length-1]);
    }
    else{
        var sum = 0;
        for(var i = 0; i < arr.size; i++)
        {
            sum+= arr[i];
        }
        document.getElementById("output").innerHTML = sum;
    }
}
</script>

Answer 1

您元素的id中有拼写错误：

id="textFiledInp"

......应该是：

id="textFieldInp"

否则getElementById()无法找到该元素并返回null，因此会引用您的错误消息。

您的for循环正在尝试使用arr.size但它应该是arr.length。

预设eleNum到5似乎有点奇怪，但我并不完全清楚你在做什么，所以我不确定该建议什么。我怀疑你只需要在你的函数中移动注释掉的行并添加.value（并取消注释）：

eleNum = parseInt(document.getElementById("textField").value, 10);

而且，如果没有在第二个参数中指定基数，请不要使用parseInt()。这对用户输入的数据尤为重要。（因为否则浏览器可能会将前导0的值解释为八进制，将前导0x解释为十六进制。）

Answer 2

输入ID错误：

<td>Please enter a number.</td> <td><input type="number" **id="textFiledInp"** class="btn"></input></td>

并且您尝试获取id“textFieldInp”的元素：

document.getElementById("textFieldInp").value);

将id="textFiledInp"更改为id="textFieldInp"，它应该有效。

并且size不是javascript数组的正确属性。您应该在循环中使用length属性。

如果你想推入arr你宣布的数字，你应该写这样的东西（我不知道这是不是你想要的）：

    function compute1()
{
    console.log("hi");
    if(eleNum > 0)
    {
        eleNum--;
        arr.push(parseInt(document.getElementById("textFieldInp").value));
        console.log(arr[arr.length-1]);
    }
    else{
        var sum = 0;
        for(var i = 0; i < arr.length; i++)
        {
            sum+= arr[i];
        }
        document.getElementById("output").innerHTML = sum;
    }
}

Answer 3

在HTML中修复拼写错误后，您应该将代码更改为：

var eleNum = 5;
var arr = []; //see explanation

function compute1(value) {
    console.log("hi");
    if (eleNum > 0) {
        eleNum--;
        arr.push(parseInt(document.getElementById("textFieldInp").value || 0, 10)); // see explanation
        console.log(arr[arr.length - 1]);
    } else {
        var sum = 0;
        for (var i = 0; i < arr.length; i++) {
            sum += arr[i];
        }
        document.getElementById("output").innerHTML = sum;
    }
}

您使用的是新阵列;而不是新的Array（），更好的方法是使用括号表示法。或者，在您的情况下，您可以根据用户给出的长度（使用输入）或甚至使用您的元素数量来定义数组。它将是new Array(eleNum)。

为什么|| 0？因为如果输入没有被用户定义（值为null），那么它总和为0，否则你将拥有NaN;记得在parseInt中指定基数，请参阅nnnnnn的答案。

请参阅此working fiddle。

Answer 4

据我所知，你的计算是正确的，但你错过了一个括号console.log(arr[arr.length-1)

应该是：

        console.log(arr[arr.length-1]);

总和没有正确计算

4 个答案: