单击时触发 javascript 操作？

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

也试试：

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

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

Answer 3

点击按钮刷新页面。如果您打开控制台并 select 保留日志，您将看到它有效。

如果您不想刷新，那么您需要像这样向您的函数添加一个 return：

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

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

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

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

单击时触发 javascript 操作？

Trigger javascript action on click?

html

javascript

javascript-events