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/

That solves the undefined issue, Thanks. but the logic still isnt producing the result that I want. I will further my investigation meantime. thanks for your help — thienwgu
– thienwgu, Commented May 13, 2013 at 14:25
Yeah, I wasn't expecting it to fix everything, I just noticed you were trying to increment a number that wasn't initialized. Try putting it into a jsfiddle.net so we can see how you're using this — Ian
– Ian, Commented May 13, 2013 at 14:27

Ian · Accepted Answer · 2013-05-13 14:54:25Z

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

thanks lan, I'll look into your code. Once I understand it I might implement it. thanks again for your help!!!
@thienwgu No problem at all, thanks :) I just updated my answer with how I would do it. I hope it's not too much, and you obviously don't have to use it, but hopefully you learn a few things. Let me know if you have any questions or need more help

Collectives™ on Stack Overflow

innerHTML javascript dynamic

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related