[英]Javascript to change innerHTML function not working
我正在构建一个由表中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;
}
}
在您的代码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;
}
}
更新:您可以按照@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';
}
}
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";
}
}
这使您的功能易于测试
在为单元变量分配元素ID并更改无效的cell的innerHTML时。
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;
}
}
这将正确更改div鼠标悬停的文本!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.