How to completely change the contents of a div onclick?

Question

I'm only starting to delve into javascript and have no real knowledge of how to work with jQuery, but I'm working on a page which features a control panel. I'm trying to get the functions of the control panel to change on clicking a button on it.

Here's what I have so far;

html:

<div id="functions">
  <button id="prob" onclick="myproblem()" type="button" title="prob"></button>
  <button id="button1" onclick="works1()" type="button" title="button1"></button>
  <button id="button2" onclick="works2" type="button" title="button2"></button>
</div>

Javascript:

function myproblem() {
document.getElementById("functions").html('
  <button id="prob" onclick="myproblem()" type="button" title="prob"></button>
  <button id="button3" onclick="works3()" type="button" title="button3"></button>
  <button id="button4" onclick="works4()" type="button" title="button4"></button>');
}

The button I want to use to change the html is contained within the div which is getting changed. There are other onclick functions in that div which were working fine until I wrote the myproblem() code into my js file. With that section of code there, none of my js works.

This is a localhosted page, it won't be online.

I'm assuming I need to use jQuery to pull this off, but I have no idea how.

Thanks,

jQuery is a javascript library, which means it can only do what javascript can do. So to say *I need to use jQuery* in the sense that this is the only way, is not correct. — Taplar, May 23 '18 at 16:40
You might check your browser console for errors and do some troubleshooting. Also see [Creating multiline strings in JavaScript](https://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript) and [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML). — showdev, May 23 '18 at 16:58

score 3 · Accepted Answer · edited May 23 '18 at 16:46

3

Use the innerHTML() method in JavaScript:

function myproblem() {
    document.getElementById("functions").innerHTML ='<button id="prob" onclick="myproblem()" type="button" title="prob"></button> <button id="button3" onclick="works3()" type="button" title="button3"></button> <button id="button4" onclick="works4()" type="button" title="button4"></button>'
}

In Jquery you can use the html method

$(".functions").html('Your html code goes here')

edited May 23 '18 at 16:46

Ivan

34,531
8
55
100

answered May 23 '18 at 16:38

Nandita Sharma

13,287
2
22
35

Incidentally, `innerHTML` does not accept parameters (parentheses). jQuery's `html()`, on the other hand, does need parentheses. – showdev May 23 '18 at 17:03
Thank you. Got it using the innerHTML() JavaScript method. Took me a while, the whole js was still not working for a while, until I figured out that it was trying to format that innerHTML with line breaks that was messing me up. Once I rectified that, your js worked perfectly. – Slewth May 28 '18 at 11:58

Tan Ory Jaka Perdana · Answer 2 · 2018-05-23T18:16:27.667

<div class="temp01" style="display:none">
   <button id="prob" onclick="myproblem('temp02')" type="button" title="prob"></button>
   <button id="button1" onclick="works1()" type="button" title="button1"></button>
   <button id="button2" onclick="works2" type="button" title="button2"></button>
</div>
<div class="temp02" style="display:none">
   <button id="prob" onclick="myproblem('temp01')" type="button" title="prob"></button>
   <button id="button3" onclick="works3()" type="button" title="button3"></button>
   <button id="button4" onclick="works4()" type="button" title="button4"></button>
</div>
<div class="functions">
   <button id="prob" onclick="myproblem('temp02')" type="button" title="prob"></button>
   <button id="button1" onclick="works1()" type="button" title="button1"></button>
   <button id="button2" onclick="works2" type="button" title="button2"></button>
</div>

<script>
   function myproblem(x){   //x could be "temp01" or "temp02"
        $(".functions").html("");
        $("." + x).clone().attr("id","functions").show().appendTo(".functions");
   }
</script>

How to completely change the contents of a div onclick?

2 Answers2