Trying to make a game where a word submitted shows an element

Below is the code for a game. I am trying to manipulate the DOM using JS so when a player puts a word in a textbox (similiar to a comment box on a wordpress blog), a link shows up at the bottom of the page that was previously hidden. Here is what I got for click function, but I have not mastered the hide/show functions yet. Can any of you assist? I have searched for hide/show functions in js, but they seem to move in a direction I don’t want specifically.

 < script type="text/javascript">
        
        function hideshow(which){
        
        if (!document.getElementById)
        return
        if (which.style.display=="block")
        which.style.display="none"
        else
        which.style.display="block"
        
        }
        
        </script>
        
        <body>
        
        <a href="javascript:hideshow(document.getElementById('adiv'))">Click here</a>
        <div id="adiv" style="font:24px bold; display: block">Now you see me</div>
        
        
        </body>

Your function seems to be suffering from missing curly brackets and semicolons. Try this instead and it will work:

function hideshow(which)
  { if (!document.getElementById) { return; }
    //
    if (which.style.display=="block")
     { which.style.display="none"} 
    else { which.style.display="block"; }     
  } 

//
You can simplify the if/else block by using a ternary operator instead:

var result=(which.style.display=="block")? "none" : "block";
which.style.display=result;

I’d be tempted to make it more generic:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Toggle example</title>
    <style>
      .hidden{
        display: none;
      }
    </style>
  </head>
  <body>

    <a href="#" class="toggle">Click here</a>
    <div>Now you see me</div>
    <br>
    <a href="#" class="toggle">Click here</a>
    <div>Now you see me</div>
    <br>
    <a href="#" class="toggle">Click here</a>
    <div>Now you see me</div>

    <script>
      function toggle(el){
        var target = el.nextElementSibling;

        if(target.classList.contains("hidden")){
          target.classList.remove("hidden");
        } else {
          target.classList.add("hidden");
        }
      }

      var links = document.querySelectorAll(".toggle");
      for (i = 0; i < links.length; i++) {
        links[i].addEventListener("click", function(e){
          e.preventDefault();
          toggle(this);
        })
      }
    </script>
  </body>
</html>

I really appreciate your response, but I don’t think you understand my question. I’m not looking for a better way to do my code that I’ve shown. I am looking for the ability to type a response in a text box, hit a submit button and then have a hyperlink appear, can that be done with javascript? If so, how?

I have the code I have shown because I wanted to show any code I had that might help me work towards solving that problem. Again, the issue is me trying to get other code/functions that give a hyperlink if a user submits a required word into a textbox, not “please fix my current code.”

I assume that the link that will appear leads to other parts of the website.

  • How does the user know which words to type into the textbox?
  • Wouldn’t it be better to give them a list to choose from?
  • Why are these links hidden?
    Can you give an example of a word and the corresponding link that is generated?
1 Like

Very appropriate questions Allan,

My apologies for not making this clear earlier.

"I assume that the link that will appear leads to other parts of the website. "
Yes, exactly right.

"How does the user know which words to type into the textbox? "
The game will present highlighted words to the user in the text on the same page where they need to submit those words. This will allude to the user using those words to progress from page to page.

“Wouldn’t it be better to give them a list to choose from”
That’s not the direction I would like to take the game. These highlighted words will give a clue that these words can be used in a text box at the bottom of the page for submission (or this will be explained, more clearly at some other page of the game).

“Why are these links hidden?”
Think of this like those old DOS text-based games. For example, the screen will say “You find yourself in a cave with a troll and old axe near the entrance.” Then the user types “Swing axe at troll.” and then something happens, in this case, the troll dies and hidden link appears offering a pathway out of that webpage to another webpage, progressing the adventure further. You can’t get that link until the trolls dies, hence the need for JS conditionals and operators.

As a side note, I would love to make a canvas based game that mimics something like the retro NES version of The Legend of Zelda, but I don’t know HTML5 that well yet. My hope is that I can get better at this soon enough so I can.

“Can you give an example of a word and the corresponding link that is generated?”
Yes and no. I can create several “words” I was thinking about that mimics my above example. However, I am certain that code won’t look perfectly right nor work the way I want it to. But here goes:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Toggle example</title>
    <style>
      .hidden{
        display: none;
      }
    </style>
  </head>
  <body>

    <p>You enter a cave with a troll that sits next to an <b>axe</b>. You wonder if the troll will <b>attack</b>, <b>swing</b> or <b>hit</b> you but you quickly notice that it is asleep.</p>
    <a href="http://www.google.com" class="toggle">You see a cave opening that leads outside</a>
    <br>

    <script>

    var highlightedWord =  "hit" , "attack" , "swing";


      function toggle(hit, swing, attack){
        var target = el.nextElementSibling;

        if(target.classList.contains("hit")){
          target.classList.remove("hit");
        } else {
          target.classList.add("hit");
        }
      }

      if(target.classList.contains("attack")){
          target.classList.remove("attack");
        } else {
          target.classList.add("attack");
        }
      }

      if(target.classList.contains("swing")){
          target.classList.remove("swing");
        } else {
          target.classList.add("swing");
        }
      }

        })
      }
    </script>
  </body>
</html>

I have created a short example using your three target words that should help you to expand on the idea. The key words, with their associated href and text component that are used to create the links are stored in an array. The program looks up the key word in the array and then adds the information to the hidden link. The link is then revealed. In addition to the link, the html comprising the link is also shown for your information. It is not part of the game.
The program rejects unknown words. The array also holds a group number (grp:1) which you can use to keep track of which part of your story the keywords are in. It is not used in the example.

The JavaScript code for the game is shown here.

var keyWords=[];
keyWords[0]={grp:1, word:"attack", hRef:"attackPage.htm", txt:"You see a cave opening that leads outside" };
keyWords[1]={grp:1, word:"swing", hRef:"swingPage.htm", txt:"You lift your shield and block the blow" };
keyWords[2]={grp:1, word:"hit", hRef:"hitPage.htm", txt:"You drop to your knees and roll out of the way" };

// store word as property of the keyWords array
for(var i=0;i<keyWords.length;i++)
 { keyWords[keyWords[i].word]=keyWords[i]; }
// ----
 function getLink(obj)
  { var thisWord, thisHref, thisTxt, linkObj, codeViewObj, linkBlkObj; 
    linkObj=document.getElementById("pgLink");
    codeViewObj=document.getElementById("codeView");
    linkBlkObj=document.getElementById("linkBlk");
   //
    thisWord=obj.value.toLowerCase();
    if(typeof keyWords[thisWord]!="undefined")
      { thisHref=keyWords[thisWord].hRef;
        thisTxt=keyWords[thisWord].txt;
        linkObj=document.getElementById("pgLink");
        linkObj.href=thisHref;
        linkObj.innerHTML=thisTxt;
        codeViewObj.innerHTML="&lt;a href=&quot;"+thisHref+"&quot;&gt;"+thisTxt+"&lt;/a&gt";
        linkBlkObj.style.visibility="visible";        
       }
     else 
       { obj.value="";
         linkBlkObj.style.visibility="hidden";
         alert("No such word");
       }    
  }

The working program is here on JSFiddle

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.