Question

我想在单击按钮时触发一些JavaScript代码。我希望在单击按钮时触发console.log（）。我的尝试：

corel.html：

<!DOCTYPE html>
<html>
<head>
    <title>Corelation</title>
    <script src="jquery-1.11.3.min.js"></script>        
    <script type="text/javascript" src="corel.js"></script>
</head>
<body>

<form id="tableVar">
  Variable 1: <input type="text" id="var1"><br>
  Variable 2: <input type="text" id="var2"><br>
  <button onclick="myFunction()">Click me</button>  <!-- type is button to not refresh -->
</form>

</body>
</html>

corel.js：

console.log("iniating app ...");
function myFunction() {
    console.log('yeah');
}

我不明白什么不起作用？

Answer 1

按钮正在提交表单，因此您需要使用preventDefault（）

See this demo

使用此代码，

<强> HTML

<!DOCTYPE html>
<html>
<head>
    <title>Corelation</title>
    <script src="jquery-1.11.3.min.js"></script>        
    <script type="text/javascript" src="corel.js"></script>
</head>
<body>

<form id="tableVar">
    Variable 1: <input type="text" id="var1"><br>
    Variable 2: <input type="text" id="var2"><br>
    <button onclick="myFunction(event)">Click me</button>  <!-- type is button to not refresh -->
</form>

</body>
</html>

<强> Corel.js

console.log("iniating app ...");
function myFunction(event) {
    console.log('yeah');
    event.preventDefault();
}

Answer 2

单击该按钮可刷新页面。如果你打开控制台并选择保留日志，你会看到它有效。

如果你不想刷新，那么你需要像这样添加一个函数返回：

function myFunction() {
    console.log('yeah');
    return false;
}

在您的html上，按钮代码应如下所示：

<button onclick="return myFunction()">Click me</button>

参考： prevent refresh of page when button inside form clicked

Answer 3

另请尝试：

<button onclick="return myFunction()">Click me</button>

function myFunction() {
    console.log('yeah');
    return false
}

点击后触发javascript操作？

3 个答案: