title: onclick event doesn't work in span tag
body: <p>I just finished my javascript course in somewhere in online, and tried to make my own small project 'todolist'.</p>
  
  <p>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. </p>
  
  <p>I tested using console.log() but It shows me what I want, but it doesn't works in tag. </p>
  
  <p>Here is my Code : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
    &lt;title&gt;ToDoList&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;script&gt;
      var count = 50;
      var i = 0;
      var tag = '';
    &lt;/script&gt;
    &lt;div id="input_table"&gt;
      &lt;div id="input_box"&gt;
        &lt;h1 style="color:white"&gt;My To Do List&lt;/h1&gt;
        &lt;div class="align_center"&gt;
          &lt;input class="text_box" type="text" value="Title..."&gt;
          &lt;span class="submit_box" onclick="write()"&gt;Add&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="output_table"&gt;
      &lt;div class="store_box"&gt;
        &lt;ul class="store_ul"&gt;
  
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
      function write() {
        var text = document.querySelector('.text_box').value;
        console.log(text);
        if (i &lt; 50) {
          tag += '&lt;div class="oneLine"&gt;&lt;li class="input_text"&gt;' + text + '&lt;/li&gt;&lt;span class="close_box"&gt;x&lt;/span&gt;&lt;/div&gt;';
          document.querySelector('.store_ul').innerHTML = tag;
          console.log(tag);
          i++;
        } else {
          alert("lists can't be added more than 50 works");
        }
      }
    &lt;/script&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>