How do I add a button to a div class on load from Javascript? [duplicate]

Question

For an assignment, I cannot touch the HTML code and am editing an external JS file. I have to refer the code to an existing class and turn that into a button to run a script.

The has to be ran on load to transform an element with a given id into a button that can also run a function on click.

So let's say the we have id="bar", how do I go about it?

My code doesn't work at all.

document.getElementById("bar").onload = function () { myFunction() };

function myFunction() {
  document.getElementById("bar").innerHTML = "<button></button>";
}

You need to use getElementsByClassName("bar"). But i think you should use id in your div instead of class. — Avihay m
– Avihay m, Commented Feb 21, 2018 at 7:39

karthikaruna · Accepted Answer · 2018-02-21 07:44:31Z

0

Why don't you just execute your script as the DOM is ready? To do so,

document.addEventListener('DOMContentLoaded', function () { 
    document.getElementById("bar").innerHTML = "<button></button>";
}, false);

answered Feb 21, 2018 at 7:44

karthikaruna

3,2768 gold badges31 silver badges42 bronze badges

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

Comments

Austin Timmerman · Accepted Answer · 2018-02-21 07:58:42Z

0

You just need a createElement function. This works:

document.addEventListener("DOMContentLoaded", function(){
var button = document.createElement("button");
button.innerHTML = "This is a button";
// assuming the Div's ID is bar
var div = document.getElementById('bar');
div.appendChild(button);
//the following function will alert a window when the button is clicked
button.addEventListener ("click", function() {
    alert("Button was clicked");
    });

});

answered Feb 21, 2018 at 7:58

Austin Timmerman

661 silver badge6 bronze badges

Comments

Roman Khegay · Accepted Answer · 2018-02-21 07:59:56Z

0

Updated Codepen

I think this is bit tha you needed

var bar = document.getElementById('bar');

window.onload = function() {
  var barInner = bar.innerHTML;
  bar.innerHTML = '<button>' + barInner + '</button>';
}

bar.onclick = function() {
  alert("Hello\nHow are you?");
};

edited Feb 21, 2018 at 7:59

answered Feb 21, 2018 at 7:45

Roman Khegay

1834 silver badges18 bronze badges

Comments

Muhammad Waleed Ghous · Accepted Answer · 2018-02-21 08:01:41Z

0

document.getElementById("bar").onload = myFunction();

  function myFunction() {
    document.getElementById("bar").innerHTML = "<button>Button</button>";
  }

There you go!

answered Feb 21, 2018 at 8:01

Muhammad Waleed Ghous

111 bronze badge

Comments

theAlexandrian · Accepted Answer · 2018-02-21 08:28:22Z

Not every single HTML element has a load event. Only some of them are concerned, such as the window, an image... etc
Have a look here on MDN to learn more about this.

Here is a simple snippet resolving all what you mentioned.

window.addEventListener("load", () => {
  // you can put your entire script in here.
  
  var elt = document.getElementById("bar"),
    button = document.createElement("button");
  
  button.textContent = elt.textContent;
  button.onclick = callback;
  
  elt.textContent = '';
  elt.appendChild(button);
  
  function callback() {
    console.log("The button has been clicked");
  }
});

<div id="bar" style="background: beige; height: 2em">Click me</div>

In the previous snippet, I am appending the button in the element. But if the matter is really to transform it into a button, there we go:

window.addEventListener("load", () => {
  // you can put your entire script in here.
  
  var elt = document.getElementById("bar"),
    container = elt.parentNode,
    button = document.createElement("button");
  
  button.id = elt.id; // if you want to keep the id
  button.textContent = elt.textContent;
  button.onclick = callback;
  
  container.removeChild(elt);
  container.appendChild(button);
  
  function callback() {
    console.log("The button has been clicked");
  }
});

<div style="background: #fee; height: 2em">
  <div id="bar" style="background: beige; height: 2em">Click me</div>
</div>

Collectives™ on Stack Overflow

How do I add a button to a div class on load from Javascript? [duplicate]

5 Answers 5

Comments

Comments

Updated Codepen

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Linked

Related