2017-12-01 7 views
0

私はHTMLページに配置したフォームのonSubmitイベントをテストし、実装しようとしています。送信ボタンをクリックすると、対応するJavaScript関数で定義されているように警告がポップアップします。ただし、クリックすると何も起こらず、ブラウザのWebコンソールに「ReferenceError:onSubmitQAが定義されていません」と出力されます。JS ReferenceErrorのHTMLフォームonSubmitイベント

以下

HTMLコードです:私は、問題は、JSファイルのパスのタイプミスだったかもしれないと思った

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

<!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ファイルの内容ただし、JSファイルがHTMLファイルと同じディレクトリに置かれていても、エラーは引き続き発生します。これに関するいくつかの助けに感謝します。ありがとう。

答えて

0

あなたがそうのようなウィンドウオブジェクトに機能を追加する必要があります。

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

あなたはおそらくかかわらず、やるべきことは次のとおりです。

<form id="myForm" ... 

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

あなたのindex.htmlファイルのように思えることはできません単にあなたのスクリプトを見つける。あなたはあなたのフォルダ構造を提供できますか? 「../」 - - それはあなたのindex.htmlをフォルダに配置されることを意味するので、構造はこのようなものでなければなりません - >

  • JS/script_quiz.js
  • CSSあなたは、このように設定している場合ので、 /subpage_styles.css
  • 画像/
  • 公共/ index.htmlを

だから、単にあなたのスクリプトファイルへのhtmlからのパスを確認してください。

+0

を使用して、HTMLと同じディレクトリにあるJSファイルでテストしましたが、エラーは引き続き発生します。 – Bgeo25

関連する問題