我目前在一个小的javascript项目中遇到了innerHTML函数的一些问题。基本上，我有一些HTML表单复选框可以更改一个数字（显示在同一页面上），具体取决于它们是否被选中。这个想法非常像一个IP地址。结果是0到255之间的数字。
但我想要做的是，每当用户点击一个复选框时，我都需要该号码来动态更改。 Idea类似于我们在此论坛上撰写问题时使用的概念。在您键入时，下面的文本会发生变化，以准确显示更改后的更改内容。
我的代码效果不佳。请问你能帮帮我吗？它不断给我留言“未定义”而不是总和。谢谢你的帮助。
的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;
}
我怀疑某些事情可能与我如何处理变量有关。
答案 0 :(得分：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添加值。
参考文献：