In Javascript how can I add additional statements to a function change()?

Question

I believe there may be a simple solution to what I am looking for using Javascript. How can I add additional statements if my function change(name) is equal to a specific ID? For example:

function change(name) {
document.getElementById('Rectangle-container').style.display = 'none';

/* These require adding because the function's change(name) ID = Rectangle-container */

document.getElementById("ResultsTotalLiters").innerHTML = RectangleTotalLiters; 
document.getElementById("ResultsTurnoverTime").innerHTML = RectangleTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = RectangleTotalTurnovers

/* if the change is made so the active ID is oval-container, then 3 different statements need adding like so: */
document.getElementById('Oval-container').style.display = 'none';
document.getElementById("ResultsTotalLiters").innerHTML = OvalTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = OvalTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = OvalTotalTurnovers;

/**/
document.getElementById('Round-container').style.display = 'none';

/**/
document.getElementById('Oblong-container').style.display = 'none';
document.getElementById(name).style.display='block';
}

These need adding to the rectangle-container

document.getElementById("ResultsTotalLiters").innerHTML = RectangleTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = RectangleTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = RectangleTotalTurnovers;

These need adding to the oval-container

document.getElementById("ResultsTotalLiters").innerHTML = OvalTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = OvalTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = OvalTotalTurnovers;

Need adding to the round-container

document.getElementById("ResultsTotalLiters").innerHTML = RoundTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = RoundTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = RoundTotalTurnovers;

Need adding to the oblong-container

document.getElementById("ResultsTotalLiters").innerHTML = OblongTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = OblongTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = OblongTotalTurnovers;

Answer 1

You should change your variables such that each type of shape variable is contained in an object rather than being a standalone variable. For example, instead of

RectangleTotalLiters
RectangleTurnoverTime
RectangleTotalTurnovers

OvalTotalLiters;
OvalTurnoverTime;
OvalTotalTurnovers;

// ...

you might consider an object structure like

const shapeInfo = {
  Rectangle: {
    totalLiters: <something>,
    turnoverTime: <something>,
    totalTurnovers: <something>,
  },
  Oval: {
    totalLiters: <something>,
    turnoverTime: <something>,
    totalTurnovers: <something>,
  },
  // ...
}

Then, you can write significantly DRY-er code:

const { totalLiters, turnoverTime, totalTurnovers } = shapeInfo[PoolShape];
/* assign to #ResultsTotalLiters, #ResultsTurnoverTime, #ResultsTotalTurnovers

For your change function, you might have a persistent array of all possible shapes, forEach over it, and hide the element if the id does not match name:

const shapes = ['Rectangle', 'Oval', 'Round', 'Oblong'];
function change(name) {
  shapes.forEach(id => {
    if (name !== id) document.getElementById(id).style.display = 'none';
  });
  document.getElementById(name).style.display = 'block';
}