innerHTML javascript dynamic

Question

I am currently having some issues with the innerHTML function in a little javascript project. Essentially, I have a few HTML form checkboxes which change a number (that is displayed on the same page) depending on whether they are checked or not. The idea is very much like an IP address. The result is a number between 0 and 255.

What I want to do however is that whenever the user clicks on a checkbox, I need that number to change dynamically. Idea resembles the concept that is used when we write a question on this forum. As you type, the text below changes dynamilly to show exactly what is changed as it changes.

My code isn't working too well. Could you help me please? It keeps giving me the message "undefined" instead of the sum. Thanks for your help.

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

I suspect that something might be wron with how I am handling the variables.

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

Answer 1

The first problem is that the firstOctet variable isn't initialized. That needs to be set to 0 at the beginning of your function. Also, without knowing the purpose of your program, it seems that you don't want to be using else if - you need to check every checkbox. Also, you shouldn't be comparing the element with == true , you should check its checked property Also, your jsFiddle was set to run onLoad , so the function wasn't globally available. Finally, you didn't have an element with the id "octets01" to output to. Try this:

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/

Although I won't lie, I'd reorganize some things. Here's how I would do it:

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/

It uses unobtrusive JavaScript by binding the events in JavaScript, not the inline HTML. I did use the click event instead of change because old versions of IE has weird behavior for it with checkboxes/radio buttons. The addEvent function is just a simple function for binding events in new browsers as well as old IE.

It selects all elements with the name "featuresOctet01" and adds the event to each. Then, in the handler, it loops through each checkbox, sees if it's checked, and then adds a value based on 2^i .

References:

• 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