html 检查用户是否选择了正确的复选框

j5fpnvbx  于 2022-12-16  发布在  其他
关注(0)|答案(1)|浏览(116)

我正在做一个测试与javascript和我遇到了一个问题,从选择的复选框中获得答案。我已经得到了复选框的工作,使您只能选择一个答案。使用复选框的原因只是我试图使用单选框,我也没有得到它的工作方式。
当前我的表单如下所示:

<div id="vastausformi">
        <form id="vastaukset"> 

            <label for="a">A)</label>
<input type="checkbox" classname="box" id="Check1" value="Value1" onclick="selectOnlyThis(this.id)" />  
    
            <label for="b">B)</label>
  <input type="checkbox" classname="box" id="Check2" value="Value1" onclick="selectOnlyThis(this.id)" />  
             
            <label for="c">C)</label>
<input type="checkbox" classname="box"  id="Check3" value="Value1" onclick="selectOnlyThis(this.id)" />   

            <label for="d">D)</label>
<input type="checkbox" classname="box" id="Check4" value="Value1" onclick="selectOnlyThis(this.id)" /> 
        </form>
    </div>

然后我有一个问题的javascript:

let questions= {

  question: "Which city is the capital of Sweden?",
  vastaus:{
      a: 'Stockholm',
      b: 'Malmö',
      c: 'Göteborg',
      d: 'Helsingborg'
  },
  correctAnswer: 'a'
};

然后我做了一个函数来检查用户的猜测。

function checkGuess(){
    let correctAnswer= questions.valueOf(oikeaVastaus);
    let playerChoice= document.getElementsByClassName("box");
    
    if(playerChoice===correctAnswer){
      console.log("correct");
    }

    else{
      console.log("wrong");
    }

   
  };
    
guessSubmit.addEventListener('click', checkGuess);

checkGuess函数似乎没有得到“答案”,我得到它,以便它说答案是正确的(无论你选择哪个复选框)或者所有的答案都是错误的。我试过用不同的方法从复选框中“检索”信息,但没有运气。我似乎无法掌握那个“正确答案”。我还试过让一个特定的复选框成为“正确的选择”,所以每次你选择它时候,它都是正确的,但是那也不起作用。2所以checkGuess函数只是我尝试做检查的方法之一。3我也试着省去playerChoice的声明,直接把输入放到if语句中。4我也试着
使用这些控制台日志的原因只是看看脚本是否工作,所以在未来的答案将显示在屏幕上,将有更多的问题,而不仅仅是一个。我是新的编码,所以我可能会这样做完全错误,但我想使它,使一个问题出现,然后有四个复选框可供选择,然后将有一个按钮,以获得下一个问题。
我为我的英语道歉,但希望你能理解我的意思。
如果任何人有任何想法如何让这个工作或有一些替代的方法来做到这一点,我会非常感激!

mitkmikd

mitkmikd1#

我已将输入更新为使用radio而不是checkbox,以允许用户一次选择一个答案
此外,单击输入将立即调用checkGuess方法及其值

let questions= {

  question: "Which city is the capital of Sweden?",
  vastaus:{
      a: 'Stockholm',
      b: 'Malmö',
      c: 'Göteborg',
      d: 'Helsingborg'
  },
  correctAnswer: 'a'
};

  function checkGuess(playerChoice){
    
    if(playerChoice === questions.correctAnswer){
      console.log("correct");
    }

    else{
      console.log("wrong");
    }

 
  };
<div id="vastausformi">
  <form id="vastaukset">

    <label for="a">A)</label>
    <input type="radio" classname="box" name="box" id="Check1" value="a" onclick="checkGuess(this.value)" />

    <label for="b">B)</label>
    <input type="radio" classname="box" name="box" id="Check2" value="b" onclick="checkGuess(this.value)" />

    <label for="c">C)</label>
    <input type="radio" classname="box" name="box" id="Check3" value="c" onclick="checkGuess(this.value)" />

    <label for="d">D)</label>
    <input type="radio" classname="box" name="box" id="Check4" value="d" onclick="checkGuess(this.value)" />
  </form>
</div>

相关问题