我有23个范围滑块,范围从0到10。我希望能够加总值范围滑块。例如平均健康=(滑块1 + 2 +3 +4 .... + 22 + 23)/ 23):
function getTotal() {
var e1 = parseInt(slider2.value) || 0;
var e2 = parseInt(slider10.value) || 0;
var e3 = parseInt(slider16.value) || 0;
var h1 = parseInt(slider6.value) || 0;
var h2 = parseInt(slider11.value) || 0;
var h3 = parseInt(slider17.value) || 0;
var a1 = parseInt(slider.value) || 0;
var a2 = parseInt(slider5.value) || 0;
var a3 = parseInt(slider14.value) || 0;
var m1 = parseInt(slider7.value) || 0;
var m2 = parseInt(slider9.value) || 0;
var m3 = parseInt(slider19.value) || 0;
var hap = parseInt(slider23.value) || 0;
var r1= parseInt(slider8.value) || 0;
var r2 = parseInt(slider18.value) || 0;
var r3 = parseInt(slider20.value) || 0;
var p1 = parseInt(slider4.value) || 0;
var p2 = parseInt(slider12.value) || 0;
var p3 = parseInt(slider22.value) || 0;
document.getElementById("total").innerHTML = (e1 + e2+ e3 +h1+h2+h3+r1+r2+r3+a1+a2+a3+hap+m1+m2+m3+p1+p2+p3 )/23;
正情绪=(滑块2 + 9 + 11)/ 3
function getTotal() {
var p1 = parseInt(slider4.value) || 0;
var p2 = parseInt(slider12.value) || 0;
var p3 = parseInt(slider22.value) || 0;
document.getElementById("totalPE").innerHTML = (p1 + p2+ p3 )/3;
所以我已经弄清楚了如何使用js中的getTotal函数来做到这一点,但是我无法做到的是要有积极的情绪和平均水平的幸福感,而其他人需要同时进行计算。这是代码
<!DOCTYPE html>
<html>
<head>
<title>Inkel.ie</title>
<link rel="stylesheet" type="text/css" href="css/style2.css">
<script type="text/javascript" src="js/java.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>
<div data-include="About"></div>
<div data-include="Contact"></div>
<div data-include="Projects"></div>
<div data-include="Projects2"></div>
</head>
<body>
<header id="header1">
<div class="main">
<div class="logo">
<p>Inkel.</p>
</div>
<div class="underlogo">
<p>The science of positive Psycology</p>
</div>
<ul>
<li class="active"><a href="index.html">Daily Tracker</a></li>
</ul>
</div>
</header>
<div class="container"><div id="number">0</div>
<input type="range" min="0" max="10" value="0" id="slider"></div>
<p id="a1" >Moving towards work goals</p>
<div class="container2"><div id="number2">0</div>
<input type="range" min="0" max="10" value="0" id="slider2"></div>
<p id="e1" >In the zone at work</p>
<div class="container3"><div id="number3">0</div>
<input type="range" min="0" max="10" value="0" id="slider3"></div>
<p id="n1" >Any anxiety at work</p>
<div class="container4"><div id="number4">0</div>
<input type="range" min="0" max="10" value="0" id="slider4"></div>
<p id="p1" >Feeling great at work</p>
<div class="container5"><div id="number5">0</div>
<input type="range" min="0" max="10" value="0" id="slider5"></div>
<p id="a2"> You achieving work goals</p>
<div class="container6"><div id="number6">0</div>
<input type="range" min="0" max="10" value="0" id="slider6"></div>
<p id="h1">How's your physical health. </p>
<div class="container7"><div id="number7">0</div>
<input type="range" min="0" max="10" value="0" id="slider7"></div>
<p id="m1">Work giving you purpose?</p>
<div class="container8"><div id="number8">0</div>
<input type="range" min="0" max="10" value="0" id="slider8"></div>
<p id="r1">Others support you in work? </p>
<div class="container9"><div id="number9">0</div>
<input type="range" min="0" max="10" value="0" id="slider9"></div>
<p id="m2">Is your work worthwhile? </p>
<div class="container10"><div id="number10">0</div>
<input type="range" min="0" max="10" value="0" id="slider10"></div>
<p id="e2"> Is your work exciting?</p>
<div class="container11"><div id="number11">0</div>
<input type="range" min="0" max="10" value="0" id="slider11"></div>
<p id="h2">Satisfied with physical health</p>
<div class="container12"><div id="number12">0</div>
<input type="range" min="0" max="10" value="0" id="slider12"></div>
<p id="p2">Positive often</p>
<div class="container13"><div id="number13">0</div>
<input type="range" min="0" max="10" value="0" id="slider13"></div>
<p id="n2">Work making you angry</p>
<div class="container14"><div id="number14">0</div>
<input type="range" min="0" max="10" value="0" id="slider14"></div>
<p id="a3">Handling work duties.</p>
<div class="container15"><div id="number15">0</div>
<input type="range" min="0" max="10" value="0" id="slider15"></div>
<p id="n3">Sad in work?</p>
<div class="container16"><div id="number16">0</div>
<input type="range" min="0" max="10" value="0" id="slider16"></div>
<p id="e3">Work you enjoy at work.</p>
<div class="container17"><div id="number17">0</div>
<input type="range" min="0" max="10" value="0" id="slider17"></div>
<p id="h3">Your health V others ?</p>
<div class="container18"><div id="number18">0</div>
<input type="range" min="0" max="10" value="0" id="slider18"></div>
<p id="r2">appriciated at work</p>
<div class="container19"><div id="number19">0</div>
<input type="range" min="0" max="10" value="0" id="slider19"></div>
<p id="m3">Work giving life direction</p>
<div class="container20"><div id="number20">0</div>
<input type="range" min="0" max="10" value="0" id="slider20"></div>
<p id="r3">Happy with prof. rel..ps</p>
<div class="container22"><div id="number22">0</div>
<input type="range" min="0" max="10" value="0" id="slider22"></div>
<p id="p3">Life good in work?</p>
<div class="container23"><div id="number23">0</div>
<input type="range" min="0" max="10" value="0" id="slider23"></div>
<p id="hap">How happy are you?</p>
<p id="mon">Monday</p>
<p id="tue">Tuesday</p>
<p id="wed">Wednesday</p>
<p id="thu">Thursday</p>
<p id="fri">Friday</p>
<div id="totals">
<div class="popup" onclick="myFunction()">WB
<span class="popuptext" id="myPopup">Average WellBeing:<span id="total"></span></span>
</div>
<p> Positive Emotion :<span id="totalPE"></span></p>
<p>Engagement :<span id="totalE"></span></p>
<p>Relationships :<span id="totalR"></span></p>
<p>Meaning :<span id="totalM"></span></p>
<p>Accomplishments :<span id="totalA"></span></p>
<p>Health :<span id="totalH"></span></p>
</div>
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
<script>
var slider=document.
getElementById("slider");
var number=document.
getElementById("number");
slider.oninput=function(){
number.innerHTML=slider.
value;}
</script>
<script>
var slider2=document.
getElementById("slider2");
var number2=document.
getElementById("number2");
slider2.oninput=function(){
number2.innerHTML=slider2.
value;}
</script>
<script>
var slider3=document.
getElementById("slider3");
var number3=document.
getElementById("number3");
slider3.oninput=function(){
number3.innerHTML=slider3.
value;}
</script>
<script>
var slider4=document.
getElementById("slider4");
var number4=document.
getElementById("number4");
slider4.oninput=function(){
number4.innerHTML=slider4.
value;}
slider4.oninput = function() {
number4.innerHTML = this.value;
}
$(function() {
$('input[type=range]').change(getTotal); // not () - you're not calling the function
getTotal(); // initialy call it
});
function getTotal() {
var e1 = parseInt(slider2.value) || 0;
var e2 = parseInt(slider10.value) || 0;
var e3 = parseInt(slider16.value) || 0;
document.getElementById("totalE").innerHTML = (e1 + e2+ e3 )/3;
}
function getTotal() {
var p1 = parseInt(slider4.value) || 0;
var p2 = parseInt(slider12.value) || 0;
var p3 = parseInt(slider22.value) || 0;
document.getElementById("totalPE").innerHTML = (p1 + p2+ p3 )/3;
}
function getTotal() {
var r1= parseInt(slider8.value) || 0;
var r2 = parseInt(slider18.value) || 0;
var r3 = parseInt(slider20.value) || 0;
document.getElementById("totalR").innerHTML = (r1 + r2+ r3 )/3;
}
function getTotal() {
var m1 = parseInt(slider7.value) || 0;
var m2 = parseInt(slider9.value) || 0;
var m3 = parseInt(slider19.value) || 0;
document.getElementById("totalM").innerHTML = (m1 + m2+ m3 )/3;
}
function getTotal() {
var a1 = parseInt(slider.value) || 0;
var a2 = parseInt(slider5.value) || 0;
var a3 = parseInt(slider14.value) || 0;
document.getElementById("totalA").innerHTML = (e1 + e2+ e3 )/3;
}
function getTotal() {
var h1 = parseInt(slider6.value) || 0;
var h2 = parseInt(slider11.value) || 0;
var h3 = parseInt(slider17.value) || 0;
document.getElementById("totalH").innerHTML = (e1 + e2+ e3 )/3;
}
function getTotal() {
var e1 = parseInt(slider2.value) || 0;
var e2 = parseInt(slider10.value) || 0;
var e3 = parseInt(slider16.value) || 0;
var h1 = parseInt(slider6.value) || 0;
var h2 = parseInt(slider11.value) || 0;
var h3 = parseInt(slider17.value) || 0;
var a1 = parseInt(slider.value) || 0;
var a2 = parseInt(slider5.value) || 0;
var a3 = parseInt(slider14.value) || 0;
var m1 = parseInt(slider7.value) || 0;
var m2 = parseInt(slider9.value) || 0;
var m3 = parseInt(slider19.value) || 0;
var hap = parseInt(slider23.value) || 0;
var r1= parseInt(slider8.value) || 0;
var r2 = parseInt(slider18.value) || 0;
var r3 = parseInt(slider20.value) || 0;
var p1 = parseInt(slider4.value) || 0;
var p2 = parseInt(slider12.value) || 0;
var p3 = parseInt(slider22.value) || 0;
document.getElementById("total").innerHTML = (e1 + e2+ e3 +h1+h2+h3+r1+r2+r3+a1+a2+a3+hap+m1+m2+m3+p1+p2+p3 )/23;
}
</script>
<script>
var slider5=document.
getElementById("slider5");
var number5=document.
getElementById("number5");
slider5.oninput=function(){
number5.innerHTML=slider5.
value;}
</script>
<script>
var slider6=document.
getElementById("slider6");
var number6=document.
getElementById("number6");
slider6.oninput=function(){
number6.innerHTML=slider6.
value;}
</script>
<script>
var slider7=document.
getElementById("slider7");
var number7=document.
getElementById("number7");
slider7.oninput=function(){
number7.innerHTML=slider7.
value;}
</script>
<script>
var slider8=document.
getElementById("slider8");
var number8=document.
getElementById("number8");
slider8.oninput=function(){
number8.innerHTML=slider8.
value;}
</script>
<script>
var slider9=document.
getElementById("slider9");
var number9=document.
getElementById("number9");
slider9.oninput=function(){
number9.innerHTML=slider9.
value;}
</script>
<script>
var slider10=document.
getElementById("slider10");
var number10=document.
getElementById("number10");
slider10.oninput=function(){
number10.innerHTML=slider10.
value;}
</script>
<script>
var slider11=document.
getElementById("slider11");
var number11=document.
getElementById("number11");
slider11.oninput=function(){
number11.innerHTML=slider11.
value;}
</script>
<script>
var slider12=document.
getElementById("slider12");
var number12=document.
getElementById("number12");
slider12.oninput=function(){
number12.innerHTML=slider12.
value;}
</script>
<script>
var slider13=document.
getElementById("slider13");
var number13=document.
getElementById("number13");
slider13.oninput=function(){
number13.innerHTML=slider13.
value;}
</script>
<script>
var slider14=document.
getElementById("slider14");
var number14=document.
getElementById("number14");
slider14.oninput=function(){
number14.innerHTML=slider14.
value;}
</script>
<script>
var slider15=document.
getElementById("slider15");
var number15=document.
getElementById("number15");
slider15.oninput=function(){
number15.innerHTML=slider15.
value;}
</script>
<script>
var slider16=document.
getElementById("slider16");
var number16=document.
getElementById("number16");
slider16.oninput=function(){
number16.innerHTML=slider16.
value;}
</script>
<script>
var slider17=document.
getElementById("slider17");
var number4=document.
getElementById("number17");
slider17.oninput=function(){
number17.innerHTML=slider17.
value;}
</script>
<script>
var slider18=document.
getElementById("slider18");
var number18=document.
getElementById("number18");
slide18.oninput=function(){
number18.innerHTML=slider18.
value;}
</script>
<script>
var slider19=document.
getElementById("slider19");
var number19=document.
getElementById("number19");
slider19.oninput=function(){
number19.innerHTML=slider19.
value;}
</script>
<script>
var slider20=document.
getElementById("slider20");
var number20=document.
getElementById("number20");
slider20.oninput=function(){
number20.innerHTML=slider20.
value;}
</script>
<script>
var slider21=document.
getElementById("slider21");
var number21=document.
getElementById("number21");
slider21.oninput=function(){
number21.innerHTML=slider21.
value;}
</script>
<script>
var slider22=document.
getElementById("slider22");
var number22=document.
getElementById("number22");
slider22.oninput=function(){
number22.innerHTML=slider22.
value;}
</script>
<script>
var slider23=document.
getElementById("slider23");
var number23=document.
getElementById("number23");
slider23.oninput=function(){
number23.innerHTML=slider23.
value;}
</script>
</body>
</html>
这里是css的链接https://inkeltracker.000webhostapp.com/css/style2.css
您可以向要一起计算的元素添加通用类,这将大大简化您的代码,如下所示:
注:此示例仅3个元素,仅用于说明逻辑。我将所有内容都包装在on DOM ready
中,因此在尝试查询元素之前,请确保页面上已存在这些元素。
示例:(在下面运行)
// on DOM ready
document.addEventListener('DOMContentLoaded', function(event) {
var emotions = document.querySelectorAll(".emotion");
var wellbeing = document.querySelectorAll(".wellbeing");
// send the array and a reference to the function we want called when the event happens
prepareListeners(emotions, getEmotionTotal);
prepareListeners(wellbeing, getWellbeingTotal);
// add "onchange" listeners to elements of an array
function prepareListeners(array, callback) {
array.forEach(function(item) {
item.addEventListener("change", callback);
});
}
// function to calculate sum
function calcSum(array) {
let sum = 0;
array.forEach(function(item) {
val = parseInt(item.value);
sum += !isNaN(val) ? val : 0;
});
return sum;
}
// Emotional function
function getEmotionTotal() {
let sum;
sum = calcSum(emotions);
console.log("Emotional is: " + sum); // just to print it out here
return sum; // you can return the sum to the caller or put it in a div somewhere
}
// Wellbeing function
function getWellbeingTotal() {
let sum = 0;
let val;
sum = calcSum(wellbeing);
console.log("Wellbeing is: " + sum);
return sum;
}
});
<div class="container">
<div id="number">0</div>
<input type="range" min="0" max="10" class="emotion" value="0" id="slider">
</div>
<p id="a1">Moving towards work goals</p>
<div class="container2">
<div id="number2">0</div>
<input type="range" min="0" max="10" class="emotion wellbeing" value="0" id="slider2">
</div>
<p id="e1">In the zone at work</p>
<div class="container3">
<div id="number3">0</div>
<input type="range" min="0" max="10" class="emotion wellbeing" value="0" id="slider3">
</div>