javascript - 需要有关 insideHTML 和数组输入变量的帮助

标签 javascript html arrays

我需要它来接受用户输入。取该值并减一,以便可以调用并打印 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>

最佳答案

你可以使用

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 />');
<小时/>

注释

  • 使用 parseIntparseFloat 时始终使用第二个参数(基数)。

  • 如果 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
    

关于javascript - 需要有关 insideHTML 和数组输入变量的帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19719626/

相关文章:

javascript - Mootools 将 Hash 转换为数组

javascript - 如何正确设置d3.brush extent?

php - html中的文本框

javascript - 更改传单图层控件图标

javascript - D3 v4 - d3.zoom() 防止绑定(bind)某些事件,但在 Window 上除外

html - <p> 标签的默认边距值是多少?

javascript - 将渲染的 SVG 图像转换为内联 SVG 而不重新加载外部文件?

javascript - 当数组更改时,Contenteditable DOM 更新不正确。 Angular

javascript - javascript运行后页面在右侧被 chop

c - 我将如何读取一行,解析信息,然后将其归因于 C 中的结构?