I would like to change the content of a div. I have three divs:

 <div
      
      style="height: 200px; width: 200px; background-color: red"
    >
      A
    </div>
    <br />
    <div
      
      style="height: 200px; width: 200px; background-color: blue"
    >
      <label for="">tex</label>
      <input type="text" />
    </div>
    <br />
    <div
      
      style="height: 200px; width: 200px; background-color: yellow"
    >
      C
    </div>

when the page is ready the 2 and 3rd box displays none:

function hideElementBoxOnLoad() {
  let box1 = document.querySelector(".box1");
  let box2 = document.querySelector(".box2");
  let box3 = document.querySelector(".box3");

  box2.style.display = "none";
  box3.style.display = "none";
}

$(document).ready(hideElementBoxOnLoad);

I want a click that toggles the content of box2 and box3 into box1 and then back to box1 content:

function changeContent() {
  let chang = true;
  let box1 = document.querySelector(".box1");
  let box2 = document.querySelector(".box2");
  let box3 = document.querySelector(".box3");

  let box2Content = box2.textContent;
  let box3Content = box3.textContent;

  if (chang) {
    box1.textContent = box2Content;
    chang = !chang;
    if ((box1.textContent === box2Content)) {
      box1.textContent = box3Content;
    }
  }
}

let btn = document.getElementById("btn");
btn.addEventListener("click", changeContent);

So far it worked but it does not display the content of box2 only box3. what did i do wrong and what better way can i toggle with a boolean.

CodePudding user response：

See below

Instead of trying to swap content between each div just use JS to go through the array of them and swap an active class between them;

var boxes = document.getElementsByClassName('box');
        var change = document.getElementById('change');
        var counter = 0;

        change.addEventListener('click', function(){   
            boxes[counter].classList.remove('active');
            boxes[counter].nextElementSibling.classList.add('active');
            counter  ;

            if(counter === boxes.length) {
                counter = 0;
                boxes[0].classList.add('active');
            }
        });

.box {
            display: none;
            width: 100px;
            height: 100px;
            background-color: gray;
        }

        .box.active {
            display:block
        }

<div >A</div>
        <div >B</div>
        <div >C</div>

        <button id="change">Change Content</button>

CodePudding user response：

List of bugs :-

1. You had declared the var chang locally instead of globally, which make it true whenever you runs the function.
2. You are directly writing value from one tag to another, which causing the data loss, when you run your function second time.

For example :- When you click the button first time, the data is swapped, but for the second click, the data first div is lost and cannot be brought back...

Solution :- Store the data in an array in document.ready event handler and extract data from the array to update you html tags.

Now its your turn to fix these bugs

If you still stucked in the code, just leave a comment or update the Q. with your new code.

And I will try to code your code...

CodePudding user response：

im not completely sure if i understood ur question. but below u can see and even test with the snippet button.

the button now add what ever content in in the yellow box, and whats in the input field of the blue box into the red box. listing them downwards.

if you want to replace the content completely.

just change the logic to box1.innerHTML = spacer box3.innerHTML spacer input.value

this is the most simple way to do it thats easy to understand just by reading the code i think.

hope this helps!

function changeContent() {
    //the button
    const btn = document.getElementById("btn");

    //the boxes
    const box1 = document.getElementById("box1");
    const box2 = document.getElementById("box2");
    const box3 = document.getElementById("box3");
    //a spacer
    const spacer = "<br>";
    //the input field
    const input = document.getElementById("input");

    //logic
    box1.innerHTML  = spacer box3.innerHTML spacer input.value
}

div{
    border-radius: 5px;
    text-align: center;
    font-family: sans-serif;
}

#box1{
    min-height: 200px;
    width: 200px;
    padding: 5px;
    background-color: rgb(255, 73, 73);
}
#box2 {
    height: 200px;
    width: 200px;
    padding: 5px;
    background-color: rgb(0, 195, 255);
}
#box3 {
    height: 200px;
    width: 200px;
    padding: 5px;
    background-color: yellow;
}

button{
    padding: 3px;
    margin-top: 10px;
}

     <div id="box1">
         <p>contetnt A</p>
     </div>
     <br />
     <div id="box2" >
         <label for="">tex</label>
         <input id="input" type="text" />
         <button id="btn" onclick="changeContent()">click me</button>
     </div>
     <br />
     <div id="box3">
         contetnt C
     </div>