JS - 한글야구 #6 (문제표시/답안제출)

<script>
        //처음 자음만 보이게 하기
        //분리된 자모음을 object로 저장
        const divideTxt = [];
        for(let i=0;i<ansText.length;i++){
            divideTxt.push(getConstantVowel(ansText[i]).f)
        }
        $inputText.append(`${divideTxt}`,document.createElement('br'))

        document.getElementById('hintBtn').addEventListener('click',showHint)
        
        //답안 제출
        $tryTxt.addEventListener('submit',(e)=>{
          //제출 횟수 세기
          ansCount += 1;
          if(ansCount >= 5){
              alert("패배하였습니다");
          }
            e.preventDefault();
            //.textContent가 아닌 .value를 써야함
            const tryAns = document.querySelector('#input').value;
          
               //제출한 답과 비교
               let correctTxt = 0;
                let wrongTxt = 0;

                for(let j=0;j<ansText.length;j++){
                    if(ansText[j]===tryAns[j]){
                        correctTxt += 1;
                    }else{
                        wrongTxt +=1;
                    }
                }
            if(tryAns === ansText){
            alert("정답입니다!")
            $output ='';
            }else{
                $output.append(`맞은 글자 ${correctTxt}, 틀린 글자 ${wrongTxt}`,
                document.createElement('br'))
               
            }
        })
</script>

1. 설명

앞에서 만들어진 자모음 분리 함수를 이용하여, 분리된 자모음 중 처음 자음만 각각 나타나게 한다. 답안을 제출할 땐 제출 횟수가 1씩 늘어나게 하고, 제출한 답과 비교하여 틀린 글자수와 맞은 글자수가 각각 나타나게 하였다.
참고로 const tryAns = document.querySelector('#input').value;과 같이, input 과 같은 form 요소의 값을 가져오고 싶으면 .value 를 쓰고, 그 외 div 나 span 등의 요소 안에 있는 텍스트를 읽고 싶으면 .textContent 를 사용한다. 알고는 있는데 정작 쓰다보면 까먹고 헷갈릴 때가 많다.