다른 매개 변수를 사용하여 동일한 메소드를 만드는 방법은 HTML의 다른 입력을 사용합니까?

프랑스어 연습을위한 웹 사이트를 만드는 코드를 작성하고있었습니다. 내 대답을 확인하는 방법을 만들었지 만 두 번째 질문에는 효과가 없습니다. 내 HTML과 자바 스크립트는 다음과 같습니다 :다른 매개 변수를 사용하여 동일한 메소드를 만드는 방법은 HTML의 다른 입력을 사용합니까?

HTML :

<!DOCTYPE html> 
<html> 
    <head> 
     <script src = "Contest.js"></script> 
     <title>Verb Practice</title> 
    </head> 

    <body> 
     <input type = "button" onclick = "location.href = 'file:///C:/Users/aryan/Desktop/HTML,%20JavaScript,%20&%20CSS/Contest.html#vocab';" value = "Back To Main" /> 
     <center> 
      <h2>Verb Practice</h2> 
      <fieldset> 
       <p>What is the infinitive for the verb underlined?</p> 
       <p>J'<ins>ache&#768;te</ins> une pizza.</p> 
       <input type = "text" name = "Q1" value = "" id = "ansGiven"><br> 
       <input type = "submit" value = "Answer" id = "Q1" onclick = "getAns('acheter')"> 
       <p id = "ansRes"></p> 
      </fieldset> 

      <fieldset> 
       <p>What does the verb <i>attendre</i> mean?</p> 
       <input type = "text" name = "Q2" value = "" id = "ansGiven"><br> 
       <input type = "submit" value = "Answer" id = "Q2" onclick = "getAns('to wait')"> 
       <p id = "ansRes"></p> 
      </fieldset> 
     </center> 
    </body> 
</html>

자바 스크립트 :

function getAns(ans) { 
    var ansGiven = document.getElementById("ansGiven").value; 
    console.log(ans); 
    console.log(ansGiven); 

    if (ansGiven === ans) { 
     document.getElementById("ansRes").innerHTML = "Correct!"; 
    } else { 
     document.getElementById("ansRes").innerHTML = "Try Again."; 
    } 

    ansGiven = ""; 
}

이론적, 방법의 getAns()가 주어진 질문에 대한 입력이 올바른 또는 잘못된 여부를 말해야한다. 대신, 첫 번째 질문은 정상적으로 작동하지만 두 번째 질문은 입력을 아무 것도 표시하지 않습니다. 왜 이런 일이 일어나고 코드가 잘못 되었습니까? w3schools에서

출처

2017-12-30 Aryan Indarapu

셀라 PARCE 가야 있니 avez dupliqué 레 ID를. – JasonB

의 ID는 페이지 내에서 고유해야합니다. 그러나 지정된 ID가 둘 이상의 요소가있는 경우 getElementById() 메서드 은 소스 코드의 첫 번째 요소를 반환합니다.

당신은 너무 당신의 여러 ansGiven 및 ansRes을 구분해야한다는 고정하려면 (예. ansGiven1, ansGiven2, ...). 이렇게하면 더 복잡한 코드로 이어지고 잠시 생각해야 할 것입니다. click event target을 사용하여 어떤 요소가 클릭되었는지 확인할 수도 있습니다.

출처

2017-12-30 21:33:39 hawi

일부 DOM 요소에 대해 고유하지 않은 ID가 있고 document.getElementById() 함수가 주어진 ID로 첫 번째 요소를 반환하기 때문에 이러한 현상이 발생합니다.

ansGiven 및 ansRes은 각각 두 번 사용됩니다. DOM의

<fieldset> 
    <p>What is the infinitive for the verb underlined?</p> 
    <p>J'<ins>ache&#768;te</ins> une pizza.</p> 
    <input type="text" name="Q1" value="" id="ansGiven-1"><br> 
    <input type="submit" value="Answer" id="Q1" onclick="getAns('acheter', 1)"> 
    <p id="ansRes-1"></p> 
</fieldset> 

function getAns(ans, answerNumber) { 
    var ansGiven = document.getElementById("ansGiven-" + answerNumber).value; 

    if (ansGiven === ans) { 
    document.getElementById("ansRes-" + answerNumber).innerHTML = "Correct!"; 
    } else { 
    document.getElementById("ansRes-" + answerNumber).innerHTML = "Try Again."; 
    } 

    ansGiven = ""; 
}

출처

2017-12-30 21:35:19

"ID"대신 인수로 질문의 수를 받아들이는 등

당신은 함수 서명을 변경할 수 있습니다 ansGiven-1, ansGiven-2, 등을 ansRes-1, ansRes-2 같은 고유 ID를 사용 요소는 고유해야합니다. 입력 내용의 ID가 "ansGiven"이고 결과 문단이 "ansRes"입니다. 우선, 그것들을 독특하게 만들어야합니다. 절대 안돼 가장 좋은 방법,하지만 당신은 당신이 연습을하고 말했다 있기 때문에, 아래의 코드를 탄 제공 :

<!DOCTYPE html> 
<html> 
    <head> 
     <script src = "Contest.js"></script> 
     <title>Verb Practice</title> 
    </head> 

    <body> 
     <input type = "button" onclick = "location.href = 'file:///C:/Users/aryan/Desktop/HTML,%20JavaScript,%20&%20CSS/Contest.html#vocab';" value = "Back To Main" /> 
     <center> 
      <h2>Verb Practice</h2> 
      <fieldset> 
       <p>What is the infinitive for the verb underlined?</p> 
       <p>J'<ins>ache&#768;te</ins> une pizza.</p> 
       <input type = "text" name = "Q1" value = "" id = "ansGiven1"><br> 
       <input type = "submit" value = "Answer" id = "Q1" onclick = "getAns('acheter', 1)"> 
       <p id = "ansRes1"></p> 
      </fieldset> 

      <fieldset> 
       <p>What does the verb <i>attendre</i> mean?</p> 
       <input type = "text" name = "Q2" value = "" id = "ansGiven2"><br> 
       <input type = "submit" value = "Answer" id = "Q2" onclick = "getAns('to wait', 2)"> 
       <p id = "ansRes2"></p> 
      </fieldset> 
     </center> 
    </body> 
</html>

자바 스크립트

function getAns(ans, questionIndex) { 
    var ansGiven = document.getElementById("ansGiven" + questionIndex).value; 
    console.log(ans); 
    console.log(ansGiven); 

    if (ansGiven === ans) { 
     document.getElementById("ansRes" + questionIndex).innerHTML = "Correct!"; 
    } else { 
     document.getElementById("ansRes" + questionIndex).innerHTML = "Try Again."; 
    } 

    ansGiven = ""; 
}

출처

2017-12-30 21:45:52 burkay

다른 매개 변수를 사용하여 동일한 메소드를 만드는 방법은 HTML의 다른 입력을 사용합니까?

답변

관련 문제