变量hello
未定义。您可能希望将其设置innerHTML
为String
:
function myFunction(div_id) {
document.getElementById(div_id).innerHTML = "hello";
// -----------------------------------------^-----^
}
演示:http: //jsfiddle.net/uzuKp/1/
即使您从 W3Schools 中获取了一个示例并对其进行了修改,我还是建议将事件与 HTML 分开,并将关联的数据存储在data-*
属性中。在您的示例中,它可以是这样的:
<p>Click the button to trigger a function.</p>
<button data-div-id="demo1">Click me</button>
<button data-div-id="demo2">Click me</button>
<button data-div-id="demo1">Click me</button>
<div id="demo1">demo1</div>
<div id="demo2">demo2</div>
和 JS:
function clickHandler() {
var targetDivId, targetDiv;
targetDivId = this.getAttribute("data-div-id");
targetDiv = document.getElementById(targetDivId);
targetDiv.innerHTML = "Hello" + new Date().getTime();
}
function loadHandler() {
var buttons, i, j, cur;
buttons = document.getElementsByTagName("button");
for (i = 0, j = buttons.length; i < j; i++) {
cur = buttons[i];
cur.onclick = clickHandler;
}
}
window.onload = loadHandler;
演示:http: //jsfiddle.net/3K4RD/
虽然我也建议查看以下文章以了解绑定事件的不同方法:addEventListener vs onclick
我的最后一个建议是不要设置该innerHTML
属性。您可能在这里有一个简单的示例,但通常最好使用 DOM 方法,例如appendChild
(添加节点)和document.createTextNode
(创建可附加的文本)。当然,这需要先清除内容,例如:
while (targetDiv.firstChild) {
targetDiv.removeChild(targetDiv.firstChild);
}
targetDiv.appendChild(document.createTextNode("Hello"));
演示:http: //jsfiddle.net/52Kwe/
您还可以将需要设置为属性的特定字符串存储innerHTML
(data-*
尤其是在按钮之间不同时)。
更新:
根据您最近的编辑,该style
属性是一个特殊属性,它实际上是一个具有您需要设置的样式属性的特殊对象。因此,对于您的示例,您必须设置.style.display
值,例如:
document.getElementById(div_id).style.display = "none";