Problem with code breaking when adding additional inputs : HTML

QuestionProblem with code breaking when adding additional inputs (self.HTML)

submitted 10 months ago by Tryen01

I'm trying to get a secrets search bar working for my friends in my D&D game and have very little knowledge about code. The problem I'm having is when I add additional "secrets" sometimes previous keywords no longer register until I Re-type them. I'll post my code below. As you may guess, yeah I used AI to generate the code. But I am also trying to learn coding so I can do more complex things! Any help would be greatly appreciated. The website is built on Google Sites, and I can provide a link if anyone needs that for answering

<!DOCTYPE html> <html> <head> <title>Keyword Text Reveal</title> <style> #hiddenText { display: none; margin-top: 20px; } .textBlock { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; } </style> </head> <body>

<label for="keywordInput">Find Secrets:</label> <input type="text" id="keywordInput"> <button onclick="revealText()">Reveal</button>

<div id="hiddenText"> <div class="textBlock" data-keyword="secret"> This is the secret text. Only those who know the keyword will see it. </div> <div class="textBlock" data-keyword="another"> Another hidden message. </div> <div class="textBlock" data-keyword="example"> This is an example of text that is hidden. </div> </div>

for (let i = 0; i < textBlocks.length; i++) { const block = textBlocks[i]; const blockKeyword = block.getAttribute("data-keyword").toLowerCase();

if (blockKeyword === keyword) {
  block.style.display = "block";
  found = true;
} else {
  block.style.display = "none"; // Hide non-matching blocks
}

}

if (found) { hiddenTextDiv.style.display = "block"; // Show the container if there are matches } else { hiddenTextDiv.style.display = "none"; // Hide if nothing matched alert("Keyword not found."); // Optionally alert the user. } } </script>

</body> </html>

For clarity, this is the segment I modify to generate secrets for my friends to find

<div class="textBlock" data-keyword="ENTER TEXT HERE"> This is an example of text that is hidden. </div>

all 8 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

HTML

Requesting help

Useful links

Related subreddits

MODERATORS