onclick event doesn't work in span tag
Question
I just finished my javascript course in somewhere in online, and tried to make my own small project 'todolist'.
when user put work into and click , list should be added, but it shows a white and clear page.. I really can't see what's the problem in here.
I tested using console.log() but It shows me what I want, but it doesn't works in tag.
Here is my Code :
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 answers
solution1
0 ACCPTED 2018-07-14 00:27:26
write will refer to the global function document.write , which will completely replace the page if the page has already been loaded. Use a different function name, perhaps "addTodo":
It would also probably be better to use a placeholder rather than a hard-coded value of Title... in the input box:
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>
solution2
0 2018-07-14 00:27:44
You have a name conflict and the native method overrides yours in the global scope. In the example below you can see it is document.write.
<button onclick="console.log(write)">console</button> <button onclick="console.log(write('hi'))">Hi</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.