想知道为什么我的onlclick（）立即运行

我创建了一个筛选器，在您选择了要筛选的内容之后，我使用您的选择创建了span标记。我的最终目标是当您点击span标签时，它将从列表中移除。用一个简单的测试功能改变上点击跨度的文字问题，功能正在尽快创建并代替时，它的点击想知道为什么我的onlclick（）立即运行

<!DOCTYPE html> 
<html> 
<body> 
    <form> 
     <select id="Catergories"> 
      <option value="blank"></option> 
      <option value="country">Country</option> 
      <option value="city">City</option> 
      <option value="LastName">Last Name</option> 
      <option value="company">Company</option> 
     </select> 


     <label>Enter filter here: </label><br> 
     <input type="text" id="namehere"><br> 

     <div class="col-md-6"> 
      <button type="button" onclick="displayname()">Add Filter</button> 
     </div> 




     <div id="demo"></div> 
    </form> 
</body> 
</html> 
<script> 
    var filterCategory = []; 
    var filterValue = []; 
    function displayname() { 
     filterCategory.push(document.getElementById("Catergories").value); 
     filterValue.push(document.getElementById("namehere").value); 
     var span = document.createElement('span') 
     span.id = document.getElementById("Catergories").value + "_" + document.getElementById("namehere").value; 
     span.style.width = 500; 
     span.style.height = 500; 
     span.style.backgroundColor = "red"; 
     span.innerHTML = "Category: " + document.getElementById("Catergories").value + " Filter value: " + document.getElementById("namehere").value; 
     document.getElementById("demo").appendChild(span); 
     span.onclick = "deleteSpan(span)"; 

    } 

    function deleteSpan(element) 
    { 
     element.innerHTML = "test"; 
    } 

</script>

来源

2015-10-08 Chris

一个小侧面说明，你可能想使用事件侦听器，而不是'onclick'。你可以在这里阅读它：http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick – Artless