How to add onclick function from javascript?

Question

I want to create a button and add an onclick function to this button with javascript but there is a problem with onclick function. When I add button as below code I can't see quotation marks on Chrome. How can I add an onclick function with arguments?

myButton+= "<button onclick='addNewproperty('" + property + "','" + entry + "')' class='btn grey btn-circle' style='font-size: x-small; float: left'><i class='fa fa-times'></i>";
myButton+= entry.length > 12 ? entry.substring(0,12) + "..." : entry;
myButton+= "</button>"

Aycan Yaşıt · Accepted Answer · 2016-12-26 08:51:41Z

2

You may escape quotes. Since you were using same type of quotes as wrapper and inner quotes, it was actually acting like <button onclick="addNewproperty(".

myButton+= "<button onclick=\"addNewproperty('" + property + "','" + entry + "')\" class='btn grey btn-circle' style='font-size: x-small; float: left'><i class='fa fa-times'></i>";
myButton+= entry.length > 12 ? entry.substring(0,12) + "..." : entry;
myButton+= "</button>";

answered Dec 26, 2016 at 8:51

Aycan Yaşıt

2,1204 gold badges37 silver badges42 bronze badges

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

Comments

Jyothi Babu Araja · Accepted Answer · 2016-12-26 08:58:59Z

1

You can also use backticks ` to wrap your variables.

var hello = "Hello";
var myButton = "";
myButton+= "<button onclick='alert(`" + hello + "`)' class='btn grey btn-circle' style='font-size: x-small; float: left'><i class='fa fa-times'></i>";
myButton+= "</button>"

document.getElementById("div").innerHTML = myButton

<div id="div">

</div>

answered Dec 26, 2016 at 8:58

Jyothi Babu Araja

10.3k3 gold badges33 silver badges41 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:24:37Z

0

based on this answer and my self experience sometimes you shoud use onClick instead of onclick.

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Dec 26, 2016 at 9:02

farzane

3392 silver badges14 bronze badges

Comments

dzuncoi · Accepted Answer · 2016-12-26 09:05:17Z

0

For easier approach, you can add an id to your button element, eg:

myButton += "<button id='someId'>"

Then you can add onClick or any events to your element by:

document.getElementById("someId").addEventListener('click', function(){
   alert("Button clicked")
})

answered Dec 26, 2016 at 9:05

dzuncoi

311 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to add onclick function from javascript?

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related