Calaculate sum from range slider with (jquery, javascript)

Question

i'm new with javascipt and i wante to build a simulator to get total price of articles, i found a tutorial for doing that, but the code don't work for me, i think that i have a mistake with importation of jquery or ajax library into my code:

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
        <script type="text/javascript">

  $(document).on("pagecreate", "#page1", function () {
    $(".add").on("change", function () {
        addAll();
    });

    addAll();
});

function addAll() {
    var sum = 0
    $('.add').each(function (){        
       sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);        
    });
    $('#total').html(sum);
}


            </script>

</head> 

    <body>

  <div data-role="page" id="page1">
      <div data-role="header">
           <h1>My page</h1> 
      </div>
      <div role="main" class="ui-content">
          <div id="mysliders">
              <label for="slider-1">Slider:</label>
              <input class="add" type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" />
              <label for="slider-2">Slider:</label>
              <input class="add" type="range" name="slider-2" id="slider-2" min="0" max="100" value="40" />
              <label for="slider-3">Slider:</label>
              <input class="add" type="range" name="slider-3" id="slider-3" min="0" max="100" value="30" />
              <label for="slider-4">Slider:</label>
              <input class="add" type="range" name="slider-4" id="slider-4" min="0" max="100" value="65" />
              <label for="slider-5">Slider:</label>
              <input class="add" type="range" name="slider-5" id="slider-5" min="0" max="100" value="11" />
              <label for="slider-6">Slider:</label>
              <input class="add" type="range" name="slider-6" id="slider-6" min="0" max="100" value="90" />
          </div>
          <hr />
          <p>Total: <strong id="total"></strong></p>
      </div>
      <div data-role="footer" data-position="fixed">
           <h1>Footer</h1> 
      </div>
  </div>

</body>
</html>

Tanks for helping me.

Sam0 · Accepted Answer · 2017-03-18 14:16:06Z

Snippet below with comments. I've removed the $(document).on("pagecreate", "#page1", functi... wrapper and shortened the addition line.

// I have omitted the 'pagecreate' line as it appears to have been taken out of its context and was not functioning here. The following should be sufficient

$(".add").on("change", function() {
  addAll();
});

addAll();

function addAll() {
    var sum = 0; // you had a missing semi-colon here
    $('.add').each(function (){        
 //      sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
       sum += parseFloat(this.value) || 0; // the other line works but this is simpler and shorter, if for any reason the value returned isn't a number it will choose a zero.
    });
    $('#total').html(sum);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>My page</h1>
  </div>
  <div role="main" class="ui-content">
    <div id="mysliders">
      <label for="slider-1">Slider:</label>
      <input class="add" type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" />
      <label for="slider-2">Slider:</label>
      <input class="add" type="range" name="slider-2" id="slider-2" min="0" max="100" value="40" />
      <label for="slider-3">Slider:</label>
      <input class="add" type="range" name="slider-3" id="slider-3" min="0" max="100" value="30" />
      <label for="slider-4">Slider:</label>
      <input class="add" type="range" name="slider-4" id="slider-4" min="0" max="100" value="65" />
      <label for="slider-5">Slider:</label>
      <input class="add" type="range" name="slider-5" id="slider-5" min="0" max="100" value="11" />
      <label for="slider-6">Slider:</label>
      <input class="add" type="range" name="slider-6" id="slider-6" min="0" max="100" value="90" />
    </div>
    <hr />
    <p>Total: <strong id="total"></strong></p>
  </div>
  <div data-role="footer" data-position="fixed">
    <h1>Footer</h1>
  </div>
</div>

Collectives™ on Stack Overflow

Calaculate sum from range slider with (jquery, javascript)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related