Sign in to follow this  
G-Man

Make textbox that if value is true displays a fix sentence

Recommended Posts

Hi everybody,

my question ist propably easy-pupeasy for all of you, but I'm a writer, not a coder and so for me it's like rocket science. Anyway: I'm making a branch-narrative game at the moment and I want to put in a simple textfield where players have to insert a codeword (e.g. Hamster). If they put it in correctly then I want a sentence to appear afterwards. (e.g. Hamster indeed! Good job)

If got this far (pretty awesome - I know):

<form>
  Codeword:<br>
  <input type="text" name="Codeword"><br>
</form>
 
Thank you very much for your help
G

Share this post


Link to post
Share on other sites

You can use DOM api to grab the value of the text field and also to apply a handler when that input changes

<input class="js-input" type="textfield" placeholder="what is small and furry?" />
var input = document.querySelector( '.js-input' )

function onInputChange( event ) {
  if ( input.value.toLowerCase() === 'hamster' ) {
    alert( 'boom, it is small and furry' )
  }
}

input.addEventListener( 'input', onInputChange )

Everytime there is an input event on the textfield the function will fire, it grabs the current value of the textfield, converts it to lower case (so that we have case-insensitive matching) and checks if it is equal to a certain value, if it is then, in this case, it triggers an alert (you want to append a string into the DOM, but I'll leave that for you to figure out, Google can help :) )

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.