[英]Why isn't my onclick function activating when I press the button?
我想从Java转换为Javascript,以扩展自己的编程能力,虽然不确定为什么,但是我很难调整。 例如,我什至不知道为什么我不能运行Javascript函数,没关系以我想要的方式实际工作。
我觉得我可能没有正确地将JS连接到我的HTML文档,但是我在script标签中包含了正确的文件名,并且这两个文件位于同一文件夹中,所以为什么竟然不调用JS函数呢? ?
的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>To-do Webapp</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!--<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">-->
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/styling.css">
</head>
<!-- scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="script.js"></script>
<body>
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 15%">
<h2>To-do Webapp</h4>
<p>Enter your task into the box below.</p>
</div>
</div>
<form>
<div class="row">
<div class="ten columns">
<input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task"/>
</div>
<div class="two columns">
<!-- <input class="button" onclick="addTask()" value="Add task"> -->
<button onclick="addTask()">Button element</button>
</div>
</div>
</form>
</body>
JS
function addTask() {
"use strict";
/*global document: false */
document.alert("hello");
}
它是window.alert("hello");
,而不是document.alert("hello");
并且不建议使用内联脚本,请改用addEventListener
堆栈片段
document.addEventListener("DOMContentLoaded", function(event) { document.querySelector('button').addEventListener('click', addTask); }); function addTask() { "use strict"; /*global document: false */ window.alert("hello"); }
<div class="container"> <div class="row"> <div class="one-half column" style="margin-top: 15%"> <h2>To-do Webapp</h4> <p>Enter your task into the box below.</p> </div> </div> <form> <div class="row"> <div class="ten columns"> <input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task" /> </div> <div class="two columns"> <!-- <input class="button" onclick="addTask()" value="Add task"> --> <button>Button element</button> </div> </div> </form> </div>
请注意,如上面的代码示例所示,或者在body
末尾的脚本中(如以下示例所示),在加载DOM之后需要调用添加事件侦听器的行。
<div class="container"> <div class="row"> <div class="one-half column" style="margin-top: 15%"> <h2>To-do Webapp</h4> <p>Enter your task into the box below.</p> </div> </div> <form> <div class="row"> <div class="ten columns"> <input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task" /> </div> <div class="two columns"> <!-- <input class="button" onclick="addTask()" value="Add task"> --> <button>Button element</button> </div> </div> </form> </div> <script> document.querySelector('button').addEventListener('click', addTask); function addTask() { "use strict"; /*global document: false */ window.alert("hello"); } </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.