Question

我正在尝试测试然后为我放在HTML页面中的表单实现onSubmit事件。单击提交按钮时，将弹出相应JavaScript函数中定义的警报。但是，点击后没有任何反应，我的浏览器的Web控制台显示＆＃34; ReferenceError ：onSubmitQA未定义＆＃34;作为输出。

以下是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

好像你的index.html文件不能简单地找到你的脚本。你能提供你的文件夹结构吗？因为如果你这样设置 - “../” - 这意味着你的index.html被放在文件夹中，所以结构应该是这样的 - ＆gt;

JS / script_quiz.js
CSS / subpage_styles.css
图像/
公共/ index.html中

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

Answer 2

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

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

你应该做的是：

<form id="myForm" ...

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

使用JS ReferenceError

2 个答案: