Javascript 根据测验中问题的可能答案动态更改HTML按钮数量_Javascript_Html

Javascript 根据测验中问题的可能答案动态更改HTML按钮数量

javascript html

Javascript 根据测验中问题的可能答案动态更改HTML按钮数量,javascript,html,Javascript,Html,因此，我尝试用JavaScript构建这个web测验/调查。一切正常，但我有答案按钮硬编码总是显示4种可能性有没有办法根据测验中每个问题的可能答案数量来更改可用按钮的数量提前感谢：）我的第一个想法是迭代包含可能答案的数组，并为每个选项向父div追加一个button元素。我不知道这样做的确切语法，所以我不知道它是否可以这样工作这是按钮当前的设置方式。（带有一些引导信息）对于有3个可能答案的问题，仅显示3个按钮；对于有2个答案的问题，仅显示2个按钮这是我的密码： // This is

因此，我尝试用JavaScript构建这个web测验/调查。一切正常，但我有答案按钮硬编码总是显示4种可能性

有没有办法根据测验中每个问题的可能答案数量来更改可用按钮的数量

提前感谢：）

我的第一个想法是迭代包含可能答案的数组，并为每个选项向父div追加一个button元素。我不知道这样做的确切语法，所以我不知道它是否可以这样工作

这是按钮当前的设置方式。（带有一些引导信息）

对于有3个可能答案的问题，仅显示3个按钮；对于有2个答案的问题，仅显示2个按钮

这是我的密码：

// This is the code i use to create an question object 
function Question(text, choices) {
    this.text = text;
    this.choices = choices;
}

// create questions
var questions = [
    new Question("Question 1?", ["choice1", "choice2", "choice3"]),
    new Question("Question 2?", ["choice1", "choice2"]),
    new Question("Question 3?", ["choice1", "choice2", "choice3", "choice4"])
];

//create quiz
function populate() {
    if (quiz.isEnded()) {
        showScores();
    } else {
        // show question
        var element = document.getElementById("question");
        element.innerHTML = quiz.getQuestionIndex().text;

        // show options
        var choices = quiz.getQuestionIndex().choices;
        for (var i = 0; i < choices.length; i++) {
            var element = document.getElementById("choice" + i);
            element.innerHTML = choices[i];
            guess("btn" + i, choices[i]);
        }

        showProgress();
    }
};

//And the full HTML
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Health - Check</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="grid">
        <div id="quiz">

            <div class="jumbotron">
              <h5 class="display-10" id="question"></h5>

                 <div class="list-group">

                    <a href="#" class="list-group-item list-group-item-action" id="btn0"><span id="choice0"></span></a>
                    <a href="#" class="list-group-item list-group-item-action" id="btn1"><span id="choice1"></span></a>
                    <a href="#" class="list-group-item list-group-item-action" id="btn2"><span id="choice2"></span></a>
                    <a href="#" class="list-group-item list-group-item-action" id="btn3"><span id="choice3"></span></a>


                    <footer>
                        <p id="progress">Question x of y</p>
                    </footer>
                </div>

            </div>


    </div>

<!-- Own JS Import -->
<script src="quiz.js"></script>
<script src="question.js"></script>
<script src="app.js"></script>


<!-- Bootstrap JS Import -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

//这是我用来创建问题对象的代码
功能问题（文本、选项）{
this.text=文本；
这个。选择=选择；
}
//提出问题
变量问题=[
新问题（“问题1？”、[“选择1”、“选择2”、“选择3”），
新问题（“问题2？”，[“选择1”，“选择2”），
新问题（“问题3？”，[“选项1”、“选项2”、“选项3”、“选项4]”）
];
//创建测验
函数填充（）{
if（quick.isEnded（））{
showScores（）；
}否则{
//提出问题
var元素=document.getElementById（“问题”）；
element.innerHTML=quick.getQuestionIndex（）.text；
//显示选项
var choices=quick.getQuestionIndex（）.choices；
for（var i=0；i问题x/y

在不查看您的代码的情况下，我建议在回答布尔值时为按钮提供类似

#id{visibility:hidden}

的样式规则，并在回答多项选择时更改为visible。希望这有帮助

Javascript提供了一个名为createElement（）的漂亮函数。顾名思义，它允许您在运行时动态创建html元素。我们稍后将使用的另一个重要函数是getElementsByClassName（）

在上面的代码中，包含答案/按钮的div没有唯一的ID。我们仍然可以通过它使用的css类引用它

var container = document.getElementsByClassName("list-group")[0];

对getElementsByClassName的调用返回一个HTMLCollection，它或多或少是一个数组。通过附加[0]，我们指的是它将找到的第一个元素，container div

这个div已经包含了一些元素，比如span元素和通过html定义的页脚。我们需要先把它们处理掉

container.innerHTML = "";

我们现在要做的就是循环选择数组，创建适当的html元素，给它们一个id，并最终将它们添加到容器div中。这是使用appendChild（）函数完成的

下面是一个基于您的代码的简化示例：

函数问题（文本、选项）{
this.text=文本；
这个。选择=选择；
}
//提出问题
变量问题=[
新问题（“问题1？”、[“选择1”、“选择2”、“选择3”），
新问题（“问题2？”，[“选择1”，“选择2”），
新问题（“问题3？”，[“选项1”、“选项2”、“选项3”、“选项4]”）
];
var问题=问题[0]；
var choices=question.choices；
var container=document.getElementsByClassName（“列表组”）[0]；
var跨度；
var锚；
container.innerHTML=“”；
for（var i=0；i

欢迎来到StackOverflow！通过在阵列上循环，您走在了正确的轨道上！为了真正帮助您，我们需要查看您的代码。这里是pastebin链接：）请发布您的html代码。顺便说一下，你不必使用pastebin。StackOverflow有强大的工具将代码直接插入到您的帖子中！只需单击问题下方的小编辑按钮。您的部分代码缺失。测验在哪里以及如何定义？另外，guess（）
、showcares（）
和showProgress（）
在您提供的代码中都没有出现。根据@auxer所说的内容，我建议您复习一下，并获得编写格式良好的问题的提示；这对于从社区获得有用的反馈至关重要。完美！非常感谢您解释它的工作方式！：）很高兴我能帮忙！=）