innerHTML javascript dynamic

Question

我目前在一个小javascript项目中遇到了innerHTML函数的一些问题。基本上，我有一些HTML表单复选框，它们根据是否被选中来更改数字（显示在同一页面上）。这个想法非常像一个IP地址。结果是一个介于0和255之间的数字。

但是我想做的事情是，无论何时用户点击一个复选框，我都需要该数字动态更改。理念类似于我们在这个论坛上撰写问题时使用的概念。在你输入的时候，下面的文字会变化，以显示出它发生了什么变化。

我的代码工作得不好。请问你能帮帮我吗？它一直给我的信息“未定义”，而不是总和。谢谢你的帮助。

的JavaScript

function displayOctets01(){ 
var octet01 = new Array(8); 
octet01[0] = document.getElementById('octect0101'); 
octet01[1] = document.getElementById('octect0102'); 
octet01[2] = document.getElementById('octect0103'); 
octet01[3] = document.getElementById('octect0104'); 
octet01[4] = document.getElementById('octect0105'); 
octet01[5] = document.getElementById('octect0106'); 
octet01[6] = document.getElementById('octect0107'); 
octet01[7] = document.getElementById('octect0108'); 
var firstOctect; 

if(octet01[0]==true){ 
firstOctect+=1; 
} 
else if(octet01[1]==true){ 
firstOctect+=2; 
} 
else if(octet01[2]==true){ 
firstOctect+=4; 
} 
else if(octet01[3]==true){ 
firstOctect+=8; 
} 
else if(octet01[4]==true){ 
firstOctect+=16; 
} 
else if(octet01[5]==true){ 
firstOctect+=32; 
} 
else if(octet01[6]==true){ 
firstOctect+=64; 
} 
else if(octet01[7]==true){ 
firstOctect+=128; 
} 

document.getElementById("octets01").innerHTML = firstOctect; 
} 
else if(octet01[7]==true){ 
firstOctect+=128; 
} 

document.getElementById("octets01").innerHTML = firstOctect; 
} 

我怀疑的东西可能是wron与我如何处理的变量。

DEMO：http://jsfiddle.net/3TyV3/

Answer 1

的第一个问题是，可变firstOctet未初始化。在功能开始时需要设置为0。此外，不知道你的程序的目的，似乎你不想使用else if - 你需要检查每个复选框。此外，您不应该将元素与== true进行比较，您应该检查其属性checked此外，您的jsFiddle已设置为运行onLoad，因此该功能不是全局可用的。最后，你没有要输出的id“octets01”元素。试试这个：

function displayOctets01() { 
    var octet01 = [], 
     firstOctect = 0; 

    octet01[0] = document.getElementById('octect0101'); 
    octet01[1] = document.getElementById('octect0102'); 
    octet01[2] = document.getElementById('octect0103'); 
    octet01[3] = document.getElementById('octect0104'); 
    octet01[4] = document.getElementById('octect0105'); 
    octet01[5] = document.getElementById('octect0106'); 
    octet01[6] = document.getElementById('octect0107'); 
    octet01[7] = document.getElementById('octect0108'); 

    if (octet01[0].checked === true) { 
     firstOctect += 1; 
    } 
    if (octet01[1].checked === true) { 
     firstOctect += 2; 
    } 
    if (octet01[2].checked === true) { 
     firstOctect += 4; 
    } 
    if (octet01[3].checked === true) { 
     firstOctect += 8; 
    } 
    if (octet01[4].checked === true) { 
     firstOctect += 16; 
    } 
    if (octet01[5].checked === true) { 
     firstOctect += 32; 
    } 
    if (octet01[6].checked === true) { 
     firstOctect += 64; 
    } 
    if (octet01[7].checked === true) { 
     firstOctect += 128; 
    } 

    document.getElementById("octets01").innerHTML = firstOctect; 
} 

DEMO：http://jsfiddle.net/3TyV3/2/

虽然我不会说谎，我会整理一些东西。这是我会怎么做：

window.onload = function() { 
    var checkboxes = document.querySelectorAll('[name="featuresOctet01"]'), 
     i; 
    for (i = 0; i < checkboxes.length; i++) { 
     addEvent(checkboxes[i], "click", clickHandler); 
    } 
}; 

function addEvent(element, eventName, callback) { 
    if (element.addEventListener) { 
     element.addEventListener(eventName, callback, false); 
    } else if (element.attachEvent) { 
     element.attachEvent("on" + eventName, callback); 
    } else { 
     element["on" + eventName] = callback; 
    } 
} 

function clickHandler() { 
    var firstOctect = 0, 
     checkboxes = document.querySelectorAll('[name="featuresOctet01"]'), 
     i, cur; 

    for (i = 0; i < checkboxes.length; i++) { 
     cur = checkboxes[i]; 
     if (cur.checked) { 
      firstOctect += Math.pow(2, i); 
     } 
    } 

    document.getElementById("octets01").innerHTML = firstOctect; 
} 

DEMO：http://jsfiddle.net/3TyV3/3/

它通过结合在JavaScript中，而不是内嵌HTML事件使用非侵入式JavaScript。我确实使用了click事件，而不是change，因为旧版本的IE对于复选框/单选按钮有奇怪的行为。 addEvent函数只是一个简单的函数，用于在新的浏览器和旧的IE中绑定事件。

它选择名称为“featuresOctet01”的所有元素并将事件添加到每个元素。然后，在处理程序中，它遍历每个复选框，查看是否已选中，然后根据2^i添加一个值。

参考文献：

• addEventListener：https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener
• document.querySelectorAll：https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll
• Math.pow：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Math/pow