Question

我从w3schools获取此示例并将其修改为此。以下代码无效。

我打算做的是隐藏id为“demo1”的div。它不起作用。有什么问题？

<!DOCTYPE html>
<html>

<head>
    <script>
        function myFunction(div_id)
        {
            //here the div_id variable seems to unparsable by the DOM event
            document.getElementById(div_id).innerHTML = hello;
        }
    </script>
</head>


<body>

    <p>Click the button to trigger a function.</p>

    <button onclick="myFunction('demo1')">Click me</button>

    <div id="demo1"></div>
    <div id="demo2"></div>

</body>
</html>

Answer 1

未定义变量hello。您可能希望将innerHTML设置为String：

function myFunction(div_id) {
    document.getElementById(div_id).innerHTML = "hello";
    // -----------------------------------------^-----^
}

DEMO： 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;

DEMO： http://jsfiddle.net/3K4RD/

虽然我也建议查看以下文章，了解绑定事件的不同方法：addEventListener vs onclick

我的最后一个建议是不设置innerHTML属性。您可能在这里有一个简单的示例，但通常更好的方法是使用appendChild（添加节点）和document.createTextNode等DOM方法（以创建可附加的文本）。当然，这需要首先清除内容，例如：

while (targetDiv.firstChild) {
    targetDiv.removeChild(targetDiv.firstChild);
}
targetDiv.appendChild(document.createTextNode("Hello"));

DEMO： http://jsfiddle.net/52Kwe/

您还可以将需要设置为innerHTML的特定字符串存储为data-*属性（特别是如果按钮之间不同）。

<强>更新

根据您最近的编辑，style属性是一个特殊属性，实际上是一个需要设置样式属性的特殊对象。因此，对于您的示例，您必须设置.style.display值，例如：

document.getElementById(div_id).style.display = "none";

Answer 2

document.getElementById(div_id).style.display = 'none';
document.getElementById(div_id).style.visibility= 'hidden';

在Javascript中将变量传递给DOM函数

2 个答案: