Javascript для изменения функции innerHTML не работает

Question

Я создаю интерфейс, состоящий из 9 ячеек в таблице. Когда человек мыши над клеткой, я хочу, чтобы другие ячейки стали видимыми, и изменили текстовое содержимое некоторых из ячеек. Я могу сделать это просто отлично, если я создаю отдельные функции для изменения содержимого каждой ячейки, но это безумие.

Я хочу, чтобы одна функция меняла текст в зависимости от задействованных ячеек. Я создал функцию, которая может принимать n аргументов и циклы путем внесения изменений на основе аргументов, переданных функции. Это не работает.

Код для функции ниже. Если я его назову, onMouseOver="changebox('div3')", аргумент переводит его в функцию при наведении мыши на ячейку. Если я раскомментирую оператор document.write (cell), в этом случае он выводит div3 на экран. Итак ... почему он не вносит никаких изменений в содержимое ячейки div3?

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

Answer 1

В коде cell это строка, которая содержит id объекта. Обновление кода следующим

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: Вы можете уменьшить код, как предложил @Tushar.

Не требуется итерации свыше arguments (, предполагая, что существует только два элемента, но могут быть изменены для большего количества элементов).

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

Answer 2

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

это сделать вашу функцию легко испытываться

Answer 3

Как ваш присвоив переменной ячейкой идентификатор элемента и изменения innerHTML клетки, которая не является действительным.

Это правильно изменит текст div, навешенный рукой!