單擊另一個可單擊對象后使文本消失
[英]make text disappear after clicking another clickable object
問題描述
我正在為我的網站制作一個逃生室，我制作了一些可點擊的對象來顯示文本。 我的問題是，如何在單擊另一個可點擊項目后使文本消失？ 除了文本部分之外，我的代碼中的其他所有內容都按我喜歡的方式工作。 請幫忙
這是我到目前為止所擁有的。
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>
2 個解決方案
解決方案1
0 2022-05-24 22:46:35
您的請求似乎不可能通過簡單的答案，因為您正在使用console.log()顯示文本我認為不可能更新控制台中的各個輸出行。 文檔中的任何地方都沒有提到它。 您的簡單方法是在單獨的元素中顯示消息或文本，並根據需要使用最新文本更新該元素。 這是您的代碼現在的樣子。
在您的 html 中，將此代碼添加到您希望顯示消息的位置並根據需要設置樣式
<p id="text_message"></p>
在您的 javascript 代碼中，您應該替換console.log("your message"); 到這個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>
解決方案2
0 2022-05-24 23:18:51
["
console.log("normal text");
//bold, red foreground
console.log("\u001B[1;31m");
console.log("edited text");
單擊后使div消失
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.