how do i run a javascript function that can interchange text from two different divs?

Question

so i am building a defi app. it has three divs at the top and a table below(there is a main div which is larger than the other 2). i want to make so when i click on one div it becomes the main div and all the text from the large one switches to one of the smaller box. so far i can only move text from div 1 to div 2 but cant figure out how to move text from div 2 to div 1 in the same onclick event. please help.

<div class="row stats-row border rounded">
      <div class="col-8 stats1" id="stats1">
        <div class="stats1-title-amount" id="stats1-title-amount">
          <div class="stats1-title">
            Total Volume
          </div>
          <div class="stats1-amount">
            $20,000,000
          </div>
        </div>        
      </div>
      <div class="col-4">
        <div class="row stats2a border rounded" id="stats2a">
          <div class="stats2a-title-amount" id="stats2a-title-amount">
            <div class="stats2-title">
              Total gains
            </div>
            <div class="stats2-amount">
              15%
            </div>
          </div>          
        </div>
        <div class="row stats2b border" id="stats2b">
          <div class="stats2b-title-amount" id="stats2b-title-amount">
            <div class="stats2-title">
              Total Volume Traded
            </div>
            <div class="stats2-amount">
              $1,500,560
            </div>
          </div>          
        </div>
      </div>
    </div>

document.getElementById('stats2a').addEventListener('click', function(){
    changePage1();
    changePage2();
});

function changePage1 () {
    document.body.style.background = 'red';
    document.getElementById('stats1-title-amount').innerText = document.getElementById('stats2a-title-amount').innerText;
}

function changePage2 () {
    document.body.style.background = 'red';
    document.getElementById('stats2a-title-amount').innerText = document.getElementById('stats1-title-amount').innerText;
}

Answer 1

Use this:

document.getElementById('stats2a').addEventListener('click', function(){
    const page1 = getpage1text();
    const page2 = getpage2text();
    changePage1(page2);
    changePage2(page1);
});

function getpage1text(){
  return(document.getElementById('stats1-title-amount').innerText);
}
function getpage2text(){
  return(document.getElementById('stats2a-title-amount').innerText);
}
function changePage1 (text) {
    document.body.style.background = 'red';
    document.getElementById('stats1-title-amount').innerText = text;
}

function changePage2 (text) {
    document.body.style.background = 'red';
    document.getElementById('stats2a-title-amount').innerText = text;
}

Answer 2

document.getElementById('stats2a').addEventListener('click', function(){
    let tmp = document.getElementById('stats1-title-amount').innerText;
    document.getElementById('stats1-title-amount').innerText = document.getElementById('stats2a-title-amount').innerText;
    document.getElementById('stats2a-title-amount').innerText = tmp;

    document.body.style.background = 'red';
});

The problem you had is that you set the value of stats1 to the value stats2, and after that you set stats2 to stats1. These run one after each, you cannot run them at the same time, so in the second assignment the stats2 is already overwritten by the first assignment, so you have to store one of the values in a variable temporarily.

Answer 3

you can just define visibiliy for each div instead of moving content :

var visible = true;
function(){
    document.getElementById('div1').style.visibility = visible ? 'hidden' : 'visible'; // use short if/else to decide which value to user
    document.getElementById('div2').style.visibility    = visible ? 'visible' : 'hidden'; // short if/else is called ternairy
    visible = !visible; // reverse the value of itself
}