Question

这是我的HTML代码：

document.getElementById("sub").addEventListener("click", testing());
function testing() {
 document.getElementById("demo").innerHTML ="good"; 
}

<input type="submit" value="Place Order" id="sub"/>
    </fieldset> </form>
    <p id="demo"></p>
    <script type="text/javascript" src="Q4.js"></script>

我在其中声明了一个提交表单的按钮。我在提交按钮上添加了一个事件，以运行功能testing()。我希望当用户单击提交按钮时，页面将提示“好”。但是，一旦我加载页面，就已经出现了“良好”，而无需单击按钮。 result page

为什么会这样？

Answer 1

更改此行：

document.getElementById("sub").addEventListener("click", testing());

到

document.getElementById("sub").addEventListener("click", testing);

Answer 2

您应该删除括号以防止执行函数testing()。只需输入函数名称即可。

您可以找到更多详细信息和简单的example of listener here。

这是一个有效的代码段：

/*file javaScript Q4.js*/
document.getElementById("sub").addEventListener("click", testing);
function testing() {
document.getElementById("demo").innerHTML ="good"; }

<input type="submit" value="Place Order" id="sub"/>
</fieldset> </form>
<p id="demo"></p>
<script type="text/javascript" src="Q4.js"></script>

您还可以将函数直接放入监听器中，如下所示：

document.getElementById("sub").addEventListener("click", function() {
    document.getElementById("demo").innerHTML="good"; 
});

关于“仅显示good单词一秒钟的错误”： 单击该按钮将导致提交表单，这意味着页面将重新加载或正在加载URL。这意味着所有 JavaScript在当前页面加载中所做的临时更改是没了。谢谢Felix Kling

Answer 3

addEventListener函数接受两个参数

事件名称
回调函数
选项（可选）

因此，尽管在此处传递了函数引用，但您还是调用了函数。

写成下面的样子

<style>
@import '../style.scss';
</style>

OR

document.getElementById("sub").addEventListener("click", testing);

Answer 4

您不需要括号。

document.getElementById("sub").addEventListener("click", testing);

addEventListener函数在开始时就起作用，而不会被触发

4 个答案: