Daniel Zuzevich Daniel Zuzevich - 5 months ago 9
jQuery Question

Adding multiple variables and outputting to specific div on special event. (jQuery and Javascript)

I have created a layout for what I would call, "NHL Line Picker". What it does is allow a user to analyze total point production of a 3-man forward line, by calculating their combined total points for the season, and outputting it to a div on the right side of the screen.

I am unable to figure out a solution to add the three current selected players points together, and output that final total to the div in the right hand side.
For quick reference, I store a

data-total-pst
attribute within each players
li
tag within the html which I am using in my jQuery.

You can visit a working copy of it at NHL Line Picker

P.S. You'll notice towards the top of the javascript file that I am using append to display the total points onto the screen. I know this is wrong, but I was using it to test if it would at least output something there. I was under the impression I would have to convert each to an integer, but I'm lost after this part.

(Make sure you view the working example on a laptop screen or higher, I haven't done any media queries for it to work on smaller devices, and probably won't since this is just a sample project to practice my javascript.)



$(document).ready(function() {

$('#left-wingers').on('click', 'li', function() {
var leftWingTotal = $(this).data('total-pts');
$('#results').find('#total-display').append(leftWingTotal);
});

$('#centers').on('click', 'li', function() {
var centerTotal = $(this).data('total-pts');
$('#results').find('#total-display').append(centerTotal);
});

$('#right-wingers').on('click', 'li', function() {
var rightWingTotal = $(this).data('total-pts');
$('#results').find('#total-display').append(rightWingTotal);
});

// Add Center
$('#centers').on('click', 'li', function() {
$('#selected-players').find('#center-pic').html($(this).data('src'));
$('#selected-players').find('#center-name').html($(this).data('name'));
$('#selected-players').find('#center-goals').html($(this).data('goals'));
$('#selected-players').find('#center-assists').html($(this).data('assists'));
$('#selected-players').find('#center-skills').html($(this).data('skills'));
});

// Add Right Wingers
$('#right-wingers').on('click', 'li', function() {
$('#selected-players').find('#right-wing-pic').html($(this).data('src'));
$('#selected-players').find('#right-wing-name').html($(this).data('name'));
$('#selected-players').find('#right-wing-goals').html($(this).data('goals'));
$('#selected-players').find('#right-wing-assists').html($(this).data('assists'));
$('#selected-players').find('#right-wing-skills').html($(this).data('skills'));
});

// Add Left Wingers
$('#left-wingers').on('click', 'li', function() {
$('#selected-players').find('#left-wing-pic').html($(this).data('src'));
$('#selected-players').find('#left-wing-name').html($(this).data('name'));
$('#selected-players').find('#left-wing-goals').html($(this).data('goals'));
$('#selected-players').find('#left-wing-assists').html($(this).data('assists'));
$('#selected-players').find('#left-wing-skills').html($(this).data('skills'));
});

//Clear All Button
$('#results').on('click', '#clear-all', function() {
$('#selected-players').find('#left-wing-skills,#left-wing-assists,#left-wing-goals,#left-wing-name,#left-wing-pic').text("");
$('#selected-players').find('#right-wing-skills,#right-wing-assists,#right-wing-goals,#right-wing-name,#right-wing-pic').text("");
$('#selected-players').find('#center-skills,#center-assists,#center-goals,#center-name,#center-pic').text("");
$('#results').find('#total-display').empty();
});
});

<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bruins Line Picker</title>

<!-- CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,500,400italic,700' rel='stylesheet' type='text/css'>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

<!-- App Title -->
<div id="title" class="container">
<div class="row">
<div class="col-md-4 ">
<img src="img/bruins-logo.png">
</div>
<div class="col-md-4 text-center">
<h1>Forward Lines</h1>
</div>
<div class="col-md-4 text-right">
<img src="img/nhl-logo.png">
</div>
</div>
</div>

<!-- Column Setup -->
<div id="setup" class="container">
<div class="row">
<div id="#roster" class="col-md-2">
<h2>Positions</h2>
<ul id="centers">
<h3>Centers</h3>
<li id="bergeron" data-src="<img src='img/patrice.png'>" data-skills="<p id='skills'>Perfect player. Can play with anyone.</p>" data-name="<h4>Patrice Bergeron</h4>" data-goals="28" data-assists="33" data-total-pts="61">Bergeron, Patrice</li>
<li id="krejci" data-src="<img src='img/krejci.jpg'>" data-skills="<p id='skills'>Elite caliber player when he feels like it.</p>" data-name="<h4>David Krejci</h4>" data-goals="19" data-assists="45" data-total-pts="64">Krejci, David</li>
<li id="ferraro" data-src="<img src='img/ferraro.jpg'>" data-skills="<p id='skills'>Not to sure what he brings to the table.</p>" data-name="<h4>Landon Ferraro</h4>" data-goals="10" data-assists="10" data-total-pts="20">Ferraro, Landon</li>
<li id="spooner" data-src="<img src='img/spooner.jpg'>" data-skills="<p id='skills'>Elite speed. Playmaker abilities.</p>" data-name="<h4>Ryan Spooner</h4>" data-goals="15" data-assists="40" data-total-pts="55">Spooner, Ryan</li>
<li id="kelly" data-src="<img src='img/kelly.jpg'>" data-skills="<p id='skills'>A reliable two-way player.</p>" data-name="<h4>Chris Kelly</h4>" data-goals="10" data-assists="20" data-total-pts="30">Kelly, Chris</li>
</ul>

<ul id="right-wingers">
<h3>Right Wingers</h3>
<li id="beleskey" data-src="<img src='img/beleskey.jpg'>" data-skills="<p id='skills'>Plays physical. Can score out front.</p>" data-name="<h4>Matt Beleskey</h4>" data-goals="18" data-assists="20" data-total-pts="38">Matt Beleskey</li>
<li id="connolly" data-src="<img src='img/connolly.jpg'>" data-skills="<p id='skills'>Useless.</p>" data-name="<h4>Brett Connolly</h4>" data-goals="12" data-assists="18" data-total-pts="30">Brett Connolly</li>
<li id="eriksson" data-src="<img src='img/loui.jpg'>" data-skills="<p id='skills'>Veteran, goal scorer, and play-maker.</p>" data-name="<h4>Loui Eriksson</h4>" data-goals="25" data-assists="25" data-total-pts="50">Loui Eriksson</li>
<li id="hayes" data-src="<img src='img/hayes.jpg'>" data-skills="<p id='skills'>Why???</p>" data-name="<h4>Jimmy Hayes</h4>" data-goals="15" data-assists="15" data-total-pts="30">Jimmy Hayes</li>
</ul>

<ul id="left-wingers">
<h3>Left Wingers</h3>
<li id="pastrnak" data-src="<img src='img/pasta.jpg'>" data-skills="<p id='skills'>Pure goal scorer. High speed and skill.</p>" data-name="<h4>David Pastrnak</h4>" data-goals="20" data-assists="20" data-total-pts="40">David Pastrnak</li>
<li id="marchand" data-src="<img src='img/marchand.jpg'>" data-skills="<p id='skills'>Great wrist shot and overall speed.</p>" data-name="<h4>Brad Marchand</h4>" data-goals="35" data-assists="20" data-total-pts="55">Brad Marchand</li>
<li id="randall" data-src="<img src='img/randell.jpg'>" data-skills="<p id='skills'>No comment.</p>" data-name="<h4>Tyler Randell</h4>" data-goals="10" data-assists="15" data-total-pts="25">Tyler Randell</li>
<li id="stempniak" data-src="<img src='img/stemp.jpg'>" data-skills="<p id='skills'>Veteran, with play-maker abilities</p>" data-name="<h4>Lee Stempniak</h4>" data-goals="15" data-assists="15" data-total-pts="30">Lee Stempniak</li>
</ul>
</div>
<!-- End Roster -->

<div id="selected-players" class="col-md-8 text-center">
<!-- Nested Row -->
<div class="row">
<div class="col-md-4">
<h2>Left Wing</h2>
<div id="left-wing-pic" class="photo">

</div>
<div id="left-wing-name">

</div>
<div id="left-wing-goals">

</div>
<div id="left-wing-assists">

</div>
<div id="left-wing-skills">

</div>

</div>
<div class="col-md-4">
<h2>Centerman</h2>
<div id="center-pic" class="photo">

</div>
<div id="center-name">

</div>
<div id="center-goals">

</div>
<div id="center-assists">

</div>
<div id="center-skills">

</div>
</div>
<div class="col-md-4">
<h2>Right Wing</h2>
<div id="right-wing-pic" class="photo">

</div>
<div id="right-wing-name">

</div>
<div id="right-wing-goals">

</div>
<div id="right-wing-assists">

</div>
<div id="right-wing-skills">

</div>
</div>
</div>
<!-- Nested Row -->
</div>
<div id="results" class="col-md-2">
<h2>Results</h2>
<div id="total-display">
</div>
<button id="clear-all">Clear</button>
<button id="calculate">Calculate</button>
</div>
</div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>

</html>




Answer

You can simplify the function for each position into one this way:

Using an array to store the value for each position and then + all values.

var total=['0','0','0'];

$('#roster ul').on('click', 'li', function() {
  var i = $(this).parent('ul').index('ul');
  total[i] = $(this).data('total-pts');

  var output = 0;
  $.each(total,function(){output+=parseFloat(this) || 0;});

  $('#total-display').html(output);
});




Example Snippet

$(document).ready(function() {

  var total=['0','0','0'];
  
  $('#roster ul').on('click', 'li', function() {
    var i = $(this).parent('ul').index('ul');
    total[i] = $(this).data('total-pts');
    
    var output = 0;
    $.each(total,function(){output+=parseFloat(this) || 0;});
    
    $('#total-display').html(output);
  });



  // Add Center
  $('#centers').on('click', 'li', function() {
    $('#selected-players').find('#center-pic').html($(this).data('src'));
    $('#selected-players').find('#center-name').html($(this).data('name'));
    $('#selected-players').find('#center-goals').html($(this).data('goals'));
    $('#selected-players').find('#center-assists').html($(this).data('assists'));
    $('#selected-players').find('#center-skills').html($(this).data('skills'));
  });

  // Add Right Wingers
  $('#right-wingers').on('click', 'li', function() {
    $('#selected-players').find('#right-wing-pic').html($(this).data('src'));
    $('#selected-players').find('#right-wing-name').html($(this).data('name'));
    $('#selected-players').find('#right-wing-goals').html($(this).data('goals'));
    $('#selected-players').find('#right-wing-assists').html($(this).data('assists'));
    $('#selected-players').find('#right-wing-skills').html($(this).data('skills'));
  });

  // Add Left Wingers
  $('#left-wingers').on('click', 'li', function() {
    $('#selected-players').find('#left-wing-pic').html($(this).data('src'));
    $('#selected-players').find('#left-wing-name').html($(this).data('name'));
    $('#selected-players').find('#left-wing-goals').html($(this).data('goals'));
    $('#selected-players').find('#left-wing-assists').html($(this).data('assists'));
    $('#selected-players').find('#left-wing-skills').html($(this).data('skills'));
  });

  //Clear All Button
  $('#results').on('click', '#clear-all', function() {
    $('#selected-players').find('#left-wing-skills,#left-wing-assists,#left-wing-goals,#left-wing-name,#left-wing-pic').text("");
    $('#selected-players').find('#right-wing-skills,#right-wing-assists,#right-wing-goals,#right-wing-name,#right-wing-pic').text("");
    $('#selected-players').find('#center-skills,#center-assists,#center-goals,#center-name,#center-pic').text("");
    $('#results').find('#total-display').empty();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="roster" class="col-md-2">
  <h2>Positions</h2>
  <h3>Centers</h3>
  <ul id="centers">
    <li id="spooner" data-src="<img src='img/spooner.jpg'>" data-skills="<p id='skills'>Elite speed. Playmaker abilities.</p>" data-name="<h4>Ryan Spooner</h4>" data-goals="15" data-assists="40" data-total-pts="55">Spooner, Ryan</li>
    <li id="kelly" data-src="<img src='img/kelly.jpg'>" data-skills="<p id='skills'>A reliable two-way player.</p>" data-name="<h4>Chris Kelly</h4>" data-goals="10" data-assists="20" data-total-pts="30">Kelly, Chris</li>
  </ul>
  <h3>Right Wingers</h3>
  <ul id="right-wingers">
    <li id="beleskey" data-src="<img src='img/beleskey.jpg'>" data-skills="<p id='skills'>Plays physical. Can score out front.</p>" data-name="<h4>Matt Beleskey</h4>" data-goals="18" data-assists="20" data-total-pts="38">Matt Beleskey</li>
    <li id="connolly" data-src="<img src='img/connolly.jpg'>" data-skills="<p id='skills'>Useless.</p>" data-name="<h4>Brett Connolly</h4>" data-goals="12" data-assists="18" data-total-pts="30">Brett Connolly</li>
  </ul>
  <h3>Left Wingers</h3>

  <ul id="left-wingers">
    <li id="pastrnak" data-src="<img src='img/pasta.jpg'>" data-skills="<p id='skills'>Pure goal scorer. High speed and skill.</p>" data-name="<h4>David Pastrnak</h4>" data-goals="20" data-assists="20" data-total-pts="40">David Pastrnak</li>
    <li id="marchand" data-src="<img src='img/marchand.jpg'>" data-skills="<p id='skills'>Great wrist shot and overall speed.</p>" data-name="<h4>Brad Marchand</h4>" data-goals="35" data-assists="20" data-total-pts="55">Brad Marchand</li>
  </ul>
</div>
<!-- End Roster -->

<div id="selected-players" class="col-md-8 text-center">
  <!-- Nested Row -->
  <div class="row">
    <div class="col-md-4">
      <h2>Left Wing</h2>
      <div id="left-wing-pic" class="photo">

      </div>
      <div id="left-wing-name">

      </div>
      <div id="left-wing-goals">

      </div>
      <div id="left-wing-assists">

      </div>
      <div id="left-wing-skills">

      </div>

    </div>
    <div class="col-md-4">
      <h2>Centerman</h2>
      <div id="center-pic" class="photo">

      </div>
      <div id="center-name">

      </div>
      <div id="center-goals">

      </div>
      <div id="center-assists">

      </div>
      <div id="center-skills">

      </div>
    </div>
    <div class="col-md-4">
      <h2>Right Wing</h2>
      <div id="right-wing-pic" class="photo">

      </div>
      <div id="right-wing-name">

      </div>
      <div id="right-wing-goals">

      </div>
      <div id="right-wing-assists">

      </div>
      <div id="right-wing-skills">

      </div>
    </div>
  </div>
  <!-- Nested Row -->
</div>
<div id="results" class="col-md-2">
  <h2>Results</h2>
  <div id="total-display">
  </div>
  <button id="clear-all">Clear</button>
  <button id="calculate">Calculate</button>
</div>
</div>
</div>

Comments