Question

我正在制作一个测验网站，用户可以从选项元素中选择类别，然后将值存储在我的questionCategory变量中，并对其进行控制台日志以查看它是否可以实现。我的对象数组具有与options元素中的值相同的变量名。当我在函数中将其作为参数传递来启动测验时，它不会加载数组，而控制台日志输出正确的值，并且在进行硬编码时，它不会出现问题。

function startQuiz(numOfQuestions){
  questionCount = document.getElementById("selectQuestionCount").selectedIndex;
  questionPoll = document.getElementsByClassName("questionCount")[questionCount].value;

  categoryType = document.getElementById("selectCategoryType").selectedIndex;
  questionCategory = document.getElementsByClassName("categoryType")[categoryType].value;

  console.log(questionCategory);
  console.log(questionPoll);

  $("#questions_div").show();
  score=0;
  currentQuestion = 0;
  totalQuestions = questionPoll;

  loadQuestions(currentQuestion,questionCategory);
}

function loadQuestions(i,j){
  mainQuestion.text(j[i].question);
  opt1.text(j[i].ans1);
  opt2.text(j[i].ans2);
  opt3.text(j[i].ans3);
  opt4.text(j[i].ans4);
}

希望根据选项框的值更改问题类别，然后调用loadQuestion函数。

Answer 1

function getCategoryName(ctgName){
    if(questionCategory == "historyQuestions"){
      return historyQuestions;
    } else if(questionCategory == "randomQuestions")
      return randomQuestions;
  }

这段代码的目标是从html option元素中获取一个值，并将其用作对象名称，以访问该对象内部的数组。

    questionCategory = document.getElementsByClassName("categoryType")
[categoryType].value;

给了我一个字符串，我无法在其上使用question属性。函数getCategoryName将接受参数-questionCategory，该参数存储字符串并与“字符串”进行比较。

Answer 2

如果您使用的是jQuery，则可以考虑执行以下操作：

/* external.css */
*{
  padding:0; margin:0; box-sizing:border-box; overflow:hidden;
}
html,body{
  width:100%; height:100%; background:#aaa; color:#000;
}
body{
  position:relative; font:22px Tahoma, Geneva, sans-serif;
}
body>*{
  position:absolute;
}
#content{
  display:none; width:100%; height:100%; 
}
.page{
  position:relative; width:100%; height:100%; float:left;
}
.bar{
   width:100%; height:38px; padding:3px; background:#ccc; color:#000;
}
.main{
  height:calc(100% - 38px); padding:5px; overflow-y:auto;
}
h1{
  font-size:28px; margin-left:3px;
}
#sel{
  font:22px Tahoma, Geneva, sans-serif; margin-left:4px;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Select Example</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div id='content'>
    <div class='page'>
      <div class='bar'><h1>Select Example</h1></div>
      <div class='main'>
        <label for='sel'>Please select a value:</label><select id='sel'>
          <option value='1'>value 1</option>
          <option value='2'>value 2</option>
          <option value='3'>value 3</option>
          <option value='4'>value 4</option>
          <option value='5'>value 5</option>
          <option value='6'>value 6</option>
          <option value='7'>value 7</option>
        </select>
        <div id='outcome'></div>
      </div>
    </div>
  </div>
</body>
</html>

{{1}}

根据选项元素值选择变量名称

2 个答案: