मेरे पास 'चेक' नामक एक बटन है जो प्रारंभ में बूटस्ट्रैप के 'बीटीएन बीटीएन-प्राथमिक बीटीएन-एलजी' वर्ग नाम का उपयोग करता है। यदि दिखाए गए फ़ंक्शन की स्थिति सत्य है, तो मैं बटन की कक्षा को 'बीटीएन बीटीएन-सफलता' में बदलना चाहता हूं, और यदि शर्त पूरी नहीं होती है, तो कक्षा को 'बीटीएन बीटीएन-खतरे' में बदलें। मेरे पास पृष्ठ पर एक से अधिक बटन हैं जिनमें 'बीटीएन बीटीएन-प्राथमिक बीटीएन-एलजी' नामक एक ही कक्षा है, इसलिए मैं इसे कक्षा के प्रकार से नहीं चुन सकता, मुझे लगता है कि इसे बटन आईडी का उपयोग करना होगा। मेरे पास जो है वह काम नहीं कर रहा है, मुझे त्रुटि मिल रही है, "अनकॉटेड 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>
0
Hiebs915 8 पद 2020, 00:06

2 जवाब

सबसे बढ़िया उत्तर

String contains an invalid character के साथ आपको त्रुटि मिलने का कारण यह है कि आपके button.classList.remove कॉल के अंदर स्पेस था। आपको उन्हें अलग कॉल में विभाजित करने की आवश्यकता है। आपको btn को हटाने और फिर से जोड़ने की भी आवश्यकता नहीं है।

स्पष्टता के लिए मैंने अन्य जेएस कोड छोड़ा। नीचे दिया गया कोड हमेशा 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>
1
Dominik 8 पद 2020, 01:27

अगर आपको बटन के वर्ग को बदलने के लिए मदद की ज़रूरत है, तो मैं कुछ इस तरह की कोशिश करूंगा-

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>
0
Dominik 8 पद 2020, 00:16