make text disappear after clicking another clickable object-CodePudding

I am making an escape room for my website, I have made a few clickable objects that will display a text. My question is, how do I make text go away after clicking on another clickable item? Everything else in my code works just how I like it except for the text part. Please help

Here is what I have so far.

var hasBluekey = false;
var doorknob = "locked"
var comboLock = "locked"



function tryDoor() {
  console.log("You clicked the door");
}

function lookhelp() {
  console.log("You clicked on help");
  let text = "Who needs help?";
  document.getElementById("thehelp").innerHTML = text;

}

function lookClue() {
  console.log("You clicked on the clue");
  let text = "Hmm, there are letters and numbers circled...";
  document.getElementById("theclue").innerHTML = text;
}

function moveTable() {
  console.log("You clicked on the table");
  let text = "You carefully move away the table with the broken vase";
  document.getElementById("thetable").innerHTML = text;
  document.getElementById("table").style.display = "none";
}




function tryDoorknob() {
  console.log("You clicked the doorknob")
  if (hasBluekey == true) {
    doorknob = "unlocked";
    alert("The doorknob is now unlocked");
    checkRoom();
  } else {
    alert("You need a key");
  }


}

function tryComboLock() {
  console.log("You clicked the combo lock");
  var comboTry = prompt("You enter the combination...");
  if (comboTry == "AV70") {
    comboLock = "unlocked";
    alert("The combination was correct");
    checkRoom();
  } else {
    alert("The combination was incorrect");
  }

}

function grabBluekey() {
  console.log("You clicked the blue key");
  hasBluekey = true;
  alert("You picked up the key");
  document.getElementById("bluekey").style.display = "none";

}

function checkRoom() {
  if (doorknob == "unlocked") {
    if (comboLock == "unlocked") {
      document.getElementById("next").style.visibility = "visible";
    } else {
      alert("You push on the door but still need a combination");
    }
  } else {
    alert("You try to turn the door knob but is still locked");
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div id="room">
    <img id="door" src="door1.png" onclick="tryDoor()">
    <img id="doorknob" src="doorknob1.png" onclick="tryDoorknob()">
    <img id="comboLock" src="comboLock.png" onclick="tryComboLock()">
    <img id="bluekey" src="blue_key.png" onclick="grabBluekey()">
    <img id="clue" src="clue.png" onclick="lookClue()">
    <img id="help" src="help.png" onclick="lookhelp()">
    <img id="bloodMark" src="bloodMark.png">
    <img id="table" src="table.png" onclick="moveTable()">
    <img id="window" src="window.png">
    <p id="thehelp"></p>
    <p id="theclue">
    </P>
    <p id="thetable"></p>
  </div>
  <button id="next" onclick="window.location.href 
        ='room2.html';">Proceed</button>
</body>

</html>

CodePudding user response：

Your request seem impossible with an easy answer because you are displaying the text with console.log() I don't think it is possible to update individual lines of output in the console. It is not mentioned anywhere in the documentation. Your easy way out is to display the message or text in a separate element and update that element with the latest text as required. Here is how your code should look like now.

in your html add this code where you want the message to be displayed and style it however you want

  <p id="text_message"></p>

And in your javascript code you should replace the console.log("your message"); to this text_message.innerHTML = "your message";

var hasBluekey = false;
var doorknob = "locked"
var comboLock = "locked"



function tryDoor() {
text_message.innerHTML = "You clicked the door";
}

function lookhelp() {
text_message.innerHTML = "You clicked on help";
  let text = "Who needs help?";
  document.getElementById("thehelp").innerHTML = text;

}

function lookClue() {
text_message.innerHTML = "You clicked on the clue";
  let text = "Hmm, there are letters and numbers circled...";
  document.getElementById("theclue").innerHTML = text;
}

function moveTable() {
text_message.innerHTML = "You clicked on the table";
  let text = "You carefully move away the table with the broken vase";
  document.getElementById("thetable").innerHTML = text;
  document.getElementById("table").style.display = "none";
}




function tryDoorknob() {
text_message.innerHTML = "You clicked the doorknob";
  if (hasBluekey == true) {
    doorknob = "unlocked";
    alert("The doorknob is now unlocked");
    checkRoom();
  } else {
    alert("You need a key");
  }


}

function tryComboLock() {
text_message.innerHTML = "You clicked the combo lock";
  var comboTry = prompt("You enter the combination...");
  if (comboTry == "AV70") {
    comboLock = "unlocked";
    alert("The combination was correct");
    checkRoom();
  } else {
    alert("The combination was incorrect");
  }

}

function grabBluekey() {
  text_message.innerHTML = "You clicked the blue key";
  hasBluekey = true;
  alert("You picked up the key");
  document.getElementById("bluekey").style.display = "none";

}

function checkRoom() {
  if (doorknob == "unlocked") {
    if (comboLock == "unlocked") {
      document.getElementById("next").style.visibility = "visible";
    } else {
      alert("You push on the door but still need a combination");
    }
  } else {
    alert("You try to turn the door knob but is still locked");
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <p id="text_message" style="background-color:grey;color:white;"></p>
  
  <div id="room">
    <img id="door" src="door1.png" onclick="tryDoor()">
    <img id="doorknob" src="doorknob1.png" onclick="tryDoorknob()">
    <img id="comboLock" src="comboLock.png" onclick="tryComboLock()">
    <img id="bluekey" src="blue_key.png" onclick="grabBluekey()">
    <img id="clue" src="clue.png" onclick="lookClue()">
    <img id="help" src="help.png" onclick="lookhelp()">
    <img id="bloodMark" src="bloodMark.png">
    <img id="table" src="table.png" onclick="moveTable()">
    <img id="window" src="window.png">
    <p id="thehelp"></p>
    <p id="theclue">
    </P>
    <p id="thetable"></p>
  </div>
  <button id="next" onclick="window.location.href 
        ='room2.html';">Proceed</button>
</body>

</html>

CodePudding user response：

You could try to use ANSI escape codes -- they are really useful for formatting text in a terminal after it's been printed. For this you would want to use cursor controls and erase functions. these are from this tutorial, which was very helpful for a project I made a while ago. Not all of them work on every platform (e.g. replit, not sure if anyone actually uses that though) but overall it's a good system.