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

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 >
      <div  id="stats1">
        <div  id="stats1-title-amount">
          <div >
            Total Volume
          </div>
          <div >
            $20,000,000
          </div>
        </div>        
      </div>
      <div >
        <div  id="stats2a">
          <div  id="stats2a-title-amount">
            <div >
              Total gains
            </div>
            <div >
              15%
            </div>
          </div>          
        </div>
        <div  id="stats2b">
          <div  id="stats2b-title-amount">
            <div >
              Total Volume Traded
            </div>
            <div >
              $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;
}

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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
}