HTML in JS - Quotes rendered incorrectly

Question

getFeederInfoWindow: function (i) {
    var windowContent = "<button onclick='feeders.getFeederLoadingData(" + i + ",'summer')\">Summer</button>"
}

The method signature is basically: feeders.getFeederLoadingData: function (i, selectedSeason)

When the HTML page is loaded, Chrome inspection shows the <button> is rendered as follow:

Rendered: <button onclick="feeders.getFeederLoadingData(203," summer')">Summer</button>

But this is what I wanted:

Desired <button onclick="feeders.getFeederLoadingData(203,'summer')">Summer</button>

Bit of an embarrassing question, but I cannot figure out how I have messed up the quotes.

Thank you.

*"I cannot figure out how I have messed up the quote"* You are using `"` to *end* the `onclick` value but are using `'` to *start* it. That won't work, you have to end with the same quotation mark as you start with. — Felix Kling, Dec 12 '16 at 19:58

score 1 · Accepted Answer · answered Dec 12 '16 at 19:54

1

The quote after "onclick" is just a single quote. That should do the job:

getFeederInfoWindow: function (i) {
    var windowContent = "<button onclick=\"feeders.getFeederLoadingData(" + i + ",'summer')\">Summer</button>";
}

answered Dec 12 '16 at 19:54

Fabian Scheidt

score 1 · Answer 2 · answered Dec 12 '16 at 19:54

1

You attempt to start your attribute value with ' and then end it with ".

Nest your quotes correctly.

Better yet: Don't generate HTML by smashing strings together. Use createElement, addEventListener and friends.

answered Dec 12 '16 at 19:54

Quentin

score 0 · Answer 3 · edited May 23 '17 at 12:24

You seem to be missing the starting quotation for the onclick attribute:

"<button onclick='\"feeders.getFeederLoadingData(" + i + ",'summer')\">Summer</button>"
//                ^
//          THIS WAS MISSING

In general, it is a good idea to separate the DOM elements' behavior from their markup. This can be done:

$("<button>Summer</button>").on('click', function () { ... });

var button = document.createElement('button');
button.innerHTML = "Summer";
button.onclick = function () { ... };

score 0 · Answer 4 · answered Dec 12 '16 at 20:02

0

You try to use single quotes for the inline javascript like below

var windowContent = "<button onclick='feeders.getFeederLoadingData(i,'summer')' >Summer </button>";

answered Dec 12 '16 at 20:02

Dennisrec

4 Answers4