잡동사니

Javascript에 대한 기본 퀴즈를 만들고 있지만 결과가 전혀 나오지 않습니다. 내 코드의 오류는 무엇이며 어떻게해야합니까?

카테고리 없음
2020. 8. 16. 19:48
반응형

질문

충족해야하는 세 가지 기준이 있습니다.

  • script는 정답의 수와퀴즈 하단에 정확한 백분율.
  • 모든 질문이 만족 스러우면 '잘 했어요'텍스트를 표시합니다.정답을 맞히거나 그렇지 않으면‘다시 시도하십시오.’
  • 페이지를 다시로드하기위한 '다시 시도'의 하이퍼 링크입니다.

첫 번째 질문의 시험에 대한 점수를 표시 할 수 없기 때문에 아직 두 번째 & 세 번째 기준에 도달하지 못했습니다.두 가지 다른 방법을 사용해 보았지만 switch 를 완전히 이해하지 못했기 때문에 올바르게 사용하고 있지 않은 것 같습니다.요소 검사도 시도했지만 오류가 표시되지 않습니다.저는 여전히 자바스크립트 (일반적으로 & 코딩)의 아마추어 학생이므로 지나치게 복잡하지 않은 간단한 & 솔루션을 고맙게 생각합니다.

감사!

<title>JS Quiz template</title>

</head>

<body>
 <div align="center">
    <h3>Quiz Trial</h3>
 </div>
 
What does RAM stand for?<br>
1. Random Arithmetic Maths<br>
2. Random Access Memory<br>
3. Regional Accounting Money<br>
Answer 1:
<input id="RAM" type="number" size="4"><br><br>
What does ADC stand for?<br>
1. Asynchronous DialUp Call<br>
2. Active Database Chip<br>
3. Analog to Digital Converter<br>
Answer 2:
<input id="ADC" type="number" size="4" ><br><br>
What does AGP stand for?<br>
1. Active Graphics Pointer<br>
2. Accelerated Graphics Port<br>
3. Analog Gateway Protocol<br>
Answer 3: 
<input id="AGP" type="number" size="4"><br><br>
What does Laser stand for?<br>
1. Light and sound emitting range <br>
2. Light Amplification by Stimulated Emission of Radiation.<br>
3. Lightening around lithosphere enchanted road <br>
Answer 4:
<input id="LAS" type="number" size="4"><br><br>
What does CPU stand for?<br>
1. Central Processing Unit<br>
2. Control Primary Unit<br>
3. Central Personal Unit<br>
Answer 5: 
<input id="CPU" type="number" size="4" ><br><br>
<button type="button" onClick="QuizFunction()">Test your answers</button>
<br>
<p id="pstyle">Number of correct answers</p>
 
<script>

function QuizFunction() {
    var ans1 = document.getElementById('RAM').value;
        ans2 = document.getElementById('ADC').value;
        ans3 = document.getElementById('AGP').value;
        ans4 = document.getElementById('LAS').value;
        ans5 = document.getElementById('CPU').value;
        score = 0

            function QuizFunction() {
                if(ans1= 2){var score=score++;
                            document.getElementById('pstyle').innerHTML(score+'/5');}
                else{document.getElementById('pstyle').innerHTML(score+'/5')}
            }
}

/**
function QuizFunction() 
        {
    var ans1 = document.getElementById('RAM').value;
        ans2 = document.getElementById('ADC').value;
        ans3 = document.getElementById('AGP').value;
        ans4 = document.getElementById('LAS').value;
        ans5 = document.getElementById('CPU').value;
        score = 0


            switch(ans1){
                case "2":
                     score=score+1
                default:
                     score=score
            }
            switch(ans2){
                case "3":
                     score=score+1
                default:
                     score=score
            }
            switch(ans3){
                case "3":
                     score=score+1
                default:
                     score=score
            }
            switch(ans4){
                case "2":
                     score=score+1
                default:
                     score=score
            }
            switch(ans5){
                case "1":
                     score=score+1
                default:
                     score=score
            }

    document.getElementById('pstyle').innerHTML(score+"/5"+"</br>"+(score/5)*100+"%")
        }
**/

</script>

</body>
Expand snippet


답변1

결과를 생성하는 QuizFunction 이 QuizFunction안에 중첩되어 있습니다. 중첩 된 함수에서 코드를 가져 와서 첫 번째 함수에 넣으십시오. 그런 다음 중첩 된 함수를 삭제합니다.

그러면 코드가 실행되지만 .innerHTML오류가 발생합니다. 그 뒤에 괄호를 넣고 함수 인 것처럼 인수를 전달하려고 시도하기 때문입니다. 뒤에 = 를 넣고 값을 할당해야합니다.

그 외에도 입력을 선택할 답변 수로 제한하지 않는 한 input type = number 를 사용하면 안됩니다. min및 최대속성. 실제로 가능한 각 답변에 대해 input type = "radio"를 사용하는 것이 사용하기에 가장 좋은 UI입니다.

<title>JS Quiz template</title>

</head>

<body>
 <div align="center">
    <h3>Quiz Trial</h3>
 </div>
 
What does RAM stand for?<br>
1. Random Arithmetic Maths<br>
2. Random Access Memory<br>
3. Regional Accounting Money<br>
Answer 1:
<input id="RAM" type="number" size="4" min="1" max="3"><br><br>
What does ADC stand for?<br>
1. Asynchronous DialUp Call<br>
2. Active Database Chip<br>
3. Analog to Digital Converter<br>
Answer 2:
<input id="ADC" type="number" size="4" min="1" max="3"><br><br>
What does AGP stand for?<br>
1. Active Graphics Pointer<br>
2. Accelerated Graphics Port<br>
3. Analog Gateway Protocol<br>
Answer 3: 
<input id="AGP" type="number" size="4" min="1" max="3"><br><br>
What does Laser stand for?<br>
1. Light and sound emitting range <br>
2. Light Amplification by Stimulated Emission of Radiation.<br>
3. Lightening around lithosphere enchanted road <br>
Answer 4:
<input id="LAS" type="number" size="4" min="1" max="3"><br><br>
What does CPU stand for?<br>
1. Central Processing Unit<br>
2. Control Primary Unit<br>
3. Central Personal Unit<br>
Answer 5: 
<input id="CPU" type="number" size="4" ><br><br>
<button type="button" onClick="QuizFunction()">Test your answers</button>
<br>
<p id="pstyle">Number of correct answers</p>
 
<script>

function QuizFunction() {
    var ans1 = document.getElementById('RAM').value;
        ans2 = document.getElementById('ADC').value;
        ans3 = document.getElementById('AGP').value;
        ans4 = document.getElementById('LAS').value;
        ans5 = document.getElementById('CPU').value;
        score = 0
                if(ans1= 2){var score=score++;
                  document.getElementById('pstyle').innerHTML = score+'/5';
                } else {
                  document.getElementById('pstyle').innerHTML  score+'/5';
                }
}

</script>

</body>
Expand snippet



답변2

코드의 문제는 QuizFunction 이라는 이름의 함수를 중첩했고 그 이후 .innerHTML 에 () <사용 실수를 저질렀다는 것입니다. / strong> 대신 사용되지 않는이 괄호 "="가 사용됩니다 ... 코드를 수정하고 수정할 수있는 부분에 주석을 달았습니다 ...

다음은 고정 코드입니다 ....

이것이 당신이하려는 일이되기를 바랍니다 ....

function QuizFunction() {
    var ans1 = document.getElementById('RAM').value;
    var ans2 = document.getElementById('ADC').value;
    var ans3 = document.getElementById('AGP').value;
    var ans4 = document.getElementById('LAS').value;
    var ans5 = document.getElementById('CPU').value;
    var score = 0

                if(ans1 == 2){
                score=score+1;// removed var from this because you have initialized it already
                }else if(ans2 == 3){
                score=score+1;          
                }else if(ans3 == 2){
                score=score+1;
                }else if(ans4 == 2){
                score=score+1;
                }else if(ans5 == 1){
                score=score+1;
                }
                 document.getElementById('pstyle').innerHTML = score+'/5'; //removed paranthesis and used "=" equal to for assigning
                
                
}

/**
function QuizFunction()
        {
    var ans1 = document.getElementById('RAM').value;
        ans2 = document.getElementById('ADC').value;
        ans3 = document.getElementById('AGP').value;
        ans4 = document.getElementById('LAS').value;
        ans5 = document.getElementById('CPU').value;
        score = 0


            switch(ans1){
                case "2":
                     score=score+1
                default:
                     score=score
            }
            switch(ans2){
                case "3":
                     score=score+1
                default:
                     score=score
            }
            switch(ans3){
                case "3":
                     score=score+1
                default:
                     score=score
            }
            switch(ans4){
                case "2":
                     score=score+1
                default:
                     score=score
            }
            switch(ans5){
                case "1":
                     score=score+1
                default:
                     score=score
            }

    document.getElementById('pstyle').innerHTML(score+"/5"+"</br>"+(score/5)*100+"%")
        }
**/
<html>
<head>
<title>JS Quiz template</title>

</head>

<body>
 <div align="center">
    <h3>Quiz Trial</h3>
 </div>
 
What does RAM stand for?<br>
1. Random Arithmetic Maths<br>
2. Random Access Memory<br>
3. Regional Accounting Money<br>
Answer 1:
<input id="RAM" type="number" size="4"><br><br>
What does ADC stand for?<br>
1. Asynchronous DialUp Call<br>
2. Active Database Chip<br>
3. Analog to Digital Converter<br>
Answer 2:
<input id="ADC" type="number" size="4" ><br><br>
What does AGP stand for?<br>
1. Active Graphics Pointer<br>
2. Accelerated Graphics Port<br>
3. Analog Gateway Protocol<br>
Answer 3: 
<input id="AGP" type="number" size="4"><br><br>
What does Laser stand for?<br>
1. Light and sound emitting range <br>
2. Light Amplification by Stimulated Emission of Radiation.<br>
3. Lightening around lithosphere enchanted road <br>
Answer 4:
<input id="LAS" type="number" size="4"><br><br>
What does CPU stand for?<br>
1. Central Processing Unit<br>
2. Control Primary Unit<br>
3. Central Personal Unit<br>
Answer 5: 
<input id="CPU" type="number" size="4" ><br><br>
<button type="button" onClick="QuizFunction()">Test your answers</button>
<br>
<p id="pstyle">Number of correct answers</p>
 




</body>
<html>
Expand snippet



 

 

 

 

출처 : https://stackoverflow.com/questions/62939422/im-making-a-basic-quiz-on-javascript-but-im-not-getting-any-results-at-all-w

반응형
저작자표시

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band
댓글

티스토리툴바