Dabby Posted June 30, 2013 Share Posted June 30, 2013 please what do i do to get the words typed in the box by the user to appear when the goMad button is clicked? e.g if the exclamation is Hey!, how do i get it to show? <!doctype html> <html lang="en"> <head> <title>Mad Lib</title> <meta charset="utf-8"> <script> window.onload = init; function init() { var button = document.getElementById("submit"); button.onclick = goMad; } function goMad() { var words = 0; var inputs = document.getElementsByTagName("input"); var story = words[0] + "! he said " + words[1] + " as he jumped into his convertible " + words[2] + " and drove off with his " + words[3] + " wife." for (var i = 0; i < inputs.length; i++) { var addendString = inputs.words; } var div = document.getElementById("story"); div.innerHTML = story; } </script> </head> <body> <p> This is a MadLib game. You are required to provide four words, an exclamation, an adverb, a noun, and an adjective. Fill in the box below and click the Go Mad button to reveal the sentence. </p> <form> <p> </p> <label for="exclamation">Exclamation:</label> <input id="exclamation" type="text" size="20"> <br> <p>He said,</p> <label for="adverb">Adverb:</label> <input id="adverb" type="text" size="20"><br> <p>as he jumped into his convertible</p> <label for="noun">Noun:</label> <input id="noun" type="text" size="20"><br> <p>and drove off with his</p> <label for="adjective">Adjective:</label> <input id="adjective" type="text" size="20"><br> <p>wife</p> <input type="button" id="submit" value="Go Mad!"> </form> <div id="story"> </div> </body> </html> Link to comment Share on other sites More sharing options...
jeffman Posted June 30, 2013 Share Posted June 30, 2013 (edited) This is basically OK. Your goMad() function needs work. These statements are all fine: var inputs = document.getElementsByTagName("input"); // the statements I deleted are not finevar div = document.getElementById("story");div.innerHTML = story; inputs is a collection, which works like an array. You can loop through it if you like, or you can access the elements directly, using an index, like this: inputs[0]. It looks like you were trying to do that with your words variable, but words is not a collection or an array, so it won't work like that. The way you tried to build your story variable is almost correct. A text input does not have a "words" property, so forget about that. You can find the text in the input in its value property, like this: inputs[0].value That should be all the information you need to fix your function. (Please do not double-post in the future. ) Edited June 30, 2013 by Deirdre's Dad Link to comment Share on other sites More sharing options...
Dabby Posted July 2, 2013 Author Share Posted July 2, 2013 So sorry i double posted. Didn't know i wasn't suppposed to. I'm learning Javascript newly and its still kind of confusing. I've edited my codes to this <!doctype html> <html lang="en"> <head> <title>Mad Lib</title> <meta charset="utf-8"> <script> window.onload = init; function init() { var button = document.getElementById("submit"); button.onclick = goMad; } function goMad() { var story = Var story = ["Hey", "comeon", "car", "pretty"]; var inputs = document.getElementsByTagName("inputs"); var div = document.getElementById("story"); var words = story.value; div.innerHTML = story; goMad = story.value; } </script> </head> <body> <form> <label for="exclamation">Exclamation:</label> <input id="exclamation" type="text" size="20"> <br> <label for="adverb">Adverb:</label> <input id="adverb" type="text" size="20"><br> <label for="noun">Noun:</label> <input id="noun" type="text" size="20"><br> <label for="adjective">Adjective:</label> <input id="adjective" type="text" size="20"><br> <input type="button" id="submit" value="Go Mad!"> </form> <div id="story"> [0] + "! he said " + [1] + " as he jumped into his convertible " + [2] + " and drove off with his " + [3] + " wife." </div> </body> </html> I'm thinking of an array Var story = ["Hey", "comeon", "car", "pretty"]; But i don't know how to plugs these words into the sentence(div story) that is revealed after the user clicks the Go Mad! button. Link to comment Share on other sites More sharing options...
jeffman Posted July 2, 2013 Share Posted July 2, 2013 Please choose. Are you going to use the inputs or an array? I've already explained how to use the inputs. If you want to store values in an array, then you don't need inputs, but you need a new kind of explanation. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now