create button dynamically by javascript and show variable content on click

Question

I am creating button like this:

    if(this.error_msg) {
        let btn_err = document.createElement('button');
        btn_err.type = "button";
        btn_err.name = "add";
        btn_err.textContent = "Remove";
        btn_err.setAttribute("class", "btn btn-primary btn-sm");

        btn_wrapper.append(btn_err);

        toastBody.append(btn_wrapper);
    }

How can I show this.error_msg on button click as alert?

add an event listener to the button to call the alert

mykaf
– mykaf

2022-05-02 19:02:52 +00:00
Commented May 2, 2022 at 19:02 — mykaf
– mykaf, Commented May 2, 2022 at 19:02

Client · Accepted Answer · 2022-05-02 19:07:00Z

2

You can add an event listener to the button using javascript.

btn_err.onclick = function(){alert(this.error_msg)}

answered May 2, 2022 at 19:07

Client

1401 silver badge6 bronze badges

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

1 Comment

erik-stengel Over a year ago

I can´t access this.error_msg in the function. Should I declare a variable one line before?

Evren · Accepted Answer · 2022-05-02 19:12:39Z

1

You can do like this

Note: I have changed if argument as true since you did not share your whole code, it is just to show working example

const testFunction = () => {
  if(true) {
          let btn_err = document.createElement('button');
          btn_err.type = "button";
          btn_err.name = "add";
          btn_err.textContent = "Remove";
          btn_err.setAttribute("class", "btn btn-primary btn-sm");
          btn_err.onclick = function(){alert("Error message")}
          let btn_wrapper = document.getElementById("buttonWrapper")
          btn_wrapper.append(btn_err);
      }    
 }
 testFunction();

<div id="buttonWrapper">

</div>

answered May 2, 2022 at 19:12

Evren

4,4601 gold badge13 silver badges20 bronze badges

Collectives™ on Stack Overflow

create button dynamically by javascript and show variable content on click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related