单击时如何更改按钮类？

Posted 2023-05-09

【中文标题】单击时如何更改按钮类？

【英文标题】：How to change button class on click?

【发布时间】：2021-03-19 05:05:02

【问题描述】：

我有一个名为“check”的按钮，它最初使用 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>

【问题讨论】：

错误本身看起来是指第 34 行的语法错误，特别是无效字符。第 34 行实际上可能包含也可能不包含该无效字符，请检查它之前的一行或多行，看看那里是否存在可能导致该字符稍后无效的语法错误。至于你的按钮，如果你想在多个类上重用相同的逻辑，你可以在按钮类上做一个事件监听器，并在事件监听器中运行一些逻辑。这可能会帮助***.com/a/19655662/1174822

【参考方案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>

【讨论】：

我永远不会猜到它会抱怨 Bootstrap 类中的间隔...我尝试了你的代码，它改变了类！谢谢。你知道如何根据答案是对还是错将“检查”一词更改为“正确”或“不正确”吗？

当再次单击“新问题”时，我们是否有可能将其重置为默认的“btn btn-primary btn-lg”？对了，再次点击“新问题”后它会保持绿色或红色。

我的意思是是的，但在这一点上你应该可以自己做，不是吗？如果您觉得这对您有帮助，请将其标记为答案

我大概能弄明白。感谢您的帮助！

【参考方案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 语句和不同的值来更改类。

【讨论】：

@Dominik 我重新安排了我的功能，我可以让控制台打印出我想要的新类，但按钮在我点击后没有改变。

什么没有改变？上课？

@Dominik 按钮的颜色没有改变。按钮类以“btn btn-primary btn-lg”开始。调用 onclick 函数后，类更改为“btn btn-success”，但按钮不改变颜色或显示“成功”。

顺便说一句，我不是回答的人，我只是编辑了答案:)

@Dominik 我的错！