我正在创建一个测验，想知道我是否必须获取每个选择的价值，或者是否可以简捷地做到这一点？

Question

我想获得用户选择的测验。

我通过使用const choiceA = document.getElementById("A").value;来做到这一点const choiceA = document.getElementById("A").value;

有四种选择，我可以做一些类似的事情来代替创建4个不同的const。 const choice = document.getElementById("A", "B"....).value

还是还有其他方法可以简化操作？

任何有关收集用户输入的良好信息的链接也将不胜感激:)

<html>
        <form id="formEl">
            <h2 id="question"></h2>
            <button id="A" type="button" class="userSelection"></button>
            <button id="B" type="button" class="userSelection"></button>
            <button id="C" type="button" class="userSelection"></button>
            <button id="D" type="button" class="userSelection"></button>
            <button id="previous" type="button" class="userSelection">Previous</button>
            <button id="next" type="button" class="userSelection">Next</button>
            <button id="submit">Submit</button>

        </form>

<js>
class Question {
    constructor(question, ansA, ansB, ansC, ansD, answer) {
        this.question = question;
        this.ansA = ansA;
        this.ansB = ansB;
        this.ansC = ansC;
        this.ansD = ansD;
        this.answer = answer;
    };

    checkAns(ansSelected, answer) {
        if (ansSelected === answer) {
            console.log('Well Done')
        };
    };
};

//Questions
var questionOne = new Question('Where is Creete?', 'Barcalona', 'Greece', 'Dubi', 'Ireland', 'Greece');
var questionTwo = new Question('How many times have Liverppool won the Champions Legue?', '1', '4', '6', '5', '6');
var questionThree = new Question('Where was the first Godfather in the mafia from?', 'Milan', 'Gunoa', 'Rome', 'Napoli', 'Napoli');

//Index of the array with the questions array 
var i = 0;
const arrayQuestion = [questionOne, questionTwo, questionThree];

//Selecting the value of the user once clicked
const choiceA = document.getElementById("A").value;
const choiceB = document.getElementById("B").value;
const choiceC = document.getElementById("C").value;
const choiceD = document.getElementById("D").value;

Answer 1

我建议您不要使用button因为它们仅执行scripts或onclick函数，它们无法保存变量或值，因此使用select会容易得多，因此您可以阅读selectedIndex示例：

<select name="Class" id="Class">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
//This is for you to see the selected value
  <input type="text" name="valorsel" id="valorsel" class="form-control" placeholder="Selected Index Value">

这将是脚本

<script>
function myFunction()
{
//Getting the value
  var selObj = document.getElementById("Class");
  var selValue = selObj.options[selObj.selectedIndex].value;
//Setting Value
 document.getElementById("valorsel").value = selValue;
}
</script>

Answer 2

这可能有点老派。 但是:)如果必须是按钮，则不能仅仅评估表单。 如下面的运行代码所示，它们将始终赋予其价值。 如果我们想滥用按钮，我们将有些棘手。 我使用输入字段来获取和编辑值。 之后可以确定隐藏。 如果只有一个答案可以，则本机html解决方案将是单选按钮；如果某些答案可以，则可以是复选框。 然后，序列化函数将以良好的样式为您提供所有值。 我认为有些建议的选项输入字段不方便。 但是味道不同。 在我的“ getanswer”例程中，您可以轻松添加一些样式更改-如果该按钮处于活动状态或其他状态，则将按钮设为红色。 我还对结果进行排序，以使其易于与正确答案进行比较。 html部分也可以自动写入您的文档中。

function changeform(formid,html) {
document.getElementById(formid).nextElementSibling.innerHTML=html; 

}


<!DOCTYPE html>
<html>
<body>
    <form id="formEl" name="formEl" onsubmit="done(this)">
    <div>
        <button id="A" type="button" class="userSelection" NAME="A" 
 VALUE="A" 
 onclick="edanswer('A')">A</button>
        <button id="B" type="button" class="userSelection" NAME="B" 
 VALUE="B" 
 onclick="edanswer('B')">B</button>
        <button id="C" type="button" class="userSelection" NAME="C" 
 VALUE="C" 
 onclick="edanswer('C')">C</button>
        <button id="D" type="button" class="userSelection" NAME="D" 
   VALUE="D" 
    onclick="edanswer('D')">D</button>
    </div>
        <input type="submit" value="gotcha">
        <input id="result" name="result">
    </FORM>
    <SCRIPT>
        function edanswer(answer) {
            result = formEl.elements["result"].value
            if (result.indexOf(answer) < 0) {
                result = result + answer;
            } else {
                result = result.replace(answer, "");
            }
            //sort result to ease further processing / evaluation
            arr = result.split('');
            arr.sort();
            result = arr.join('');
            formEl.elements["result"].value = result;
        }
        function done(x) {
            alert(x.result.value);
            alert(serialize(x)); 
            // just to clarify the form button issue
            // the preferred input type would be a checkbox 
            // on submit they give sound values without hussle

        }


        //https://code.google.com/archive/p/form-serialize/downloads
        function serialize(form) {
            if (!form || form.nodeName !== "FORM") {
                return;
            }
            var i, j, q = [];
            for (i = form.elements.length - 1; i >= 0; i = i - 1) {
                if (form.elements[i].name === "") {
                    continue;
                }
                switch (form.elements[i].nodeName) {
                case 'INPUT':
                    switch (form.elements[i].type) {
                    case 'text':
                    case 'hidden':
                    case 'password':
                    case 'button':
                    case 'reset':
                    case 'submit':
                        q.push(form.elements[i].name + "=" + 
 encodeURIComponent(form.elements[i].value));
                        break;
                    case 'checkbox':
                    case 'radio':
                        if (form.elements[i].checked) {
                            q.push(form.elements[i].name + "=" + 
  encodeURIComponent(form.elements[i].value));
                        }
                        break;
                    case 'file':
                        break;
                    }
                    break;
                case 'TEXTAREA':
                    q.push(form.elements[i].name + "=" + 
 encodeURIComponent(form.elements[i].value));
                    break;
                case 'SELECT':
                    switch (form.elements[i].type) {
                    case 'select-one':
                        q.push(form.elements[i].name + "=" + 
  encodeURIComponent(form.elements[i].value));
                        break;
                    case 'select-multiple':
                        for (j = form.elements[i].options.length - 1; j >= 0; j = j - 
1) {
                            if (form.elements[i].options[j].selected) {
                                q.push(form.elements[i].name + "=" + 
 encodeURIComponent(form.elements[i].options[j].value));
                            }
                        }
                        break;
                    }
                    break;
                case 'BUTTON':
                    switch (form.elements[i].type) {
                    case 'reset':
                    case 'submit':
                    case 'button':
                        q.push(form.elements[i].name + "=" + 
 encodeURIComponent(form.elements[i].value));
                        break;
                    }
                    break;
                }
            }
            return q.join("&");
        }
    </SCRIPT>
 </body>
</html>

我正在创建一个测验，想知道我是否必须获取每个选择的价值，或者是否可以简捷地做到这一点？

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-08-29 17:45:23

解决方案2
0 2019-08-29 18:14:50

我正在创建一个测验，想知道我是否必须获取每个选择的价值，或者是否可以简捷地做到这一点？

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-08-29 17:45:23

解决方案2 0 2019-08-29 18:14:50

解决方案1
0 已采纳 2019-08-29 17:45:23

解决方案2
0 2019-08-29 18:14:50