计算javascript中range对象的值

我有个小测验。有5个问题，每个问题的滑块范围从0到5。我想以你们的总分来结束这次测验。我怎样才能在javascript中访问这些值并将它们加在一起呢?

有一个问题，

<form class="questionForm-1" id="q1" data-question="1">
<div id="qhead" class="d-flex p-2 bd-highlight text-center">
<h1>Question 1</h1>
</div>
<div id="ondertitel" class="d-flex p-2 bd-highlight text-center">
<h2>Ik ervaar rust wanneer ik een duidelijke planning heb voor die dag. </h2>
</div>
<div class="form-check" id="form-check">
<div class="d-flex p-4 text-center">
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="input1"
oninput="q1points.value = this.value">
<output id="q1points">0</output>
</div>
</div>
<p id="res_1"></p>
<button id="btn-1" type="button" class="btn btn-danger">Volgende</button>
</form>

i useoninput="q1points.value = this.value"> <output id="q1points">0</output>来显示值，但它是在HTML中完成的，

那么我如何访问这些值并将它们一起计数呢?(每个问题的输出id为:q1points, q2points, q3points, q4points, q5points)

谢谢你，

编辑:我有设置一个按钮用于调试/下一个问题。我现在在哪里可以看到输入范围的值?@akirus

$('#btn-1').click(function () {
console.log(result);
$('#q1').hide();
$('#q2').show();

完整代码

$(document).ready(function () {
//$('#results').hide();
$('#q2,#q3,#q4,#q5').hide();
$('#q1').show();
$('#emailform').hide();
$('#btn-1').click(function () {
$('#q1').hide();
console.log("input1");
$('#q2').show();
});
$('#btn-2').click(function () {
$('#q2').hide();
$('#q3').show();
});
$('#btn-3').click(function () {
$('#q3').hide();
$('#q4').show();
});
$('#btn-4').click(function () {
$('#q4').hide();
$('#q5').show();
});
$('#btn-5').click(function () {
$('#q5').hide();
$('#results').show();
});

});
// initialise a counter
document.getElementById('btn-5').addEventListener('click', () => {
let result = 0; 
// list of range input ids
const ranges = ['input1', 'input2', 'input3', 'input4', 'input5'];

// parse int so value is a number
ranges.forEach((range) => {
const rangeVal = parseInt(document.getElementById(range).value);
console.log(rangeVal); // log value
results += rangeVal; // add value to counter
});
console.log(results); // log result
document.getElementById('results').innerHTML = results; // show value
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- QUESTION 1  -->
<form class="questionForm-1" id="q1" data-question="1">
<div id="qhead" class="d-flex p-2 bd-highlight text-center">
<h1>Question 1</h1>
</div>
<div id="ondertitel" class="d-flex p-2 bd-highlight text-center">
<h2>Ik ervaar rust wanneer ik een duidelijke planning heb voor die dag. </h2>
</div>
<div class="form-check" id="form-check">
<div class="d-flex p-4 text-center">
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="input1"
oninput="q1points.value = this.value">
<output id="q1points">0</output>
</div>
</div>
<p id="res_1"></p>
<button id="btn-1" type="button" class="btn btn-danger">Volgende</button>
</form>

<!-- QUESTION 2  -->
<form class="questionForm-2" id="q2" data-question="2">
<div id="qhead" class="d-flex p-2 bd-highlight text-center">
<h1>Question 2</h1>
</div>
<div id="ondertitel" class="d-flex p-2 bd-highlight text-center">
<h2>Ik ben bezig met de manier waarop ik in het leven sta en neem de tijd om hierop te reflecteren. </h2>
</div>
<div class="form-check" id="form-check">
<div class="d-flex p-4 text-center">
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="input2"
oninput="q2points.value = this.value">
<output id="q2points">0</output>
</div>
</div>
<p id="res_2"></p>
<button id="btn-2" type="button" class="btn btn-danger">Volgende</button>
</form>
<!-- QUESTION 3  -->
<form class="questionForm-3" id="q3" data-question="3">
<div id="qhead" class="d-flex p-2 bd-highlight text-center">
<h1>Question 3</h1>
</div>
<div id="ondertitel" class="d-flex p-2 bd-highlight text-center">
<h2>Houdt jij vaak rekening met de impact en afkomst van de producten die je koopt/eet?</h2>
</div>
<div class="form-check" id="form-check">
<div class="d-flex p-4 text-center">
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="input3"
oninput="q3points.value = this.value">
<output id="q3points">0</output>
</div>
</div>
</div>
<p id="res_3"></p>
<button id="btn-3" type="button" class="btn btn-danger">Volgende</button>
</form>
<!-- QUESTION 4  -->
<form class="questionForm-4" id="q4" data-question="4">
<div id="qhead" class="d-flex p-2 bd-highlight text-center">
<h1>Question 4</h1>
</div>
</div>
<div id="ondertitel" class="d-flex p-2 bd-highlight text-center">
<h2>Ik ga ver om tijd vrij te maken om anderen te helpen? </h2>
</div>
<div class="form-check" id="form-check">
<div class="d-flex p-4 text-center">
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="input4"
oninput="q4points.value = this.value">
<output id="q4points">0</output>
</div>
</div>
</div>
<p id="res_4"></p>
<button id="btn-4" type="button" class="btn btn-danger">Volgende</button>
</form>
<!-- QUESTION 5  -->
<form class="questionForm-5" id="q5" data-question="5">
<div id="qhead" class="d-flex p-2 bd-highlight text-center">
<h1>Question 5</h1>
</div>
<div id="ondertitel" class="d-flex p-2 bd-highlight text-center">
<h2>Ik sta voor wat ik vind en wil die mening of opvatting ook graag delen met anderen.</h2>
</div>
</div>
<div class="form-check" id="form-check">
<div class="d-flex p-4 text-center">
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="input5"
oninput="q5points.value = this.value">
<output id="q5points">0</output>
</div>
</div>
<p id="res_5"></p>
<div class="d-flex">
<button id="btn-5" type="button" class="btn btn-danger">Resultaten</button>
<!-- <button id="btn-6" type="button" class="btn btn-danger">opnieuw</button> -->
</div>
</form>
<div id="group"></div>
<p id="result"></p>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="quiz_2.js"></script>
</body>
</html>

您可以使用以下命令来获取范围输入的值:

document.getElementById('input1').value

然后您只需要遍历所有输入并将值添加到某个counter变量。

编辑:stackblitz example

相关内容

最新更新

热门标签：