我如何在我自己的在線測驗中將這個 JS 代碼重用於其他問題？對象？構架？

Question

如何在不復制和更改變量名稱的情況下重用我的 js 代碼？ 我想添加更多問題但重復使用相同的代碼？ 這是一個簡單的網絡測試/測驗。

當前代碼CurrentUI

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM STUFF</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="counter-display">Total:</h1>

    <div id="questionBox">
      <p id="question">Q1: What is My favorite Food?</p>
      <p>
        <input type="radio" name="answer" value="Chicken" /> Chicken
        <input type="radio" name="answer" value="Pork" /> Pork
        <input type="radio" name="answer" value="Seafood" /> Seafood
        <input type="radio" name="answer" value="Junkfood" /> Junfoods
        <input type="radio" name="answer" value="Vegetables" /> Vegetables
      </p>
      <p>
        <button id="Submit">Submit</button>
      </p>
    </div>

    <script src="dom.js"></script>
  </body>
</html>

JS

let Submit = document.getElementById('Submit');
let counterDisplayElem = document.getElementById('counter-display');
let question = document.getElementById('question');
let correctAns = 'Pork';
let total = '0';


//submit q1 on click, calling scoreQuestion 
Submit.addEventListener('click', () => {
    scoreQuestion();
});

//score q1
function scoreQuestion(params) {
    let answerArray = document.getElementsByName('answer');
    answerArray.forEach((answer) => {
        if (answer.checked) {
            if(answer.checked && answer.value ==correctAns){
                total++
                counterDisplayElem.innerHTML += total;
                Submit.style.display = 'none'; //hide submit on correct entry
            } else {
                alert("Incorrect");
                question.innerHTML += " Epic Fail";
            }
        }
    })
}

嘗試的解決方案我的目標解決方案用戶界面

當我嘗試添加更多問題時，我還必須添加更多導入和變量。 是否有我遺漏的想法，或者這只是網絡開發的方式？


let question1 = document.getElementById('question1');
let question2 = document.getElementById('question2');
let question3 = document.getElementById('question3');
let Submit1 = document.getElementById('Submit1');
let Submit2 = document.getElementById('Submit2');
let Submit3 = document.getElementById('Submit3');


//submit q1 
Submit1.addEventListener('click', () => {
    scoreQuestion();
});
//score q1
function scoreQuestion1(params) {}



//submit q2
Submit2.addEventListener('click', () => {
    scoreQuestion3();
});
//score q2
function scoreQuestion2(params) {}



//submit q3 
Submit3.addEventListener('click', () => {
    scoreQuestion3();
});
//score q3
function scoreQuestion3(params) {}




HTML

 <div id="questionBox1">
      <p id="question1">Q1: What is My favorite Food?</p>
      <p>
        <input type="radio" name="answer1" value="Chicken" /> Chicken
        <input type="radio" name="answer1" value="Pork" /> Pork
        <input type="radio" name="answer1" value="Seafood" /> Seafood
        <input type="radio" name="answer1" value="Junkfood" /> Junfoods
        <input type="radio" name="answer1" value="Vegetables" /> Vegetables
      </p>
      <p>
        <button id="Submit1">Submit</button>
      </p>
    </div>

    <div id="questionBox2">
      <p id="question2">Q1: What is My favorite ETC?</p>
      <p>
        <input type="radio" name="answer2" value="Chicken" /> Chicken
        <input type="radio" name="answer2" value="Pork" /> Pork
        <input type="radio" name="answer2" value="Seafood" /> Seafood
        <input type="radio" name="answer2" value="Junkfood" /> Junfoods
        <input type="radio" name="answer2" value="Vegetables" /> Vegetables
      </p>
      <p>
        <button id="Submit2">Submit</button>
      </p>
    </div>

    <div id="questionBox3">
      <p id="question3">Q1: What is My favorite ETC?</p>
      <p>
        <input type="radio" name="answer3" value="Chicken" /> Chicken
        <input type="radio" name="answer3" value="Pork" /> Pork
        <input type="radio" name="answer3" value="Seafood" /> Seafood
        <input type="radio" name="answer3" value="Junkfood" /> Junfoods
        <input type="radio" name="answer3" value="Vegetables" /> Vegetables
      </p>
      <p>
        <button id="Submit3">Submit</button>
      </p>
    </div>

只是重寫代碼並更改變量問題框1 2 和 3 並回答1 2 和 3 並提交1 2 和 3 感覺錯誤和惡心，我相信有一種更簡單、更容易的方法來做到這一點。 讓我覺得很臟哈哈。

任何輸入表示贊賞。

乙

Answer 1

這是您的函數通過循環的一個簡單用例。 我把它放在點擊處理程序本身中，以便更容易地訪問元素。 如果您單獨需要此功能，則必須通過參數傳遞元素。

在這里，我將id更改為class ，並在無線電元素上添加了一個數據集以標記正確答案。 如果您需要隱藏它們，您可以在 HTML 元素序列中添加一個包含響應的數組，並注意 js 函數中正確 [index]的數據集。

 let counterDisplayElem = document.getElementById('counter-display'); let total = 0; const questionList = document.querySelectorAll('.questionBox'); questionList.forEach(function(item) { const btnSubmit = item.querySelector('.submit'); const question = item.querySelector('.question'); btnSubmit.addEventListener('click', function() { let answerArray = document.getElementsByName('answer'); answerArray.forEach((answer) => { if (answer.checked) { if(answer.checked && answer.dataset.correct === 'true'){ total++; counterDisplayElem.innerHTML = 'Total: ' + total; btnSubmit.style.display = 'none'; } else { alert("Incorrect"); question.innerHTML += " Epic Fail"; } } }); }); });

 <h1 id="counter-display">Total:</h1> <div class="questionBox"> <p class="question">Q1: What is My favorite Food?</p> <p> <input type="radio" name="answer" value="Chicken" /> Chicken <input type="radio" name="answer" value="Pork" data-correct="true" /> Pork <input type="radio" name="answer" value="Seafood" /> Seafood <input type="radio" name="answer" value="Junkfood" /> Junfoods <input type="radio" name="answer" value="Vegetables" /> Vegetables </p> <p> <button class="submit">Submit</button> </p> </div> <div class="questionBox"> <p class="question">Q2: What is My favorite Food?</p> <p> <input type="radio" name="answer" value="Chicken" data-correct="true" /> Chicken <input type="radio" name="answer" value="Pork" /> Pork <input type="radio" name="answer" value="Seafood" /> Seafood <input type="radio" name="answer" value="Junkfood" /> Junfoods <input type="radio" name="answer" value="Vegetables" /> Vegetables </p> <p> <button class="submit">Submit</button> </p> </div> <div class="questionBox"> <p class="question">Q3: What is My favorite Food?</p> <p> <input type="radio" name="answer" value="Chicken" /> Chicken <input type="radio" name="answer" value="Pork" /> Pork <input type="radio" name="answer" value="Seafood" /> Seafood <input type="radio" name="answer" value="Junkfood" /> Junfoods <input type="radio" name="answer" value="Vegetables" data-correct="true" /> Vegetables </p> <p> <button class="submit">Submit</button> </p> </div>

Answer 2

是的，復制粘貼編輯是錯誤的。 此代碼不縮放。 理想情況下，問題的 html 是使用 Javascript 從一系列問題對象創建的。 設計“問題”對象和數組將大大簡化將數據傳遞到 html 構造、事件處理和保持最新問題集的過程。

所有問題 html 都是相同的，因此編寫一個函數來創建 html，並傳入一個問題對象。
所有提交按鈕同樣相似，因此也有一個單一的功能來構建它。
要添加問題，您應該能夠將其添加到問題數組中。 刪除或更改問題也是如此。
僅使用一個事件處理程序。 由於所有問題的處理方式相同，並且它們都加到相同的總數中。

不需要特定的框架來做到這一點。

創建具有所需屬性的 Question 對象數組：“id”、“question”、“name”、“correctAnswer”。 也許“你的答案”也是。
事件處理函數； 將該問題的所有細節作為參數傳遞給事件處理程序調用。 將所有這些作為問題對象傳遞可能會使引用更容易。
不要將按鈕稱為“提交”，因為“提交”在 html/javascript 數據條目中具有特定的、眾所周知的、慣用的含義。 這意味着傳遞/處理整個表單，並且有一個特殊的內置按鈕類型。

Answer 3

使用event.target檢測選擇的元素，然后單擊輸入/或使用 JQuery ：

const Submit = $('#Submit');
const counterDisplayElem  = $('#counter-display');
Submit.change(function() {
if(this.checked && this.value == correctAns) {
    scoreQuestion(this.value)
} else {
            alert("Incorrect");
            question.innerHTML += " Epic Fail";
        }
});

function scoreQuestion(params) {
            total++
            alert('Correct->'+params);
            counterDisplayElem.innerHTML += total;
            Submit.style.display = 'none';
}

Answer 4

你需要這樣的東西。 這遠非理想的代碼，它更像是如何實現可重用性和避免重復的示例，但是在掌握了一些想法之后，您可以深入了解細節和可能性。 https://jsfiddle.net/8rhjL4gw/59/

 <div id="questions"> </div> <script> const list = document.getElementById('questions'); const data =[{ question: 'My favourite food is?', answers: ['chicken', 'pork'] }, { question: 'My favourite dring is?', answers: ['water', 'juice', 'vodka'] }]; data.forEach((x,index)=> { const question = document.createElement('p'); question.innerText = x.question; list.appendChild(question); x.answers.forEach(answer => { const radioInput = document.createElement('input'); radioInput.setAttribute('type', 'radio'); radioInput.setAttribute('name', 'answer'+index); radioInput.setAttribute('value', answer); radioInput.innerText = answer; list.appendChild(radioInput); var lab = document.createElement("label"); lab.textContent =answer; list.appendChild(lab); }) }) </script>

我如何在我自己的在線測驗中將這個 JS 代碼重用於其他問題？對象？構架？

問題描述

4 個解決方案

解決方案1
0 2021-10-14 19:12:49

解決方案2
0 2021-10-14 19:25:34

解決方案3
0 2021-10-14 19:28:01

解決方案4
0 2021-10-14 19:46:46

我如何在我自己的在線測驗中將這個 JS 代碼重用於其他問題？ 對象？ 構架？

問題描述

4 個解決方案

解決方案1 0 2021-10-14 19:12:49

解決方案2 0 2021-10-14 19:25:34

解決方案3 0 2021-10-14 19:28:01

解決方案4 0 2021-10-14 19:46:46

我如何在我自己的在線測驗中將這個 JS 代碼重用於其他問題？對象？構架？

解決方案1
0 2021-10-14 19:12:49

解決方案2
0 2021-10-14 19:25:34

解決方案3
0 2021-10-14 19:28:01

解決方案4
0 2021-10-14 19:46:46