>source

처음에는 Bootstrap의 'btn btn-primary btn-lg'클래스 이름을 사용하는 'check'라는 버튼이 있습니다. 표시된 함수의 조건이 참이면 버튼의 클래스를 'btn btn-success'로 변경하고 조건이 충족되지 않으면 클래스를 'btn btn-danger'로 변경합니다. 페이지에 'btn btn-primary btn-lg'라는 동일한 클래스가있는 버튼이 두 개 이상 있으므로 클래스 유형별로 선택할 수 없습니다. 버튼 ID를 사용해야한다고 가정합니다. 내가 가진 것이 작동하지 않습니다. "Uncaught DOMException : String contains an invalid character game_logic.js : 34"라는 오류가 발생합니다. 누구든지이 오류가 무엇을 의미하는지 알고 있습니까?

또한 조건에 따라 '확인'을 클릭 한 후 '확인'버튼에 '정답'또는 '오답'을 표시하고 싶습니다.

const newProblemBtn = document.querySelector('#start');
const checkBox = document.querySelector('#splash_screen_preference_check_box');
const randomFunc = [
    multiplication,
    division,
    addition,
    subtraction,
]
let mathProblem = document.querySelector('#math_problem').innerText
newProblemBtn.addEventListener('click', () => {
    let result = randomFunc[Math.floor(Math.random() * randomFunc.length)]();
    document.querySelector('#correct_answer').setAttribute('value', result);
});
document.querySelector('#result_check').addEventListener('click', () => {
    if (document.querySelector('#correct_answer').getAttribute('value') === document.querySelector('#user_input').value) {
        document.querySelector('#result_check').classList.remove('btn btn-primary btn-lg');
        document.querySelector('#result_check').classList.add('btn btn-success');
    } else {
        document.querySelector('#result_check').classList.remove('btn btn-primary btn-lg');
        document.querySelector('#result_check').classList.add('btn btn-danger');
    }
});
function multiplication() {
    let num1 = Math.floor(Math.random() * 13);
    let num2 = Math.floor(Math.random() * 13);
    let problemResult = num1 * num2;
    console.log(num1, '*', num2, '=', problemResult);
    document.getElementById('math_problem').innerHTML =
    (`${num1} x ${num2}`);
    return problemResult
}
function division() {
    let num1 = Math.floor(Math.random() * 13);
    let num2 = Math.floor(Math.random() * 12) + 1;
    let problemResult = (num1 * num2) / num2;
    console.log(num1 * num2, '/', num2, '=', problemResult);
    document.getElementById('math_problem').innerHTML =
    (`${num1 * num2} ÷ ${num2}`);
    return problemResult
}
function addition() {
    let num1 = Math.floor(Math.random() * 13);
    let num2 = Math.floor(Math.random() * 13);
    let problemResult = num1 + num2;
    console.log(num1,'+',num2,'=',problemResult);
    document.getElementById('math_problem').innerHTML =
    (`${num1} + ${num2}`);
    return problemResult
}
function subtraction() {
    let num1 = Math.floor(Math.random() * 13);
    let num2 = Math.floor(Math.random() * 13);
    let numList = [num1, num2];
    numList.sort(function (a, b) {
        return a - b
    });
    let problemResult = numList[1] - numList[0];
    console.log(numList[1], '-', numList[0], '=', problemResult);
    document.getElementById('math_problem').innerHTML =
    (`${numList[1]} - ${numList[0]}`);
    return problemResult
}

<div class="col text-center">
    <button id="start" type="button" class="btn btn-primary btn-lg">
        New Problem
    </button>
    <p id="math_problem"></p>
    <form action="">
        <input id="user_input" type="text" placeholder="Type your answer here">
        <input id="correct_answer" type="hidden">
    </form>
    <br>
    <button id="result_check" type="button" class="btn btn-primary btn-lg">Check</button>
    <script src={% static 'js/game_logic.js' %}></script>
</div>

  • 답변 # 1

    오류가 발생하는 이유 String contains an invalid character 내부에 공간이 있었기 때문입니다. button.classList.remove 전화. 이를 별도의 통화로 분할해야합니다. 또한 제거 할 필요가 없습니다. btn 다시 추가하십시오.

    명확성을 위해 다른 js 코드는 생략했습니다. 아래 코드는 항상 btn.danger 수업이지만 내가 희망하는 요점을 얻습니다.

    document.querySelector('#result_check').addEventListener('click', () => {
      const button = document.querySelector('#result_check');
      if (document.querySelector('#correct_answer').getAttribute('value') === document.querySelector('#user_input').value) {
        button.classList.remove('btn-primary'); // <-- split into two lines
        button.classList.remove('btn-lg'); // <-- split into two lines
        button.classList.add('btn-success');
        button.textContent = 'Correct';
      } else {
        button.classList.remove('btn-lg'); // <-- split into two lines
        button.classList.remove('btn-lg'); // <-- split into two lines
        button.classList.add('btn-danger');
        button.textContent = 'Incorrect';
      }
    });
    
    

    /* Just so this is more visible */
    .btn-success {
      background: green;
    }
    .btn-danger {
      background: red;
    }
    
    

    <div class="col text-center">
        <button id="start" type="button" class="btn btn-primary btn-lg">
            New Problem
        </button>
        <p id="math_problem"></p>
        <form action="">
            <input id="user_input" type="text" placeholder="Type your answer here">
            <input id="correct_answer" type="hidden">
        </form>
        <br>
        <button id="result_check" type="button" class="btn btn-primary btn-lg">Check</button>
    </div>
    
    

  • 답변 # 2

    도움이 필요한 것이 버튼의 클래스를 변경하는 방법뿐이라면 다음과 같이 시도해 보겠습니다.

    var button = document.getElementById('changeClass');
    function changeButtonClass() {
      button.class = 'example class 1';
      alert(button.class);
    }
    // the alert is just for demonstration purposes.
    
    

    <button id='changeClass' class='example class' onclick='changeButtonClass()'>Example button</button>
    
    

    더 복잡하게 만들고 싶다면 클래스를 변경할 if 문과 다른 값을 추가하면됩니다.

관련 자료

  • 이전 javascript - Nodejs 서버를 내려 놓지 않고 스트림을 중지하는 방법
  • 다음 kaldi - 파일 읽기/쓰기에서 이상한 awk 출력