Javascript 脚本不适用于 html答案

【问题标题】：Javascript script doesn't work with htmlJavascript 脚本不适用于 html
【发布时间】：2017-09-15 21:12:50
【问题描述】：

我刚进入 Web 开发，并决定创建一个测试项目来看看事情是如何工作的。

我的html代码是：

<!DOCTYPE html>
<html>

<head>
    <title>
        title
    </title>
    <script type="text/javascript" src="jstest.js"></script>
</head>

<body>
    <h1>heading1</h1>
    <button onclick="runcode()">click me</button>
</body>



</html>

脚本是这样的：

function runcode(){
alert("clicked"); 
}

我不完全知道脚本为什么不起作用。我把它放在前面，以确保按钮首先加载，但它仍然不起作用

【问题讨论】：

您阅读控制台输出了吗？我的猜测是你的 jstest.js 路径是错误的。是在js文件夹里吗？
如果您将alert("clicked") 移到函数外，是否会提示“点击”？
是的。为什么该功能不起作用？
您可以尝试将按钮更改为其他内容。喜欢尝试<span onclick="runcode()">click me</span> 并让我们知道这是否有效
跨度也可以

标签： javascript html visual-studio-code

【解决方案1】：

在 cmets 之后，你能不能用这些小点来改变你的代码：

function runcode(event){
    event.preventDefault();
    alert("clicked"); 
}

<h1>heading1</h1>
<button onclick="runcode(event)">click me</button>

来自MDN Webdocs about the button type 他们说：

按钮的类型。可能的值是：提交：按钮将表单数据提交给服务器。这是默认值，如果属性未指定，或者如果属性是动态更改的为空值或无效值。

这意味着，您单击按钮，然后提交数据并根据设置刷新页面。这就是您看不到alert 的原因。警报发生在提交之后。现在event.preventDefault()

方法告诉用户代理，如果事件未处理，它的不应像往常一样采取默认操作。

因此，您可以阻止它执行默认操作。因为现在您希望您的功能正常工作，首先必须停止默认行为才能继续进行您想要的任何操作。在这种情况下提醒一些东西。

【讨论】：

嗯...我没想到这是问题所在。谢谢（你的）信息！这也是元素之间的常见问题吗？
@harambe 这只是提交或尝试关注<a>, <submit>, <button> 之类的链接的元素的问题。因此，如果您尝试使用具有 href="some-url" 的 <a> 标记进行相同操作，则会发生与使用 <button> 相同的情况