onclick事件在span标签中不起作用
[英]onclick event doesn't work in span tag
问题描述
我刚刚在网上某个地方完成了javascript课程，并尝试制作自己的小型项目“ todolist”。
当用户放入工作并单击时，应添加列表，但它显示白色且清晰的页面。.我真的看不到这里有什么问题。
我使用console.log（）进行了测试，但是它显示了我想要的内容，但是在tag中不起作用。
这是我的代码：
input[type=text] { width: 500px; height: 40px; float: left; } #input_table { display: block; margin-left: auto; margin-right: auto; } #input_box { text-align: center; padding-bottom: 50px; background-color: crimson; } .align_center { display: inline-block; text-align: center; } .submit_box { padding: 10px; width: 50px; height: 25px; background: #d9d9d9; color: #555; float: left; font-size: 16px; cursor: pointer; transition: 0.3s; border-radius: 0; text-align: center; } body { background-color: gold; } .input_text { float: left; } .store_ul { margin: 0; padding: 0; text-align: right; } .oneLine { font-size: 30px; width: 100%; height: 50px; background-color: blue; } .close_box { padding: 5px; width: 50px; height: 25px; color: #555; cursor: pointer; }
<head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="main.css"> <title>ToDoList</title> </head> <body> <script> var count = 50; var i = 0; var tag = ''; </script> <div id="input_table"> <div id="input_box"> <h1 style="color:white">My To Do List</h1> <div class="align_center"> <input class="text_box" type="text" value="Title..."> <span class="submit_box" onclick="write()">Add</span> </div> </div> </div> <div class="output_table"> <div class="store_box"> <ul class="store_ul"> </ul> </div> </div> <script> function write() { var text = document.querySelector('.text_box').value; console.log(text); if (i < 50) { tag += '<div class="oneLine"><li class="input_text">' + text + '</li><span class="close_box">x</span></div>'; document.querySelector('.store_ul').innerHTML = tag; console.log(tag); i++; } else { alert("lists can't be added more than 50 works"); } } </script> </body>
2 个解决方案
解决方案1
0 已采纳 2018-07-14 00:27:26
write将引用全局函数document.write ，如果已经加载页面，它将完全替换该页面。 使用其他函数名称，也许是“ addTodo”：
在输入框中使用占位符而不是Title...的硬编码值可能会更好：
var count = 50; var i = 0; var tag = ''; function addTodo() { var text = document.querySelector('.text_box').value; console.log(text); if (i < 50) { tag += '<div class="oneLine"><li class="input_text">' + text + '</li><span class="close_box">x</span></div>'; document.querySelector('.store_ul').innerHTML = tag; console.log(tag); i++; } else { alert("lists can't be added more than 50 works"); } }
input[type=text] { width: 500px; height: 40px; float: left; } #input_table { display: block; margin-left: auto; margin-right: auto; } #input_box { text-align: center; padding-bottom: 50px; background-color: crimson; } .align_center { display: inline-block; text-align: center; } .submit_box { padding: 10px; width: 50px; height: 25px; background: #d9d9d9; color: #555; float: left; font-size: 16px; cursor: pointer; transition: 0.3s; border-radius: 0; text-align: center; } body { background-color: gold; } .input_text { float: left; } .store_ul { margin: 0; padding: 0; text-align: right; } .oneLine { font-size: 30px; width: 100%; height: 50px; background-color: blue; } .close_box { padding: 5px; width: 50px; height: 25px; color: #555; cursor: pointer; }
<head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="main.css"> <title>ToDoList</title> </head> <body> <script> </script> <div id="input_table"> <div id="input_box"> <h1 style="color:white">My To Do List</h1> <div class="align_center"> <input class="text_box" type="text" placeholder="Title..."> <span class="submit_box" onclick="addTodo()">Add</span> </div> </div> </div> <div class="output_table"> <div class="store_box"> <ul class="store_ul"> </ul> </div> </div> <script> </script> </body>
解决方案2
0 2018-07-14 00:27:44
您有一个名称冲突，并且本机方法会在全局范围内覆盖您的名称。 在下面的示例中，您可以看到它是document.write。
<button onclick="console.log(write)">console</button> <button onclick="console.log(write('hi'))">Hi</button>
单击包含span的div，不会触发onclick事件 - React
[英]Clicking on a div that contains span, doesn't trigger onclick event - React
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.