Javascript創建一個帶有“文本框”的測驗

我正在嘗試創建一個調查問卷，但不是使用“單選按鈕”，而是希望用戶能夠在“文本框”中寫下每個問題的答案，但我不知道該怎么做。請你幫助我好嗎 ？

在我的控制臺中，我有以下錯誤： Quiz.js:33 Uncaught TypeError: nextButton 。addEventListener 不是測驗 (Quiz. js:33) 中測驗的函式。js:100

const questions = [
  { 
    question: 'What platform are you on?',
    answers: 'Stackoverflow',
    points: 5
  },
  { 
    question: '40   2?',
    answers: 42,
    points: 1
  },
  { 
    question: 'How much is 7*6',
    answers: 42,
    points: 1
  }
];

// a simple generator that is used in the questionaire
function *questionsGenerator( questions ) {
  yield* questions;
}

// creates a questionaire, with forward only options (due to the use of the generator function)
// all variables are locally scoped, when all questions were answered, the onCompleted callback would be called
// it returns an object with nextQuestion function though it could call nextButton internally, and you just have to call the function once if you would want to change it
const questionaire = ( query, nextButton, target, onCompleted ) => {
  let score = 0;
  let iterator = questionsGenerator( query );
  let question = null;
  let selectedAnswer = -1;
  
  nextButton.addEventListener('click', nextQuestion);
  
  function evaluateAnswer() {
    if (!question) {
      // no question yet
      return;
    }
    if (selectedAnswer < 0) {
      return;
    }
    if (question.correct === selectedAnswer) {
      score  = question.points;
    }
    return;
  }
  
  function nextQuestion() {
    evaluateAnswer();
    question = iterator.next();
    // this is a bit of a hack to check if we just had the last question or not
    if (question.done) {
      nextButton.removeEventListener('click', nextQuestion);
      onCompleted( score );
      return;
    }
    question = question.value;
    drawUI();
  }
  
  function drawUI() {
    // disable next button
    nextButton.setAttribute('disabled', true);
    selectedAnswer = -1;
    // remove existing items
    Array.from( target.childNodes ).forEach( child => target.removeChild( child ) );
    // create new questions (if available)
    const title = document.createElement('h1');
    title.innerHTML = question.question;
    target.appendChild( title );
    
    question.answers.map( (answer, i) => {
      const el = document.createElement('input');
      el.type = 'text';
      el.name = 'answer';
      el.value = i;
      el.id = 'answer'   i;
      el.addEventListener('change', () => { 
        selectedAnswer = i; 
        nextButton.removeAttribute('disabled'); 
      } );
      const label = document.createElement('label');
      label.setAttribute('for', el.id );
      label.innerHTML = answer;
      
      const container = document.createElement('div');
      container.appendChild(el);
      container.appendChild(label);
      return container;      
    } ).forEach( a => target.appendChild( a ) );
  }
  
  return {
    nextQuestion
  }
};

// create a questionaire and start the first question
questionaire(
  questions, 
  document.querySelector('input'[id="text"]).value,
  document.querySelector('#btnNext'), 
  document.querySelector('#questionaire'), 
  score => alert('You scored '   score ) 
).nextQuestion();

<h1>questionnaire</h1>
<div id="questionaire"></div>
<input type="text" id="text"/>
<div class="toolstrip">
  <button id="btnNext" type="button">Next</button>
</div>

uj5u.com熱心網友回復：

只需添加一個輸入，type="text"然后使用document.querySelector(...).value

uj5u.com熱心網友回復：

您的questionaire函式有 4 個輸入，( query, nextButton, target, onCompleted )但您呼叫的函式更多。具體來說，第二個輸入 ( document.querySelector('input'[id="text"]).value) 是錯誤的，您應該將其洗掉。

questionaire(
  questions, 
  document.querySelector('input'[id="text"]).value,
  document.querySelector('#btnNext'), 
  document.querySelector('#questionaire'), 
  score => alert('You scored '   score ) 
)

除此之外，還請提供您的 HTML 代碼，以便我們可以重現該案例并查看還有什么問題。

標籤：javascript

上一篇：如何排除空格作為用戶輸入？

下一篇：按鈕在固定包裝內不起作用