CODEWITHSUNDEEP
javascript
Tekla
Tekla

Reputation: 45

onclick function is called even without clicking the button

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

Answers (1)

Deepak Kamat
Deepak Kamat

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

Related Questions