我有一个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()我想使用 onclick="myFunction()"来显示和隐藏 div id myTable 。
如果在w3school上使用html格式，这是有效的。
但我使用.js文件格式。 我不能添加HTML代码，而不是使用变量
var ex = '<htmlcode></htmlcode>';
W3Schools切换显示/隐藏
I have a div which has onclick="myFunction()" for 'Show / hide' id="myTable".
in file.js I use format like this :
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()I want to Show and hide div id myTable using onclick="myFunction()" .
If using html format on w3school, this works.
But I use the .js file format. I cant add the html code other than using the variable
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没有链接在页面中动态创建的元素，并且通过事件委托我们可以解决这个问题。
<!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>Use this code snippet by making use of this snippet in this document.addEventListener will listen to all the clicks that are triggered but update the style value only when id matches the designated id provided in e.target.id , by this approach your js will here the dynamically created elements.In your case onclick function is not triggred because js have not linked the element dynamically created in the page , and by event delegation we can solve this problem.
更多推荐
发布评论