[FIXED] How to deactivate the output of one function when other is activated?

Issue

So, doing an exercise I found myself facing another problem that I cannot solve. In particular, I have 2 functions: one gives me a red square as an output, while the other gives me a blue square as an output. My task is to:

1. Make sure that by clicking on the button to call up a function, it is only called once. So, clicking 10 times on the button to call the function that gives me the blue square, the blue square must appear only once.
2. By clicking on the button to call up the function that gives me the red square, the blue square must disappear and the red square must appear. This too must appear only once, regardless of the number of times the user clicks on it. Then, if clicking on the button to call the blue square, the red must disappear and the blue must appear.

Unfortunately, I can't understand the logic I should write. I guess I should associate each function with an attribute (on / off) or something like that. So when the user clicks on the button to bring up the blue square, it will appear once and when they click on the button to bring up the red square, it will appear. If the user then wants to return to the blue square again, it will have to appear again. In short, the mechanism seems to me very similar to turning the light off / on, or something like that, but unfortunately I can't understand what kind of logic I should implement. Or should I write a new function to activate / deactivate the already existing functions? And how to make sure that with the click the function is activated only once and not 3-4-5? Could anyone help me please?

My HTML code:

<button onclick="getRedSquare()">Get the Red Square!</button> 
<button onclick="getBlueSquare()">Get the Blue Square!</button>

My JavaScript 2 functions:

async function getRedSquare() {
  const square = document.createElement("square");
  document.body.append(square);
  squares.style.cssText = "background-color: red; width: 1200px; height: 1200px; margin: auto; margin-top: 12.5%";
}


async function getBlueSquare() {  
  const square = document.createElement("square");
  document.body.append(square);
  squares.style.cssText = "background-color: blue; width: 1200px; height: 1200px; margin: auto; margin-top: 12.5%";
}

Solution

So, a few things:

1. nothing you are doing here is async, so you don't need to add that to your function declarations.

2. when you create a new element, the term "square" supplied to document.createElement("square") will not be recognised. While this won't cause a malfunction, you will be creating and attaching an element of type HTMLUnknownElement to your document. It might be better to use a known element type. "div" would be appropriate.

let's give these created elements an id attribute:

const square = document.createElement("square");
square.setAttribute("id", "red-square")
document.body.append(square);

so now we can find them on the page with

const redSquare = document.getElementById("red-square")

and then remove it from the page if it exists:

if(redSquare){
    redSquare.remove()
}

Let's put it altogether:

function getRedSquare() {
  const blueSquare = document.getElementById("blue-square");
  if (blueSquare) {
    blueSquare.remove()
  }
  if (document.getElementById("red-square") != null) {
    // red-square is already on page, abort
    return;
  }
  const square = document.createElement("div");
  square.setAttribute("id", "red-square");
  document.body.append(square);
  square.style.cssText = "background-color: red; width: 120px; height: 120px; margin: auto; margin-top: 12.5%";
}


function getBlueSquare() {
  const redSquare = document.getElementById("red-square");
  if (redSquare) {
    redSquare.remove()
  }
  if (document.getElementById("blue-square") != null) {
    // blue-square is already on page, abort
    return;
  }
  const square = document.createElement("div");
  square.setAttribute("id", "blue-square");
  document.body.append(square);
  square.style.cssText = "background-color: blue; width: 120px; height: 120px; margin: auto; margin-top: 12.5%";
}

<button onclick="getRedSquare()">Get the Red Square!</button>
<button onclick="getBlueSquare()">Get the Blue Square!</button>

Answered By - spender

Answer Checked By - Gilberto Lyons (PHPFixing Admin)