javascript - 单击时触发 JavaScript 操作?

标签 javascript html dom-events

我想在单击按钮时触发一些 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');
}

我不明白什么不起作用?

最佳答案

该按钮正在使表单提交,因此您需要使用 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();
}

关于javascript - 单击时触发 JavaScript 操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30825001/

相关文章:

javascript - 如何 Hook 库函数(Golden Layout)并调用其他方法

html - 将字段集与骨架框架一起使用的问题

javascript - 如何执行 JavaScript 函数以使用不同的样式表?

javascript - onClick 在第一次点击时不起作用

javascript - 是否可以将 HTML 表单中填写的数据保存到本地存储在 PC 上的 xml 文件中并从中检索?

javascript - 最初 Conceal facebook 插件

javascript - Web 组件 : inheriting from DOM prototypes

javascript - 使用 JQuery 使用 css 属性定位某些 div/li

jquery - 使用 jQuery 清理 HTML?

javascript - 如何通过元素名称获取输入类型