Reputation: 45
so I have a small html renderer, that returns a div with h1 and button tags nested in it.
for(let each in infoForThatDay) {
if(infoForThatDay[each]['start'] == hour.substring(0, 2)) {
let htmlRender = `
<div class='flex-boxes'>
<h1>${infoForThatDay[each]['title']}</h1>
<button onclick="${console.log('at least it works until here')}">დაჯავშნე ახლა</button>
</div>
`;
html += htmlRender;
}
};
let wrapper = document.querySelector('.users');
wrapper.innerHTML = html;
the 'at least it works until here' is logged once for all the elements in infoForThatDay. I don't understand what I'm doing wrong. Thanks in advance <3
Upvotes: 0
Views: 839
Reputation: 1980
You do not put the statement inside onclick
attribute in ${}
, since you are doing it, it executes as part of your JS function. Your code should be this
let htmlRender = `
<div class='flex-boxes'>
<h1>${infoForThatDay[each]['title']}</h1>
<button onclick="console.log('at least it works until here')">დაჯავშნე ახლა</button>
</div>
`;
The console.log
code gets printed as a string to the HTML you are rendering, and not executed as soon as your code is run.
Upvotes: 1