如何使用javascript函数getTotal在一个html页面中使用多个函数

问题描述 投票:0回答:1

我有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

javascript html css function
1个回答
0
投票

您可以向要一起计算的元素添加通用类,这将大大简化您的代码,如下所示:

注:此示例仅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>
© www.soinside.com 2019 - 2024. All rights reserved.