在Javascript中将变量传递到DOM函数_Javascript_Html_Dom

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

javascript html dom

在Javascript中将变量传递到DOM函数,javascript,html,dom,Javascript,Html,Dom,我从中获取了这个示例，并将其修改为此。下面的代码不起作用我打算做的是隐藏id为“demo1”的div。它不起作用。有什么问题 <!DOCTYPE html> <html> <head> <script> function myFunction(div_id) { //here the div_id variable seems to unparsable by the DOM ev

我从中获取了这个示例，并将其修改为此。下面的代码不起作用

我打算做的是隐藏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>


函数myFunction（div_id）
{
//这里的div_id变量似乎不可被DOM事件解析
document.getElementById（div_id）.innerHTML=hello；
}
单击按钮以触发一个函数
点击我

未定义变量

hello

。您可能希望将

innerHTML

设置为

字符串

：

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

演示：

即使您从W3Schools中获取了一个示例并对其进行了修改，我还是建议将事件与HTML分开绑定，并将相关数据存储在

data-*

attributes中。在您的示例中，可以如下所示：

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

演示：

您还可以将需要设置为

innerHTML

的特定字符串存储为

data-*

属性（特别是在按钮之间不同的情况下）

更新：

根据您最近的编辑，

style

属性是一个特殊属性，它实际上是一个特殊对象，具有您需要设置的样式属性。因此，对于您的示例，您必须设置

.style.display

值，如：

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

感谢您介绍了一些关于内联JS事件的常识：-）感谢您的帮助，并对给您带来的不便表示歉意。不过我有个问题，学校让它看起来很简单。为什么我要经历这些麻烦来绑定事件？优点是什么？@user1535147：“w3schools让它看起来很简单”。@user1535147我可能会写很多关于事件绑定的东西……主要是，HTML和JavaScript“应该”在语义和逻辑上是分开的。你应该能够确切地知道你的网页的每个部分在哪里。显然，您可以在HTML标记中包含

onclick=“someFunction（）；”

（其作用与此相同），但随后您必须找到（可能分散）JavaScript并找到

someFunction

。如果一切都在一个地方，那么调试和跟踪就很容易了。使用

addEventListener

，您可以将同一事件的多个处理程序绑定到单个元素（这种情况经常发生）。呃，您是否在编辑中对代码进行了重大更改？那是。。。不是很有帮助。使现有答案看起来有点奇怪。从

.innerhtml

到

.style

。这有意义吗？是的。信不信由你，他们做的事情完全不同。我想这就是为什么他们被赋予了完全不同的名字。鉴于你的问题是“为什么这个代码不起作用？”，一旦它被回答，改变代码会使它成为一个不同的问题。最好在问题的底部添加新代码，或者回答一个新问题。

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

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

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