我正在尝试根据用户单选按钮的选择获取运行总平均值(实时显示在我的范围内),但是我不确定如何在javascript中完成此操作。
看看我到目前为止有什么:
<form>
<p>Question here</p>
<input type="radio" class="check" name="choose" onchange="getAverage()" value=1>never
<input type="radio" class="check" name="choose" onchange="getAverage()" value=2>sometimes
<input type="radio" class="check" name="choose" onchange="getAverage()" value=3>regularly
<input type="radio" class="check" name="choose" onchange="getAverage()" value=4>always
<br>
</form>
<form>
<p>Question here</p>
<input type="radio" class="check" name="choose" onchange="getAverage()" value=1>never
<input type="radio" class="check" name="choose" onchange="getAverage()" value=2>sometimes
<input type="radio" class="check" name="choose" onchange="getAverage()" value=3>regularly
<input type="radio" class="check" name="choose" onchange="getAverage()" value=4>always
<br>
</form>
<form>
<p>Question here</p>
<input type="radio" class="check" name="choose" onchange="getAverage()" value=1>never
<input type="radio" class="check" name="choose" onchange="getAverage()" value=2>sometimes
<input type="radio" class="check" name="choose" onchange="getAverage()" value=3>regularly
<input type="radio" class="check" name="choose" onchange="getAverage()" value=4>always
<br>
</form>
<br>
<div>Your average score is: <span id="score"></span></div>
<br>
<br>
<script>
function getAverage() {
var i;
var total = 0;
var value = document.querySelector('input[name="choose"]:checked').value;
var count = document.querySelectorAll(".check:checked").length;
}
</script>
答案 0 :(得分:0)
var btns = document.querySelectorAll('input[name="choose"]');
btns.forEach( function( btn) {
btn.onclick = function () {
var average = 0;
btns.forEach( function( btn ) {
average = btn.checked ? (average + parseInt(btn.value)): average;
});
document.getElementById("score").innerText = average;
}
});
<form>
<p>Question here</p>
<input type="radio" class="check" name="choose" value=1>never
<input type="radio" class="check" name="choose" value=2>sometimes
<input type="radio" class="check" name="choose" value=3>regularly
<input type="radio" class="check" name="choose" value=4>always
<br>
</form>
<form>
<p>Question here</p>
<input type="radio" class="check" name="choose" value=1>never
<input type="radio" class="check" name="choose" value=2>sometimes
<input type="radio" class="check" name="choose" value=3>regularly
<input type="radio" class="check" name="choose" value=4>always
<br>
</form>
<form>
<p>Question here</p>
<input type="radio" class="check" name="choose" value=1>never
<input type="radio" class="check" name="choose" value=2>sometimes
<input type="radio" class="check" name="choose" value=3>regularly
<input type="radio" class="check" name="choose" value=4>always
<br>
</form>
<br>
<div>Your average score is: <span id="score"></span></div>
<br>
<br>
答案 1 :(得分:0)
我假设您希望在用户单击按钮时更新平均值。
<form>
<p>Question here</p>
<input type="radio" class="check" name="choose" onclick="updateAverage(this)" value=1>never
<input type="radio" class="check" name="choose" onclick="updateAverage(this)" value=2>sometimes
<input type="radio" class="check" name="choose" onclick="updateAverage(this)" value=3>regularly
<input type="radio" class="check" name="choose" onclick="updateAverage(this)" value=4>always
<br>
</form>
<form>
<p>Question here</p>
<input type="radio" class="check" name="choose" onclick="updateAverage(this)" value=1>never
<input type="radio" class="check" name="choose" onclick="updateAverage(this)" value=2>sometimes
<input type="radio" class="check" name="choose" onclick="updateAverage(this)" value=3>regularly
<input type="radio" class="check" name="choose" onclick="updateAverage(this)" value=4>always
<br>
</form>
<form>
<p>Question here</p>
<input type="radio" class="check" name="choose" onclick="updateAverage(this)" value=1>never
<input type="radio" class="check" name="choose" onclick="updateAverage(this)" value=2>sometimes
<input type="radio" class="check" name="choose" onclick="updateAverage(this)" value=3>regularly
<input type="radio" class="check" name="choose" onclick="updateAverage(this)" value=4>always
<br>
</form>
<br>
<div>Your average score is: <span id="score"></span></div>
<br>
<br>
<script>
function averageTracker(display) {
let counter = 0;
let total = 0;
return function(radioButton) {
counter += 1;
total += parseInt(radioButton.value);
display.innerHTML = (total * 1.0) / counter;
}
}
const updateAverage = averageTracker(document.getElementById("score"));
</script>
答案 2 :(得分:0)
感谢您的答复,我解决了问题。这是最终的Javascript代码。
function getAverage() {
var btns = document.querySelectorAll('input[name="choose"]');
btns.forEach(function(btn) {
btn.onclick = function() {
var average = 0;
btns.forEach(function(btn) {
average = btn.checked ? average + parseInt(btn.value) : average;
});
var count = document.querySelectorAll(".check:checked").length;
var totalAverage = average / count;
document.getElementById("score").innerText = Math.round(
totalAverage
);
var answer = document.getElementById("score").innerHTML;
};
});
}