how do Replace div to another div from div's it self in Javascript

Question

I have this code and I want to replace every div whenever i click the div

function show(par, param_div_id) {
  document.getElementById(par).innerHTML = document.getElementById(param_div_id).innerHTML;
}

<div id="main_place1" style="display:none" onclick="show('main_place1','one')">
  main
</div>

<div id=one style="display:none" onclick="show('one','two')">
  one
</div>

<div id=two style="display:none" onclick="show('two','three')">
  two
</div>

<div id=three style="display:none" onclick="show('three','main_place1')">
  three
</div>

the problem is div cannot replace from "one" to "two" or "two" to "three" it only works from "main_place1" to "one"... how to make it works?? i need somebody help

@YasinYousif Quotes are only required around attribute values when the value contains a space. While I put quotes around all attribute values, myself personally, it's not incorrect and would not contribute to the issue here. — Scott Marcus, Nov 03 '17 at 17:25
@DBS div was set not display couse, i only want to display "main_place1" when the form is load for the first time, in my case I can replcae from "main_place1" to "one", its mean there is no problem with display none i think. — Indra suandi, Nov 03 '17 at 17:31
What @DBS is trying to tell you is that you've got all the `div` elements set up to be hidden by default. If they are all hidden, then there is nothing to click on. `main_place1` must not be hidden by default if that's the one you want to show at first. — Scott Marcus, Nov 03 '17 at 17:56

Scott Marcus · Accepted Answer · 2017-11-03T18:52:15.330

Don't set up events with HTML event attributes. Here's why.

Also, don't use inline styles when you can use classes. Classes are reusable and don't clutter up the code. They also are easier to work with in JavaScript.

See comments inline for additional details:

// Get all the div elements to be cycled through into a node list
var divs = document.querySelectorAll(".cycle");

// Loop through each div in the array...
for(let i = 0; i < divs.length; i++) {

  // Assign a callback function for the click event of the div
  divs[i].addEventListener("click", function(){

    divs[i].classList.toggle("hidden"); // Hide the current div
  
    // Check to see if there is another div after the current one
    if(i < divs.length -1){
      divs[i+1].classList.toggle("hidden"); // Hide the next div
    } else {
      divs[0].classList.toggle("hidden"); // Hide the first div
    }

  });

}

/* Everything that should not be seen by default
   should have this class set up on it in the HTML */
.hidden { display:none; }

/* Just for fun */
.cycle { 
  background-color:aliceblue;
  font-family:Arial, Helvetica, sans-serif;
  font-size:2em;
  box-shadow:2px 2px #e0e0e0;
  width:50%;
  padding:1em;
  user-select:none;
  cursor:pointer;  /* Let user know they can click on the element */
}

<div id="main_place1" class="cycle">main</div>
<div id="one" class="hidden cycle">one</div>
<div id="two" class="hidden cycle">two</div>
<div id="three" class="hidden cycle">three</div>

Now, depending on what the content of each div is supposed to be, it may be simpler to use just one div that is always visible, but upon each click, just replace the contents of that div. The content could be stored in an array. This would not only be simpler in terms of not having to worry about toggling the display of the various div elements, but it would be more efficient.

/* This code should be placed inside of a <script> element that comes
   just before the closing body tag (</body>) */
   
// Content for the div is stored here:
var content = ["main", "one", "two", "three"];

// Get reference to the div that will hold the content
var div = document.querySelector(".cycle");

var contentIndex = 0;  // Represents which element in the array is currently displayed

// Initialize the default content of the div
div.textContent = content[contentIndex];

// Assign a callback function for the click event of the div
div.addEventListener("click", function(){

  // Increment the contentIndex unless we are at the end of the array
  contentIndex = (contentIndex < content.length - 1) ? ++contentIndex : 0;

  // Set the content to the appropriate value
  div.textContent = content[contentIndex];

});

/* Just for fun */
.cycle { 
  background-color:aliceblue;
  font-family:Arial, Helvetica, sans-serif;
  font-size:2em;
  box-shadow:2px 2px #e0e0e0;
  width:50%;
  padding:1em;
  user-select:none;
  cursor:pointer;  /* Let user know they can click on the element */
}

<div id="main_place1" class="cycle"></div>

thanks,, its so great, i ran your code in snippet it works done,, but when i copy all of your code to my project cannot running well, the javascript cannot works, i dont know why — Indra suandi, Nov 04 '17 at 13:50
why it doesnt run if I copy all of your code,, but when i ran it on snippet it works fine @scott Marcus — Indra suandi, Nov 04 '17 at 13:58
@Indrasuandi As my comment at the beginning of the JavaScript says, you must place all of the JavaScript inside of `` tags and place that just before the closing of the `body` element. Also, what does the Console of your developer tools (F12) say? — Scott Marcus, Nov 04 '17 at 15:06
yes it is perfectly works, thanks for your help @Scott Marcus — Indra suandi, Nov 04 '17 at 15:22

how do Replace div to another div from div's it self in Javascript

1 Answers1