Proper syntax to construct onclick='location.href=' with JS variable into HTML

Question

I'm looping through some data with a var called sortedlist[i].description that contains an URL. I need to build the following HTML output:

<div onclick="location.href='http://XXXXXX' class="MusicItem">

I'm building my HTML output with a var called output which accumulates into the full body of my page.

output += '<div onclick="location.href="' + 
          sortedlist[i].description + '" class="MusicItem">';

The above of course breaks. I clearly have an issue with my quotation usage/syntax but I've tried it every which way:

alternating single to double quotes.
only using single quotes. and
using parens in place of the single quotes, etc.

Nothing is working.

If you want an element with the functionality of linking somewhere else on click - then why don't you use an actual link? '<a href="...">' requires one less "level" of string delimiters. — C3roe
– C3roe, Commented Sep 10, 2016 at 19:06

Nikolay Spasov · Accepted Answer · 2016-09-10 20:06:27Z

1

You can escape the quotes like this:

output += '<div onclick="location.href=\'' + sortedlist[i].description + '\'" class=\"MusicItem\"></div>';

Generating the following string:

<div onclick="location.href='https://google.com'" class="MusicItem"></div><div onclick="location.href='http://stackoverflow.com'" class="MusicItem"></div>

answered Sep 10, 2016 at 20:06

Nikolay Spasov

3968 silver badges18 bronze badges

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

Comments

user2385619 · Accepted Answer · 2016-09-10 19:16:29Z

0

Try this

output += '<div class="MusicItem" data-url="'+sortedlist[i].description+'"></div>'

and attach a click event like this

var item = document.querySelectorAll(".MusicItem");

    for(var i = 0;  i < item.length; i++){
        item[i].addEventListener("click", function(event){
            window.location.href = this.dataset.url;
        });
    }

or if you just want to redirect to new page on click event then better use an anchor tag

answered Sep 10, 2016 at 19:16

user2385619

Comments

naortor · Accepted Answer · 2016-09-10 19:21:51Z

0

possible solution is

output += sortedlist.map(function(item){
    return '<a href="'+item.description+'" class="MusicItem">' 
});

answered Sep 10, 2016 at 19:21

naortor

2,09714 silver badges26 bronze badges

Collectives™ on Stack Overflow

Proper syntax to construct onclick='location.href=' with JS variable into HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related