javascript - 单击时如何更改按钮类？

Question

我有一个名为“检查”的按钮，它最初使用 Bootstrap 的“btn btn-primary btn-lg”类名。如果显示的函数条件为真，我希望按钮的类更改为“btn btn-success”，如果不满足条件，请将类更改为“btn btn-danger”。我在页面上有多个按钮，它们具有名为“btn btn-primary btn-lg”的相同类，因此我无法按类类型选择它，我假设它必须使用按钮 ID。我所拥有的不起作用，我收到错误消息“未捕获的 DOMException：字符串包含无效字符 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>

标签： javascripthtmlbuttonbootstrap-4

Answer 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>