我正在为我的经理们做一个小测验。 逻辑是他们以1-5的比例回答每个问题。如果响应总计＆lt;我需要对响应求和，然后重定向到一个页面。如果它们总和> 31，则为不同的页面。 31。
我从另一个测验中借用了一些代码并对其进行了一些修改，因为我认为只需要一个变量 - 存储运行总计的变量。但我似乎无法让它发挥作用。
的JScript：
function process()
{
var changeSum = 0;
var f = document.f;
var i = 0;
for (i = 0; i < f.a.length; i++) if (f.a[i].checked) value = f.a[i].value;
if (value == "1") { changeSum++; }
if (value == "2") { changeSum++; }
if (value == "3") { changeSum++; }
if (value == "4") { changeSum++; }
if (value == "5") { changeSum++; }
for (i = 0; i < f.b.length; i++) if (f.b[i].checked) value = f.b[i].value;
if (value == "1") { changeSum++; }
if (value == "2") { changeSum++; }
if (value == "3") { changeSum++; }
if (value == "4") { changeSum++; }
if (value == "5") { changeSum++; }
for (i = 0; i < f.c.length; i++) if (f.c[i].checked) value = f.c[i].value;
if (value == "1") { changeSum++; }
if (value == "2") { changeSum++; }
if (value == "3") { changeSum++; }
if (value == "4") { changeSum++; }
if (value == "5") { changeSum++; }
for (i = 0; i < f.d.length; i++) if (f.d[i].checked) value = f.d[i].value;
if (value == "1") { changeSum++; }
if (value == "2") { changeSum++; }
if (value == "3") { changeSum++; }
if (value == "4") { changeSum++; }
if (value == "5") { changeSum++; }
for (i = 0; i < f.e.length; i++) if (f.e[i].checked) value = f.e[i].value;
if (value == "1") { changeSum++; }
if (value == "2") { changeSum++; }
if (value == "3") { changeSum++; }
if (value == "4") { changeSum++; }
if (value == "5") { changeSum++; }
for (i = 0; i < f.f.length; i++) if (f.f[i].checked) value = f.f[i].value;
if (value == "1") { changeSum++; }
if (value == "2") { changeSum++; }
if (value == "3") { changeSum++; }
if (value == "4") { changeSum++; }
if (value == "5") { changeSum++; }
for (i = 0; i < f.g.length; i++) if (f.g[i].checked) value = f.g[i].value;
if (value == "1") { changeSum++; }
if (value == "2") { changeSum++; }
if (value == "3") { changeSum++; }
if (value == "4") { changeSum++; }
if (value == "5") { changeSum++; }
for (i = 0; i < f.h.length; i++) if (f.h[i].checked) value = f.h[i].value;
if (value == "1") { changeSum++; }
if (value == "2") { changeSum++; }
if (value == "3") { changeSum++; }
if (value == "4") { changeSum++; }
if (value == "5") { changeSum++; }
for (i = 0; i < f.j.length; i++) if (f.j[i].checked) value = f.j[i].value;
if (value == "1") { changeSum++; }
if (value == "2") { changeSum++; }
if (value == "3") { changeSum++; }
if (value == "4") { changeSum++; }
if (value == "5") { changeSum++; }
for (i = 0; i < f.k.length; i++) if (f.k[i].checked) value = f.k[i].value;
if (value == "1") { changeSum++; }
if (value == "2") { changeSum++; }
if (value == "3") { changeSum++; }
if (value == "4") { changeSum++; }
if (value == "5") { changeSum++; }
for (i = 0; i < f.l.length; i++) if (f.l[i].checked) value = f.l[i].value;
if (value == "1") { changeSum++; }
if (value == "2") { changeSum++; }
if (value == "3") { changeSum++; }
if (value == "4") { changeSum++; }
if (value == "5") { changeSum++; }
var out = "change-quiz-A";
i = changeSum;
if (changeSum > "31") { out ="change-quiz-B"; }
location.href = out + ".html";
}
function err(msg, url, line)
{
location.href = "error.html";
}
window.onerror = err;
</SCRIPT>
HTML：
<form name="f">
<b>How satisfied are the employees with the current state of the business?</b><br>
<b>(1 = Dissatisfied // 5 = Satisfied)</b><br>
<label for="VD">
<input type="radio" id="VD" name="a" value="1">
<div>1</div>
</label>
<label for="D">
<input type="radio" id="D" name="a" value="2">
<div>2</div>
</label>
<label for="N">
<input type="radio" id="N" name="a" value="3">
<div>3</div>
</label>
<label for="S">
<input type="radio" id="S" name="a" value="4">
<div>4</div>
</label>
<label for="SS">
<input type="radio" id="SS" name="a" value="5">
<div>5</div>
</label>
<p> </p>
<p> </p>
<b>How have employees viewed past changes?</b><br>
<b>(1 = Positively // 5 = Negatively)</b><br>
<label for="VD1">
<input type="radio" id="VD1" name="b" value="1">
<div>1</div>
</label>
<label for="D1">
<input type="radio" id="D1" name="b" value="2">
<div>2</div>
</label>
<label for="N1">
<input type="radio" id="N1" name="b" value="3">
<div>3</div>
</label>
<label for="S1">
<input type="radio" id="S1" name="b" value="4">
<div>4</div>
</label>
<label for="SS1">
<input type="radio" id="SS1" name="b" value="5">
<div>5</div>
</label>
<p> </p>
<p> </p>
<b>Do you have any changes going on now besides this one?</b><br>
<b>(1 = Very Few Underway // 5 = Everything is Changing!)</b><br>
<label for="VD2">
<input type="radio" id="VD2" name="c" value="1">
<div>1</div>
</label>
<label for="D2">
<input type="radio" id="D2" name="c" value="2">
<div>2</div>
</label>
<label for="N2">
<input type="radio" id="N2" name="c" value="3">
<div>3</div>
</label>
<label for="S2">
<input type="radio" id="S2" name="c" value="4">
<div>4</div>
</label>
<label for="SS2">
<input type="radio" id="SS2" name="c" value="5">
<div>5</div>
</label>
<p> </p>
<p> </p>
<b>How well were your past changes managed?</b><br>
<b>(1 = Well-Managed // 5 = Poorly Managed</b><br>
<label for="VD3">
<input type="radio" id="VD3" name="d" value="1">
<div>1</div>
</label>
<label for="D3">
<input type="radio" id="D3" name="d" value="2">
<div>2</div>
</label>
<label for="N3">
<input type="radio" id="N3" name="d" value="3">
<div>3</div>
</label>
<label for="S3">
<input type="radio" id="S3" name="d" value="4">
<div>4</div>
</label>
<label for="SS3">
<input type="radio" id="SS3" name="d" value="5">
<div>5</div>
</label>
<p> </p>
<p> </p>
<b>Is the a shared vision and direction for the organization?</b><br>
<b>(1 = Shared & Unified // 5 = Different & Shifting</b><br>
<label for="VD4">
<input type="radio" id="VD4" name="e" value="1">
<div>1</div>
</label>
<label for="D4">
<input type="radio" id="D4" name="e" value="2">
<div>2</div>
</label>
<label for="N4">
<input type="radio" id="N4" name="e" value="3">
<div>3</div>
</label>
<label for="S4">
<input type="radio" id="S4" name="e" value="4">
<div>4</div>
</label>
<label for="SS4">
<input type="radio" id="SS4" name="e" value="5">
<div>5</div>
</label>
<p> </p>
<p> </p>
<b>How open are people to new ideas & change?</b><br>
<b>(1 = Open & Receptive // 5 = Closed & Resistant</b><br>
<label for="VD5">
<input type="radio" id="VD5" name="f" value="1">
<div>1</div>
</label>
<label for="D5">
<input type="radio" id="D5" name="f" value="2">
<div>2</div>
</label>
<label for="N5">
<input type="radio" id="N5" name="f" value="3">
<div>3</div>
</label>
<label for="S5">
<input type="radio" id="S5" name="f" value="4">
<div>4</div>
</label>
<label for="SS5">
<input type="radio" id="SS5" name="f" value="5">
<div>5</div>
</label>
<p> </p>
<p> </p>
<b>What are employees rewarded for?</b><br>
<b>(1 = Embracing Change & Risk-Taking // 5 = Consistency & Predictability</b><br>
<label for="VD6">
<input type="radio" id="VD6" name="g" value="1">
<div>1</div>
</label>
<label for="D6">
<input type="radio" id="D6" name="g" value="2">
<div>2</div>
</label>
<label for="N6">
<input type="radio" id="N6" name="g" value="3">
<div>3</div>
</label>
<label for="S6">
<input type="radio" id="S6" name="g" value="4">
<div>4</div>
</label>
<label for="SS6">
<input type="radio" id="SS6" name="g" value="5">
<div>5</div>
</label>
<p> </p>
<p> </p>
<b>How is leadership power distributed?</b><br>
<b>(1 = Centralized // 5 = Distributed</b><br>
<label for="VD7">
<input type="radio" id="VD7" name="h" value="1">
<div>1</div>
</label>
<label for="D7">
<input type="radio" id="D7" name="h" value="2">
<div>2</div>
</label>
<label for="N7">
<input type="radio" id="N7" name="h" value="3">
<div>3</div>
</label>
<label for="S7">
<input type="radio" id="S7" name="h" value="4">
<div>4</div>
</label>
<label for="SS7">
<input type="radio" id="SS7" name="h" value="5">
<div>5</div>
</label>
<p> </p>
<p> </p>
<b>How do <i>senior leaders</i> demonstrate change competency?</b><br>
<b>(1 = Effectively // 5 = Lack Skills & Knowledge</b><br>
<label for="VD8">
<input type="radio" id="VD8" name="j" value="1">
<div>1</div>
</label>
<label for="D8">
<input type="radio" id="D8" name="j" value="2">
<div>2</div>
</label>
<label for="N8">
<input type="radio" id="N8" name="j" value="3">
<div>3</div>
</label>
<label for="S8">
<input type="radio" id="S8" name="j" value="4">
<div>4</div>
</label>
<label for="SS8">
<input type="radio" id="SS8" name="j" value="5">
<div>5</div>
</label>
<p> </p>
<p> </p>
<b>How do <i>managers</i> demonstrate change competecy?</b><br>
<b>(1 = Effectively // 5 = Lack Skills & Knowledge</b><br>
<label for="VD9">
<input type="radio" id="VD9" name="k" value="1">
<div>1</div>
</label>
<label for="D9">
<input type="radio" id="D9" name="k" value="2">
<div>2</div>
</label>
<label for="N9">
<input type="radio" id="N9" name="k" value="3">
<div>3</div>
</label>
<label for="S9">
<input type="radio" id="S9" name="k" value="4">
<div>4</div>
</label>
<label for="SS9">
<input type="radio" id="SS9" name="k" value="5">
<div>5</div>
</label>
<p> </p>
<p> </p>
<b>How well do <i>employees</i> manage change?</b><br>
<b>(1 = Very Well // 5 = Poorly</b><br>
<label for="VD10">
<input type="radio" id="VD10" name="l" value="1">
<div>1</div>
</label>
<label for="D10">
<input type="radio" id="D10" name="l" value="2">
<div>2</div>
</label>
<label for="N10">
<input type="radio" id="N10" name="l" value="3">
<div>3</div>
</label>
<label for="S10">
<input type="radio" id="S10" name="l" value="4">
<div>4</div>
</label>
<label for="SS10">
<input type="radio" id="SS10" name="l" value="5">
<div>5</div>
</label>
<p> </p>
<input type="button" value="Calculate" onClick="process()">
</form>
答案 0 :(得分：0)
https://jsfiddle.net/stevenkaspar/f0rtpcfc/
我会使用onsubmit事件
<form name="f" onsubmit='process(event)'>
...
<input type='submit' value="Calculate">
</form>
在javascript中使用查询选择器而不是硬编码输入
function process(event){
event.preventDefault();
var form = event.currentTarget;
var inputs = form.querySelectorAll('input[type="radio"]');
var total = 0;
for(var i = 0, l = inputs.length; i < l; i++){
if(inputs[i].checked){
total += parseInt(inputs[i].value);
}
}
console.log(total);
if(total > 31){
window.location.href = 'change-quiz-B.html';
}
else {
window.location.href = 'change-quiz-A.html';
}
}
答案 1 :(得分：0)
所以这看起来比我应该做的更有趣，所以我玩了一下。我以一种稍微不同的方式接近它;而不是提交表单我已经为输入更改添加了事件侦听器，将值保存在对象中并在用户进行时更新运行总计。
哦，我构建了一个函数来制作标记，这样你就可以为它提供一系列任意问题。
即使它不适合您的用例，也许您可以从中获取一些东西。无论哪种方式，让我逗乐几分钟:)）
修改以下代码段的jsfiddle可能更容易使用。
arr_questions = [{
"question_text": "How is this going?",
"low_val": 1,
"low_description": "Badly",
"high_val": 5,
"high_description": "Kinda okay"
}, {
"question_text": "Was this a good use of my time?",
"low_val": 1,
"low_description": "really not",
"high_val": 5,
"high_description": "eh, maybe?"
}, {
"question_text": "Why do scales always have to be the same?",
"low_val": 7,
"low_description": "because",
"high_val": 13,
"high_description": "I make my own rules"
}];
obj_questions = {};
function makeQuestion(question_text, low_val, low_description, high_val, high_description) {
var q_id = 'q' + (Object.keys(obj_questions).length + 1);
obj_questions[q_id] = {
"text": question_text,
"low": low_val,
"high": high_val,
"score": 0
};
str_html = `<div id="${q_id}" class="question">
<p class="question-text">${question_text}</p>
<p class="range-discription">(Where ${low_val} means <em>${low_description}</em>
and ${high_val} means <em>${high_description}</em>)</p>`;
for (i = low_val; i <= high_val; i++) {
var a_id = q_id + '_a' + i;
str_html += `<label class="q-label" for="${a_id}">
<input type="radio" name="${q_id}" id="${a_id}" value="${i}">
<span class="val_text">${i}</span>
</label>`;
}
str_html += '</div>'
return str_html;
}
function buildQuestions(arr_qs) {
var str_html = '';
arr_qs.forEach(function(obj_q) {
str_html += makeQuestion(
obj_q.question_text,
obj_q.low_val,
obj_q.low_description,
obj_q.high_val,
obj_q.high_description
);
});
return str_html;
}
function addEventHandlers() {
var arr_targets = document.querySelectorAll('input[type=radio]');
for (i = 0; i < arr_targets.length; i++) {
arr_targets[i].addEventListener('change', function() {
scoreChange(this.name, this.value);
});
}
}
function scoreChange(question, value) {
obj_questions[question].score = parseInt(value, 10);
var total = 0;
var possible = 0;
for (var key in obj_questions) {
total += obj_questions[key].score;
possible += obj_questions[key].high;
}
var percent = Math.round((total / possible) * 100, 1);
document.getElementById('total').innerHTML = total;
document.getElementById('possible').innerHTML = possible;
document.getElementById('percent').innerHTML = percent;
document.getElementsByClassName('total')[0].classList.remove('hidden');
}
(function init() {
var str_html = buildQuestions(arr_questions);
var questions = document.getElementsByClassName('questions')[0].innerHTML = str_html;
addEventHandlers();
})();.container {
font-family: helvetica, arial, sans-serif;
font-size: 17px;
}
p {
margin-top: 0;
}
.question,
.total {
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
}
.question-text {
font-weight: bold;
}
.q-label {
display: inline-block;
margin: 5px;
padding: 10px;
background-color: lightblue;
cursor: pointer;
border-radius: 2px;
}
input[type="radio"] {
cursor: pointer;
}
.total p {
margin: 0;
}
.hidden {
display: none;
}<div class="container">
<div class="questions"></div>
<div class="total hidden">
<p class="running-total">The current total is: <span id="total">0</span> out of <span id="possible">0</span> or, <span id="percent">0</span>%.
</p>
</div>
</div>