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

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, Feb 21 '18 at 07:39

score 0 · Answer 1 · answered Feb 21 '18 at 07:44

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 '18 at 07:44

karthikaruna

3,042
7
26
37

Roman Khegay · Answer 2 · 2018-02-21T07:59:56.413

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 '18 at 07:59

answered Feb 21 '18 at 07:45

Roman Khegay

173
2
16

score 0 · Answer 3 · answered Feb 21 '18 at 07:58

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");
    });

});

score 0 · Answer 4 · answered Feb 21 '18 at 08:01

0

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

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

There you go!

answered Feb 21 '18 at 08:01

Muhammad Waleed Ghous

11
1

theAlexandrian · Answer 5 · 2018-02-21T08:28:22.383

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>

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

5 Answers5

Updated Codepen