Javascript to change innerHTML function not working

Question

I'm building an interface that consists of 9 cells in table. When a person mouses over a cell, I want other cells to become visible, and change the text content of some of the cells. I can do that just fine if I create individual functions to change the content of each cell, but that's crazy.

I want a single function to change the text depending on the cells involved. I created a function that can take n arguments, and loops through making changes based on the arguments passed in to the function. It doesn't work.

Code for the function is below. If I call it, onMouseOver="changebox('div3')", the argument makes it to the function when I mouse over the cell. If I uncomment the document.write(cell) statement, in this instance, it prints div3 to the screen. So... why isn't it making any changes to the content of the div3 cell?

function changebox() {
    for (var i = 0; i < arguments.length; i++) {
        var cell = document.getElementById(arguments[i]).id;
        var text = "";

        if (cell == 'div3') {
            text = "Reduced Travel";
        } else if (cell == 'div4') {
            text = "Reduced Cost";
        }
        //document.write(cell)
        cell.innerHTML = text;
    }
}

You've assigned cell the value of the id attribute. It is not an element — Phil
– Phil, Commented Nov 4, 2015 at 5:13

Tushar · Accepted Answer · 2015-11-04 05:28:08Z

2

In your code cell is a string which holds the id of the object. Update the code as follows

function changebox() {
    for (var i = 0; i < arguments.length; i++) {
        var cell = document.getElementById(arguments[i]),
            text = "";

        if (cell.id == 'div3') {
            text = "Reduced Travel";
        } else if (cell.id == 'div4') {
            text = "Reduced Cost";
        }
        //document.write(cell)
        cell.innerHTML = text;
    }
}

UPDATE : You can reduce the code as @Tushar suggested.

No need of iterating over arguments(assuming there are only two elements, but can be modified for more elements).

function changebox() {
    // As arguments is not real array, need to use call
    // Check if div is present in the arguments array
    var div3Index = [].indexOf.call(arguments, 'div3') > -1,
        div4Index = [].indexOf.call(arguments, 'div4') > -1;

    // If present then update the innerHTML of it accordingly        
    if (div3Index) {
        document.getElementById('div3').innerHTML = 'Reduced Travel';
    } else if (div4Index) {
        document.getElementById('div4').innerHTML = 'Reduced Cost';
    }
}

edited Nov 4, 2015 at 5:28

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

answered Nov 4, 2015 at 5:14

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tushar Over a year ago

Also add

function changebox() {       var div3Index = [].indexOf.call(arguments, 'div3') > -1,           div4Index = [].indexOf.call(arguments, 'div4') > -1;       if (div3Index) {           document.getElementById('div3').innerHTML = 'Reduced Travel';       } else if (div4Index) {           document.getElementById('div4').innerHTML = 'Reduced Cost';       }   }

in answer. No loop needed. :)

Tushar Over a year ago

@SeattleDucati Welcome. Glad to help. :)

Sean Over a year ago

@PranavCBalan in javascript indexOf is not implement by loop through the list? I don't think so. quote from MDN:

indexOf() compares searchElement to elements of the Array using strict equality (the same method used by the ===, or triple-equals, operator).

Sean · Accepted Answer · 2015-11-04 05:28:18Z

1

function changebox() {
    var args = [].slice.call(arguments);
    args.map(document.getElementById.bind(document)).forEach(setElement);
}

function setElement(ele) {
  if (ele.id === 'div3') {
     ele.innerHTML = "Reduced Travel";
  } else if (ele.id === 'div4') {
     ele.innerHTML = "Reduced Cost";
  }
}

this make your function easy to be tested

answered Nov 4, 2015 at 5:28

Sean

3,0722 gold badges23 silver badges35 bronze badges

Comments

kailash yogeshwar · Accepted Answer · 2015-11-04 06:11:52Z

1

As your assigning the cell variable the id of the element and changing the innerHTML of cell which is not valid .

    var changeText = function() {
    console.log("in change text");
    for(var i= 0; i<arguments.length; i++) {
        var elem = document.getElementById(arguments[i]);
        var cell = document.getElementById(arguments[i]).id;
        var text = "";
        console.log(cell)
        if (cell === "div-1") {
            text = cell+" was selected!!";
        } else if(cell === "div-3") {
            text = cell+" was selected!!";
        } else {
            text = cell+" was selected";
        }

        elem.innerHTML = text;
    }
}

This would properly change the text of div mouseovered!!

answered Nov 4, 2015 at 6:11

kailash yogeshwar

8341 gold badge9 silver badges28 bronze badges

Collectives™ on Stack Overflow

Javascript to change innerHTML function not working

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related