gpt4 book ai didi

javascript - 在变量JS中使用onclick ="myFunction()"

转载 作者:行者123 更新时间:2023-12-03 03:04:25 25 4
gpt4 key购买 nike

我有一个div其中有onclick="myFunction()"对于“显示/隐藏id="myTable" .

file.js中我使用这样的格式:

function example () {
var popup = '<div class="box">' +
'<div onclick="myFunction()" id="button"></div>' +
'<div id="myTable" class="myTable"></div>' +
'</div>'; //box
}; //End function example()


/**** How to make myFunction () work? ****/

function myFunction() {
var x = document.getElementById("myTable");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}; // End function myFunction()

我想显示和隐藏 div id myTable 使用 onclick="myFunction()" .

如果在 w3school 上使用 html 格式,则此方法有效。

但我使用 .js 文件格式。除了使用变量之外,我无法添加 html 代码

var ex = '<htmlcode></htmlcode>';

W3Schools Toggle Show/Hide

最佳答案

<!DOCTYPE html>
<html>
<head>
<title>Demo example</title>
</head>

<body>
<div id="hello"></div>
<script>
example();

function example() {
var popup = '<div class="box">HELLO World' +
'<button id="button">Button</button>' +
'<div id="myTable" class="myTable">Some Content Here</div>' +
'</div>'; //box
var el = document.getElementById('hello')
el.innerHTML = popup;
//alert(popup);
}; //End function example()


/**** How to make myFunction () work? ****/
document.addEventListener('click', function(e) {
console.log(e.target.id)
if (e.target && e.target.id == 'button') { //do something
myFunction()
}
})

function myFunction() {
var x = document.getElementById("myTable");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};
</script>
</body>

</html>

通过使用本文档中的此代码片段来使用此代码片段。addEventListener 将监听触发的所有点击,但仅当 id 与 e.target.id 中提供的指定 id 匹配时更新样式值,通过这种方法你的js将在这里动态创建的元素。在你的情况下,onclick函数没有被触发,因为js没有链接页面中动态创建的元素,通过事件委托(delegate)我们可以解决这个问题。

关于javascript - 在变量JS中使用onclick ="myFunction()",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47236278/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com