想知道爲什麼我的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