Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Thanked 0 Times in 0 Posts

    Question Problem with alert("+userinput+")

    I'm attempting to create a basic HTML page with a javascript function that is essentially, a mad libs page.
    The user is to enter information in text boxes or radio buttons. The stage I am currently at is to show all of the information collected into an alert(Hello "+name+"! You've chosen: [enter each piece of information collected])

    At this time, I have the text boxes, radio buttons, variables, and the alert showing up.
    However, upon clicking the "begin story" button, my alert box is showing: Hello undefined! You've chosen: undefined, undefined, etc.

    Could somebody help point out where I'm making an error? I have checked it with the developer tools on Chrome, but I'm not getting any errors.

    The code is:

    <!-- The purpose of this step is to add the code to the new function so that it will create our story.
    Add JavaScript statements to your function to collect all the information from each form element.
    Display the user’s information in one alert function.
    For Example: ”Hello [name], your story values are [title], [vegetable], [adjective], [number #1], [number #2]” -->
    <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    <html xmlns="http://www.w3.org/1999/xhtml">
    <title>Story Time!</title>
    <script type="text/javascript">

    function beginstory() {

    alert("welcome "+name+". you have chosen: "+title+" "+hobby+" "+adjective+" "+number1+" ");
    var name=(document.getElementById('username').value);
    var title = document.getElementById("storytitle").value;
    var hobby = document.getElementById("hobby").value;
    var adjective = document.getElementById("adjective").value;
    var number1 = document.getElementById("number1").value;
    var number2 = document.getElementById("number2").value;
    var trex = document.getElementById("trex").value;
    var steg = document.getElementById("steg").value;
    var diplod = document.getElementById("diplod").value;
    var crazy = document.getElementById("crazy").value;
    var charming = document.getElementById("charming").value;
    var curious = document.getElementById("curious").value;
    var he = document.getElementById("he").value;
    var she = document.getElementById("she").value;
    var ze = document.getElementById("ze").value;
    var jurassic = document.getElementById("jurassic").value;
    var colonial = document.getElementById("colonial").value;
    var twenty = document.getElementById("twenty").value;


    <body style=font-family:verdana>

    <form id="story" action="">

    What is your name? <input type="text" name="storyelements" id="username"><br>
    What is the title of your story? <input type="text" name="storyelements" id="storytitle"><br>
    Name a hobby: <input type="text" name="storyelements" id="hobby"><br>
    Name an adjective trait: <input type="text" name="storyelements" id="adjective"><br>
    Name a number greater than one: <input type="text" name="storyelements" id="number1"><br>
    Name another number greater than one: <input type="text" name="storyelements" id="number2"><br>

    Choose a dinosaur: <input type="radio" name="dinosaur" id="trex">Tyrannosaurus Rex
    <input type="radio" name="dinosaur" id="steg">Stegosaurus
    <input type="radio" name="dinosaur" id="diplod">Diplodocus<br>

    Choose a personality trait: <input type="radio" name="trait" id="crazy" checked="checked">Crazy
    <input type="radio" name="trait" id="charming">Charming
    <input type="radio" name="trait" id="curious">Curious<br>

    Choose your preferred pronoun: <input type="radio" name="pronoun" id="he" checked="checked">He
    <input type="radio" name="pronoun" id="she">She
    <input type="radio" name="pronoun" id="ze">Ze<br>

    Choose an era: <input type="radio" name="era" id="jurassic" checked="checked">Jurassic
    <input type="radio" name="era" id="colonial">Colonial
    <input type="radio" name="era" id="twenty">The 1920s<br>
    <!-- BUTTONS -->
    <input type="button" onclick="beginstory()" name="storytime" value="Start Your Story!"></button><br>
    <input type="reset" name="clearform" value="Clear Form">



    Thank you very much for taking the time to take a look!

  2. #2
    Regular Coder
    Join Date
    Jan 2013
    Sunnyvale, CA
    Thanked 10 Times in 10 Posts
    Your variables, i.e. name, title, hobby... need to be declared in your function before they are referenced, hence they remain 'undefined'.

    Initialize and instantiate your variables when the function is initially called, prior to the alert statement:

    function beginstory() {
    /*Instantiations and initializations:*/
    var name = document.getElementById(...),
    title = document.getElementById(...),
    hobby = document.getElementById(...),
    adjective = document.getElementById(...),
    number1 = document.getElementById(...);

    alert("welcome "+name+". you have chosen: "+title+" "+hobby+" "+adjective+" "+number1+" ");

    Also, note that I comment the Instantiations and initializations and Process sections, and use a single var declaration to instantiate and initialize all variables together. Documentation/readability is a required best-practice, and a single var will perform much faster than instantiating each variable with its own var statement.
    Last edited by sbhmf; 07-27-2013 at 06:21 AM. Reason: fixed a typo

  3. Users who have thanked sbhmf for this post:

    kgk496 (07-30-2013)

  4. #3
    New Coder
    Join Date
    Jul 2013
    Thanked 2 Times in 2 Posts
    you just didnot initialize your variables,apart from that the code looks fine to me...

  5. #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Sydney, Australia
    Thanked 932 Times in 919 Posts
    Also alert() is for debugging only - you should put any live output into the web page itself.

    You also need to move your JavaScript - all scripts with very few exceptions belong just before the </body> tag.
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  6. #5
    New to the CF scene
    Join Date
    Jul 2013
    Thanked 0 Times in 0 Posts
    Thank you guys!


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts