CODEWITHSUNDEEP
javascriptjqueryhtml
factor_za
factor_za

Reputation: 119

Get value of data attribute to use as a comparison?

I have a loop that generates random numbers and positions in order to create 4 answers that a user can choose from.

The next step I am wanting to implement is to determine the value of the clicked button while comparing that to the position of the correct answer. However it keeps returning the data attribute I set to create the buttons position as undefined. I am not sure why this is the case.

// ===============================================
// BUTTON AND ANSWER GENERATOR
// ===============================================
function numberGenerator(){
    var goodAnswer = 21,
        gaPosition = Math.floor(Math.random() * 4),
        allAnswers = [],
        buttonArea = $("#answerOptions"),
        answer,
        buttonPosition = 0;

    for(n = 0; n < 4; n++) {
        buttonPosition++;
        if(n == gaPosition) {
            answer = goodAnswer;
        } else {
            do {
                answer = Math.floor((Math.random() * 100) + 1);
            } 
            while(answer == goodAnswer || allAnswers.indexOf(answer) !== -1);        
        }

        allAnswers.push(answer);
        input = $('<div class="col-xs-6"><button class="btn btn-primary answerButton" data-button="'+buttonPosition+'">'+ answer +'</button></div>');
        input.appendTo(buttonArea); 
    }

    console.log(allAnswers);
    console.log(gaPosition);

    $(document).on('click', '.answerButton' , function(){
        var clickedButton =  $(this).data('data-button');
        console.log(clickedButton);
        if(clickedButton == gaPosition) {
            alert("Correct!");
        }
        else {
            alert("Incorrect!");
        }
    }); 
}

Upvotes: 1

Views: 138

Answers (4)

Tim Vermaelen
Tim Vermaelen

Reputation: 7069

You can omit the "data" from the data-button.

// getter
var clickedButton = $(this).data('button');

// setter (just to elaborate)
var example = 'string' || 0;
$(this).data('button', example);

jQuery API for data()

// in case of multiple data attributes, 
// you get the collection of all data attributes
var clickedButton = $(this).data();
var somethingElse = clickedButton.button;

It would make more sense to rename clickedButton to buttonData for example ...

On another note you can also combine keywords with data attributes

<button data-button-value="1" data-button-action="step2" data-button-valid="true"></button>

You can then retreive it by keyword: 

var buttonValue = $(this).data('button-value'); // returns an integer
var buttonAction = $(this).data('button-action'); // returns a string
var buttonValid = $(this).data('button-valid'); // returns a boolean

Or as a camelCased collection:

var buttonData = $(this).data();
var buttonValue = buttonData.buttonValue; // returns an integer
var buttonAction = buttonData.buttonAction; //  returns a string
var buttonValid = buttonData.buttonValid; // returns a boolean

To retrieve the data-attribute as a string without any attempt to convert it, use the attr() method as Clément suggested.

var buttonValue = $(this).attr('data-button-value'); // returns a string
var buttonAction = $(this).attr('data-button-action'); //  returns a string
var buttonValid = $(this).attr('data-button-valid'); // returns a string

Upvotes: 1

Jonathan Cardoz
Jonathan Cardoz

Reputation: 878

There can be two issues in the above code sample:

  1. Some issue in the numbergenerator function could cause the setting of the data-button value to become undefined. In this case, you should check if this is being set correctly
  1. jQuery attr returns the value of the attribute as a string. So for strict comparison, convert to an integer using parseInt and then use the === operator.

Please provide a sample fiddle so we can debug and resolve the issue if this is possible. Would be easier.

Upvotes: 1

Gideon Pyzer
Gideon Pyzer

Reputation: 24098

The data function takes a key and a value (if you are assigning one). The key part is after the data- prefix, as the prefix is there so as to determine if it is a data attribute.

var clickedButton = $(this).data('data-button');

should be changed to:

var clickedButton = $(this).data('button');

Upvotes: 1

ClementNerma
ClementNerma

Reputation: 1109

jQuery permit to get the value of any HTML attribute by using $(...).attr('name_of_attribute').

Try by replacing this line :

var clickedButton = $(this).data('data-button');

By this one :

var clickedButton = $(this).attr('data-button');

Upvotes: 0

Related Questions