How to change button class on click?

Question

I have a button called 'check' that initially uses Bootstrap's 'btn btn-primary btn-lg' class name. If the condition of the function shown is true I'd like the button's class to change to 'btn btn-success', and if the condition is not met, change the class to 'btn btn-danger'. I have more than one button on the page that has the same class called 'btn btn-primary btn-lg' so I can't select it by class type, I'm assuming it will have to use the button id. What I have is not working, I am getting the error, "Uncaught DOMException: String contains an invalid character game_logic.js:34". Anyone know what this error is referring to?

I would also like the 'check' button to say 'correct' or 'incorrect' after clicking 'check' depending on the condition.

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>

Answer 1

The reason you're getting an error with String contains an invalid character is because you had spaces inside your button.classList.remove calls. You need to split those into separate calls. You also don't need to remove btn and then add it again.

For clarity I left out the other js code. The code below will always add the btn.danger class but it gets the point across I hope.

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>

Answer 2

If all you need help with is how to change the class of the button, I would try something like this-

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 you want to make it more complex, then just add some if statements and different values to change the class to.