Question

HTML 表单 onSubmit 事件与 JS ReferenceError

2017-12-01

432

javascript html

我正在尝试测试并实现我已放置在 HTML 页面中的表单的 onSubmit 事件。单击提交按钮时，应弹出一个警报，如相应的 JavaScript 函数中定义的那样。但是，单击后什么也没有发生，我的浏览器的 Web 控制台显示“ ReferenceError ：onSubmitQA 未定义”作为输出。

以下是 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>Quiz Game</title>
    <link href="http://fonts.googleapis.com/css?family=Corben:bold" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Nobile" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/subpage_styles.css">
    <script src="../js/script_quiz.js"></script>
</head>
<body>
    <div class = "text">
    <a id="logo" href="../index.html"><img src = "../images/web_logo.png"></a>
    <h1>(Quiz Header)</h1>

    <h3>Question 1:</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/vabnZ9-ex7o" frameborder="0" allowfullscreen></iframe>
    <h4>Is the song in the video above:</h4>
    <form onsubmit="onSubmitQA(event.target)">
        <input type="radio" id="radio1_1" name="alternative" value = "pop">Pop<br>
        <input type="radio" id="radio1_2" name="alternative" value = "altenative">Rock<br>
        <input type="radio" id="radio1_3" name="alternative" value = "alternative">Alternative<br>
        <input type="radio" id="radio1_4" name="alternative" value = "hiphop">Hip Hop<br>
        <br>
        <input type="submit" id="submit1" value="Submit">
    </form>
    </div>
</body>

链接的 JS 文件的内容：

function onSubmitQA(e) {
    alert("Submitted");
}

我认为问题可能是 JS 文件路径中的拼写错误，但即使 JS 文件与 HTML 文件放在同一目录中，错误仍然会发生。如果能提供一些帮助，我们将不胜感激。谢谢。

Answer 1

您需要将函数添加到窗口对象，如下所示：

<script>
    window.onSubmitQA = onSubmitQA
</script>

但您可能应该做的是：

<form id="myForm" ...

<script>
    document.getElementById("myForm").addEventListener("submit", onSubmitQA)
</script>

Answer 2

似乎您的 index.html 文件无法简单地找到您的脚本。您能提供您的文件夹结构吗？因为如果您像这样设置 - “../” - 这意味着您的 index.html 放在文件夹中，所以结构应该是这样的 ->

js/script_quiz.js
css/subpage_styles.css
images/
public/index.html

所以只需检查从 html 到您的脚本文件的路径即可。