Question

我正在创建一个过滤器，在您选择了要过滤的内容后，我会根据您的选择创建span标记。我的最终目标是，当您单击span标记时，它将从列表中删除。如果一个简单的测试函数在点击时更改了跨度的文本，则会在创建跨度时调用该函数，而不是在单击时调用该函数

<!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>

Answer 1

如果要将函数分配给任何类型的处理程序（onclick，onkeypress等等），则需要排除大括号()。只要您在函数名称旁边有大括号，就会立即执行。所以在这种情况下，你会这样做：

 span.onclick = deleteSpan;

现在，您无法将参数传递给函数，但可以使用函数表达式轻松修复。

span.onclick = function(){
    deleteSpan(span);
}

Answer 2

更改此行

span.onclick = "deleteSpan(span)";

到

span.onclick = deleteSpan;

Demo

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

2 个答案: