innerHTML javascript 动态

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;
}

我怀疑我处理变量的方式可能有问题。

演示： 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;
}

演示： 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;
}

演示： http://jsfiddle.net/3TyV3/3/

它通过在 JavaScript 中绑定事件来使用不显眼的 JavaScript，而不是内联 HTML。我确实使用了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