7

私は簡単な JavaScript クイズに取り組んでいますが、location.href、open.window、または「_self」をターゲットに設定しました。私が何をするかは問題ではないようです...

function answer() {
  var response = document.getElementById('answer').value;
  if (response == "correctanswer")
    location.href('right.html');
  else
    location.href('wrong.html');
}
<form onSubmit="answer()" id="answer" target="_self">
  <input type="text" maxlength="55" class="box" autofocus />
  <input type="submit" class="submit" value="SUBMIT" />
</form>

したがって、ユーザーがフォームを送信すると、テキスト ボックスに正しい答えを入力した場合は「right.html」に移動し、それ以外を入力した場合は「wrong.html」に移動します。

何をしても、結果のページを で開くことができず_self、別のウィンドウで開くという事実を除いて、問題なく動作しています。毎回。

一晩中私を夢中にさせていました。

4

1 に答える 1

23

5 つのこと:

  1. targetの属性をform完全に削除します。デフォルトは同じウィンドウです。それは実際には問題ではありませんが、次の理由によります。

  2. 独自のコードでフォームを処理しているため、 にsubmit戻ってイベントをfalseキャンセルします。onSubmitこれを行う簡単な方法の 1 つは、関数を returnfalseにし、 でonSubmit呼び出しの結果を返すことです。

  3. この行は正しくありません:

    var response = document.getElementById('answer').value;

    form要素にはvalue. id代わりにinput type="text"要素にを配置する必要があります。

  4. hrefonは関数ではなく、locationプロパティです。それに割り当てるだけです（または直接割り当てるだけlocationです）。

  5. これは少し微妙です: というグローバル関数がanswerあり、 を持つ要素があるためid "answer"、競合があります: どちらも最終的にwindowオブジェクトのプロパティになりたがっています (古い DOM0 属性を使用しない多くの理由の 1 つonxyz— またはグローバル関数、それに来てください）。そのため、そのうちの 1 つの名前を変更する必要があります。たとえば、関数をcheckAnswerなどに変更します。

そう：

<form onSubmit="return checkAnswer();">
<input id="answer" type="text" maxlength="55" class="box" autofocus />
<input type="submit" class="submit" value="SUBMIT" />
</form>

と：

function checkAnswer(){
    var response = document.getElementById('answer').value;
    if (response == "correctanswer")
        location = 'right.html';
    else
        location = 'wrong.html';
    return false;
}

完全な例:ライブコピー| ライブソース

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <form onSubmit="return checkAnswer();">
  <input id="answer" type="text" maxlength="55" class="box" autofocus />
  <input type="submit" class="submit" value="SUBMIT" />
  </form>
  <script>
  function checkAnswer(){
      var response = document.getElementById('answer').value;
      if (response == "correctanswer")
          location = 'http://jsbin.com/ukifoh/1'; // 'right.html';
      else
          location = 'http://jsbin.com/ukifoh/2'; // 'wrong.html';
      return false;
  }
  </script>
</body>
</html>

常に一貫性のある有用なコード インデントを使用することをお勧めします。また、ステートメントだけでなく、制御構造を含むブロックを常に使用することも大好きです。

于 2013-06-09T06:23:25.047 に答える