changing the content of a div - Jquery

Dave
August 17, 2022
74 views
3 votes
3 Answers

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

 <div
      class="box1"
      style="height: 200px; width: 200px; background-color: red"
    >
      A
    </div>
    <br />
    <div
      class="box2"
      style="height: 200px; width: 200px; background-color: blue"
    >
      <label for="">tex</label>
      <input type="text" />
    </div>
    <br />
    <div
      class="box3"
      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.

Answers

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 class="box active">A</div>
        <div class="box">B</div>
        <div class="box">C</div>

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

List of bugs :-

You had declared the var chang locally instead of globally, which make it true whenever you runs the function.
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.

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

  content = [box1.textContent, box2.textContent, box3.textContent];

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

var content = [];
window.onload = (hideElementBoxOnLoad);

var index = 0;

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;
      }
    }
   */

  function cycle(n, x = 0, y = content.length - 1, a = 1) {
    n += a;
    if (n > y) return x;
    if (n < x) return y;
    return n;
  }

  index = cycle(index);
  box1.textContent = content[index];

}

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

<button id="btn"> CLICK ME </button>

Explaination

Here I first stored the tags textContent in a array content, in the starting of the code.

Then, inside the button click handler, a simple cycle function to cycle on the values stored inside the content array.

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>

Please signup or login to give your own answer.

Click here to cancel reply.

changing the content of a div – Jquery

Answers