需要有关 innerHTML 和数组输入变量的帮助答案

【问题标题】：Need helping with innerHTML and array input variables需要有关 innerHTML 和数组输入变量的帮助
【发布时间】：2013-11-01 10:25:47
【问题描述】：

我需要这个来接受用户输入。取值并减去 1，以便可以调用和打印 5 个数组之一。如果选择 5，则打印所有 5 个数组；如果选择 3，则打印数组 0 到 2。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test2</title>
</head>
<body>
<input type="button" onclick="dutyarray()" value="Click">To see my top<input type="number"     id="counter"> job duties here</input>
<br />
<p id="task">Duties</p>
<script>
function dutyarray()
{
    var x = document.getElementById('counter').value;
    x = parseInt(x);

    var duty= new Array();
    duty[0] = "Operate Equipment";
    duty[1] = "Check for Water Damage";
    duty[2] = "Check for Mold";
    duty[3] = "Follow Insurance Procedure";
    duty[4] = "Restore";        

    while(x >= 0; x - 1)
    {
        document.getElementById('task').innerHTML = duty[x] + <br>;
    }
}
</script>

【问题讨论】：

边界检查...确保x 在执行该循环之前大于0！哦，使用x--...
while(x >= 0; x - 1) 不是可以做到的。请查阅“JavaScript 数组文字”。 <br> 可能需要在一个字符串中。要追加，您可以使用 +=，但 DOM 是一个更好的解决方案。
你有很多错误...1。在您的示例中只编写最少的代码。 2.input标签没有innerHTML attr，它是一个开放标签。 3.阅读其他cmets。

标签： javascript html arrays

【解决方案1】：

你可以使用

var duty = [
        "Operate Equipment",
        "Check for Water Damage",
        "Check for Mold",
        "Follow Insurance Procedure",
        "Restore"
    ],  
    x = parseInt( document.getElementById('counter').value, 10 );
document.getElementById('task').innerHTML = duty.slice(0, x).join('<br />');

备注

在使用parseInt 或parseFloat 时始终使用第二个参数（基数）。
如果document.getElementById('counter').value 是数字字符串（如'3'），请勿使用parseInt。相反，如有必要，请使用+'3' 获取号码3。

如果您想将'3px' 之类的内容解析为3，请仅使用parseInt。

不要使用getElementById 在循环的每次迭代中获取相同的元素。

然后，而不是

for(var i = 0; i < n; ++i) {
   doSomething(document.getElementById('foo'), i);
}

使用

var el = document.getElementById('foo');
for(var i = 0; i < n; ++i) {
   doSomething(el, i);
}

永远不要在循环的每次迭代中更改innerHTML，因为修改 DOM 的性能很差。

然后，而不是

for(var i = 0; i < n; ++i) {
   element.innerHTML += someHTML(i); // n DOM modifications
}

使用

var html = '';
for(var i = 0; i < n; ++i) {
   html += someHTML(i);
}
element.innerHTML = html; // only 1 DOM modification

【讨论】：

【解决方案2】：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test2</title>
</head>
<body>
    <input type="button" onclick="dutyarray()" value="Click">To see my top
    <input type="number" id="counter"> job duties here</input>
    <br />
    <p id="task">Duties</p>
    <script>
        function dutyarray() {
            var x = document.getElementById('counter').value;
            x = parseInt(x);

            var duty =
                [
                "Operate Equipment",
                "Check for Water Damage",
                "Check for Mold",
                "Follow Insurance Procedure",
                "Restore"
                ];

            if (x > duty.length-1) x = duty.length-1;   // Performs some checking

            document.getElementById('task').innerHTML = "";
            for ( ; x >= 0; x--) {
                document.getElementById('task').innerHTML += duty[x] + "<br>";
            }
        }
    </script>
</body>
</html>

【讨论】：

这里有很多很好的建议，越来越接近我的需求，请继续关注。