Returning data attribute values

Question

I am using javascript and have dynamically added 9 divs to the document. So now I have 9 divs and each div has a data-number. The data-numbers start at 9 for the first div and end at 17 for the last div. Is there a way I can target the div and return the actual data-number assigned to the div? The reason I want to do this is to style the div based on if its data number is less than, greater than, or equal to an arrays index.

var businessHours = ["9AM" , "10AM" , "11AM" , "12PM" , "1PM" , "2PM" , "3PM" , "4PM" , "5PM"];
var businessIndex = [9 , 10 , 11 , 12 , 13 , 14 , 15 , 16 , 17];

function createTimeblock() {
    for (var i = 0; i < businessHours.length; i++) {
        var mainDiv =`<div class="row border my-2 mx-1 time-block block${businessIndex[i]}" "data-number=${businessIndex[i]}">` +
                     `<p class="time-hour0 col-md-1">${businessHours[i]}</p>` +
                     `<div class="displayTodo col-md-9">` +
                     `<div class="storedTodo"></div>` +
                     `<textarea class="plan-here"></textarea>` +
                     `</div>` +
                     `<div class="col-md-2">` +
                     `<button class="col-md-5 clearBtn ml-1"><i class="fas fa-check"></i></button>` +
                     `<button class="col-md-5 saveBtn"><i class="fas fa-save"></i></button>` +
                     `</div>`;
        $('main').append(mainDiv);
    }    
}
    console.log(HERE IS WHERE I WOULD LIKE TO REUTRN A DIVS DATA-NUMBER)

So that's invalid HTML. "data-number=..." should be data-number="..." just like all other attributes — Taplar
– Taplar, Commented Sep 21, 2020 at 19:09
And which div do you want to log? You state "Is there a way I can target the div", but there are multiple divs. Which one? — Taplar
– Taplar, Commented Sep 21, 2020 at 19:10
This was exactly what the problem was. After moving the the quote to after the assignment operator the problem was solved. Thanks! — Patrick Whelan
– Patrick Whelan, Commented Sep 24, 2020 at 4:21

ParadoxonModding · Accepted Answer · 2020-09-22 18:17:02Z

1

Assuming you want to ultimately add the class to the div, you should be able to do that when you creating the mainDiv itself.

const mainDiv = '<div class='+i > 0 && i <5 ? 'morning': 'afternoon'+'> .... </div>';

You could also query the element using data attribute: jQuery how to find an element based on a data-attribute value?

Or you could get all divs and get the data value and compare it: How to get the data-id attribute?

edited Sep 22, 2020 at 18:17

ParadoxonModding

1041 silver badge10 bronze badges

answered Sep 21, 2020 at 20:42

Gopikrishna S

2,4594 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jerubaal Xerxes · Accepted Answer · 2020-09-21 19:38:15Z

0

is the data number unique. if unique you can target by giving id of the data number


function createTimeblock() {
    for (var i = 0; i < businessHours.length; i++) {
        var mainDiv =`<div id="${businessHours[i]}" class="row border my-2 mx-1 time-block block${businessIndex[i]} data-number=$'{businessIndex[i]}'">` +
                     `<p class="time-hour0 col-md-1">${businessHours[i]}</p>` +
                     `<div class="displayTodo col-md-9">` +
                     `<div class="storedTodo"></div>` +
                     `<textarea class="plan-here"></textarea>` +
                     `</div>` +
                     `<div class="col-md-2">` +
                     `<button class="col-md-5 clearBtn ml-1"><i class="fas fa-check"></i></button>` +
                     `<button class="col-md-5 saveBtn"><i class="fas fa-save"></i></button>` +
                     `</div>`;
        $('main').append(mainDiv);
    }    
}
    console.log($("#{businessHours[0]}").attr("data-number").val());

edited Sep 21, 2020 at 19:38

answered Sep 21, 2020 at 19:20

Jerubaal Xerxes

497 bronze badges

1 Comment

Taplar Over a year ago

Typo with your usage of template literals using ' instead of the template literal delimiters.

Collectives™ on Stack Overflow

Returning data attribute values

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related