Javascript Problems with .push in a Function

Question

I am pretty new to Javascript and JQuery.

Currently right now I'm trying to use .push inside my function.
This should be triggered when a person clicks on a link, and add 1 to my array. After clicking on the click on the link I take a look at the variable pointTotal, and find that there is nothing in the array.

If anyone can I would like to know what I'm doing wrong.

Javascript

var pointTotal = [];

$("#pointOne").click(function() {
    pointTotal.push(1);
});



HTML

  <div class ="quizSectionStress container-fluid">
    <div class="rowOne rowStyle">

      <div class = "answers col-xs-1 col-md-1">
        <div class="btn-group questionGroups">
          <button type="button" class="btn btn-default btn-md dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Answer <span class="caret"></span>
          </button>
            <ul class="dropdown-menu">
              <li><a href="#" id="questionOneOne pointOne" name="questionOneOne" value="1"><label>1</label></a></li>
              <li><a href="#" id="questionOneTwo pointTwo" name="questionOneTwo" value="2"><label>2</label></a></li>
              <li><a href="#" id="questionOneThree pointThree" name="questionOneThree" value="3"><label>3</label></a></li>
              <li><a href="#" id="questionOneFour pointFour" name="questionOneFour" value="4"><label>4</label></a></li>
              <li><a href="#" id="questionOneFive pointFive" name="questionOneFive" value="5"><label>5</label></a></li>
              <li><a href="#" id="questionOneSix pointSix" name="questionOneSix" value="6"><label>6</label></a></li>
            </ul>
        </div>
      </div>

There's nothing wrong with the JS, can you include your HTML in the question? — Ben Kolya Mansley, Sep 17 '15 at 03:31
What if you use `var pointTotal = new Array();` instead of `var pointTotal = [];`? — Alejandro Iván, Sep 17 '15 at 03:34
@AlejandroIván please don't encourage the use of `new Array()`; the array literal, `[]`, is almost always preferable. — royhowie, Sep 17 '15 at 03:37
Alejandro, `[]` is the recommended way to declare an array, `new Array()` is obsolete — Ben Kolya Mansley, Sep 17 '15 at 03:37
@royhowie yeah it was just in case (maybe browser implementations may vary, but they shouldn't). Another option (again, **maybe**) is that he isn't declaring inside `$(document).ready(function() { });`? — Alejandro Iván, Sep 17 '15 at 03:39
*"After clicking on the click on the link I take a look at the variable `pointTotal`,"* How exactly are you doing that? — Felix Kling, Sep 17 '15 at 03:44
@FelixKling I'm using console.log in my console on my browser to see if the array had 1 .push to it. — ndglover21, Sep 17 '15 at 23:08

Alejandro Iván · Accepted Answer · 2015-09-17T03:51:24.127

0

Try declaring all your variables and events when the DOM is ready:

<!-- html... head... jQuery inclusion... -->
<script type="text/javascript">
    $(document).ready(function() {
        var pointTotal = [];

        $('#pointOne').click(function(e) {
            e.preventDefault(); // Just in case it's an anchor/submit/whatever..
            pointTotal.push(1);
            alert('pointTotal count so far: ' + pointTotal.length);
        });
    });
</script>
<!-- blah blah... more html -->

This is because your element with the pointOne id will not be in the DOM before it is ready, so the click event will not be attached to it.

edited Sep 17 '15 at 03:51

answered Sep 17 '15 at 03:46

Alejandro Iván

3,969
1
21
30

You are correct I had it outside of the DOM ready, but when I I place it when the DOM is ready I can't seem to access the variable pointTotal anymore. I'm going to update my question and put my HTML in there. – ndglover21 Sep 17 '15 at 22:45
@ndglover21 as far as I can see, your HTML is wrong (for example, read: http://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids)... first learn HTML and then mess with Javascript/jQuery... – Alejandro Iván Sep 18 '15 at 03:01
Thanks that is the problem. – ndglover21 Sep 18 '15 at 18:58

score 0 · Answer 2 · answered Sep 17 '15 at 03:52

0

Try like this in your code...link with jquery file

var pointTotal = [];

$("#pointOne").click(function(){
pointTotal.push(1);
$("#show").text(pointTotal);
//console.log(pointTotal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button id="pointOne">Click</button>
<div id="show"></div>

answered Sep 17 '15 at 03:52

Jack jdeoel

4,554
5
26
52

Thanks for the reply David, but when I try to console log pointTotal it is still blank. – ndglover21 Sep 17 '15 at 23:01

Javascript Problems with .push in a Function

2 Answers2