javascript - JavaScript 簡易送信が機能しない

Question

こんにちは、私は でいくつかの問題を抱えてjavascriptいます。あなたが私を助けてくれるかどうか疑問に思っていました。

これは私のHTMLコードです

<div class="Answer1"> 
    <form name="form">
        Enter your answer here :
        <input type="text" size="10" name="answer" value="">
        <input type="button" value="Check"  onclick="result();">
</form>
</div>

<!--2st sum -->
<div class="Answer2">
    <form name="form">
        Enter your answer here : 
        <input type="text" size="10" name="answer" value="">
        <input type="button" value="Check"  onclick="result2();">
    </form>
</div>

そしてこれは私のjavascript

function result() {
    var  score = (document.form.answer.value);
    if(score == 8) {
        document.location.href="CorrectAdditionAnswer.html"
} else {
        document.location.href="IncorrectAddition.html"
    }
}

function result2() {
    var  score = (document.form.answer.value);
    if(score == 8) {
        document.location.href="CorrectAdditionAnswer2.html"
    } else {
        document.location.href="IncorrectAddition.html"
    }
}

これらのいずれかをコメントアウトすると、完全に正常に機能しますが、コメントしないと機能しません:(何が間違っていたのかわかりません:(

Answer 1

attributeformに同じ値を持つ 2 つとに同じ値を持つ 2 つがあります。nameinputname

Answer 2

複数の要素に同じ ID を持たせるには、javascript を「gridlock」に入れます。通常、一意の ID 名で要素を識別すると、DOM / Javascript / jQuery がノード / 要素をより速く見つけやすくなります。

この形式は、すべての要素が同じページにある場合に適した方法です。

 <form name="form1">
    Enter your answer here :
    <input type="text" size="10" id="answer1" name="answer1" value="">

    <input type="button" value="Check" onclick="result1();">
    </form>

</div>

<!--2st sum -->
<div class="Answer2">

    <form name="form2">
    Enter your answer here : 
    <input type="text" size="10" id="answer2" name="answer2" value="">

    <input type="button" value="Check"  onclick="result2();">
    </form>

Answer 3

js

     function result()
{
    var  score =document.getElementsByName('answer1')[0].value;

    if(score == 8)
    {
      document.getElementsByName('form1')[0].action = "http://www.wordpress.com";
      document.getElementsByName('form1')[0].submit();
    }
    else
    {   
      document.getElementsByName('form1')[0].action = "http://www.bing.com";
      document.getElementsByName('form2')[0].submit();
    }
}

function result2()
{
    var  score = document.getElementsByName('answer2')[0].value;
    if(score == 8)
    {
        document.getElementsByName('form2')[0].action = "http://www.wordpress.com";
      document.getElementsByName('form2')[0].submit();
    }
    else
    {
        document.getElementsByName('form2')[0].action = "http://www.bing.com";
      document.getElementsByName('form2')[0].submit();
    }
}

html

<div>  
<form name="form1">

        Enter your answer here :
        <input type="text" size="10" name="answer1" value="">

        <input type="button" value="Check"  onclick=" result();">
        </form>

</div>

<!--2st sum -->
<div class="Answer2">

        <form name="form2">
        Enter your answer here : 
        <input type="text" size="10" name="answer2" value="">

        <input type="button" value="Check"  onclick="  result2();">
        </form>

</div>