custom attribute undefined

Question

Inside THIS jsFiddle I have 2 buttons, each with a custom data-direction attribute:

 <div class="btn-group" id="controls">
  <button type="button" class="btn btn-primary btn-sm" data-direction="left">Prev</button>
  <button type="button" class="btn btn-primary btn-sm" data-direction="right">Next</button>
</div>

I am trying to console log the direction attribute upon clicking the buttons:

var updateCounter = function(){
  var direction = $(this).data("direction")
    if(direction === "left") {
    counter--;
  } else {
    counter++;
  }
  console.log(direction);
}

But what I get is undefined. Why?

how is updateCounter called? Willing to bet `this` is window and not what was clicked. — epascarello, Jun 15 '17 at 17:30
I'd check what is the value of `this` in the debugger, or try to search the button itself instead of using this. — SapManTM, Jun 15 '17 at 17:33
Possible duplicate of [Is there a standard function to check for null, undefined, or blank variables in JavaScript?](https://stackoverflow.com/questions/5515310/is-there-a-standard-function-to-check-for-null-undefined-or-blank-variables-in) — , Jun 15 '17 at 17:39
What does that duplicate have to do with this? @JarrodRoberson — epascarello, Jun 15 '17 at 17:49

score 1 · Accepted Answer · answered Jun 15 '17 at 17:37

Change updateCounter function so that it takes one argument, just the element.

var numbers = [4, 9, 16, 25];
var counter = 0;
var updateCounter = function(ele){
  var direction = $(ele).data("direction")
  if(direction === "left") {
      counter--;
  } else {
      counter++;
  }
  console.log(counter);
  console.log(direction);
}

$('#numbers_wrapper').text(numbers[counter]);

$('#controls button').on('click', function(e){
  updateCounter(this);
  $('#numbers_wrapper').text(numbers[counter]);
});

.numbers {
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    margin: 5px auto;
    border: 1px solid #286da9;
    background: #337ab7;
    color: #fff;
    border-radius: 2px;
}
.controls > div {
    display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <div class="numbers text-center" id="numbers_wrapper"></div>
    <div class="controls text-center">
        <div class="btn-group" id="controls">
            <button type="button" class="btn btn-primary btn-sm" data-direction="left">Prev</button>
            <button type="button" class="btn btn-primary btn-sm" data-direction="right">Next</button>
        </div>
    </div>
</div>

It works! Can you explain your code? (It would help). Thank you! — Razvan Zamfir, Jun 15 '17 at 17:41
Sorry but I closed my computer. **this** keyword in your function refers to window object. So you need to pass the correct value you have inside the event handler. — gaetanoM, Jun 15 '17 at 17:52

custom attribute undefined

1 Answers1