EventListener出现问题

Trouble with EventListener

本文关键字：问题 EventListener      更新时间：2023-09-26

我正在制作一个带有重置按钮的应用程序

现在这个重置按钮需要将所有值重置为默认值

我发现了一个例子：http://jsfiddle.net/RoryMcCrossan/b55Au/2/

但我无法在我的Index.chtml中实现此功能我想知道是否有人能告诉我如何在我的应用程序中完成这项工作，也许可以把函数放在.js文件中，然后在布局中加载这个.js文件或其他什么？

我的index.cshtml类：

@{
ViewBag.Title = "Index";
}

<script>
    function resetInput1(e) {
        document.getElementById('input1').value = document.getElementById('input1').defaultValue;
    }
    function resetInput2(e) {
        document.getElementById('input2').value = document.getElementById('input2').defaultValue;
    }
    function resetSelect1(e) {
        document.getElementById('select1').value = document.getElementById('select1').selectedIndex = 0;
    }

    document.getElementById("btn1").addEventListener('click', resetInput1, true);
    document.getElementById("btn2").addEventListener('click', resetInput2, true);
    document.getElementById("btn3").addEventListener('click', resetSelect1, true);
</script>
<form id="test">
    Input 1: <input type="test" id="input1" value="abcded" /><br><br>
    Input 2: <input type="test" id="input2" value="xyz123" /><br><br>
    Select 1:
    <select id="select1">
        <option selected="selected">Please select...</option>
        <option>Option #1</option>
        <option>Option #2</option>
        <option>Option #3</option>
        <option>Option #4</option>
    </select><br /><br />
    <input type="button" id="btn1" value="Reset Input #1" /><br><br>    
    <input type="button" id="btn2" value="Reset Input #2" /><br><br>    
    <input type="button" id="btn3" value="Reset Select #1" /><br><br>
</form>

在文档加载完成之前，会对脚本进行分析，这意味着当它试图查找ID时，元素尚未创建，因此不会添加事件侦听器。要么把标签放在相应的html下面，要么把它放在一个外部.js文件中，并在结束body标签之前引用它。

相关文章：