EventListener问题

Question

我正在创建一个有重置按钮的应用

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

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

但我无法在我的Index.cshtml中使用它 我想知道是否有人可以告诉我如何在我的应用程序中获得此工作，可能将该函数放在.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>

Answer 1

在文档加载完成之前分析您的脚本，这意味着当它尝试查找ID时，尚未创建元素，因此不会添加任何事件侦听器。将您的标签放在相应的html下面或者更好，将它放在外部的.js文件中，然后在关闭的body标签之前引用它。