1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Total Noob - elements not showing on page until after prompts answered

Discussion in 'HTML & Website Design' started by YoNoSabe, Oct 29, 2017.

  1. #1
    Hello everyone, and sorry to kick things off with what must be a minor annoyance for most of you. I'm trying to learn how to change existing data on a page according to prompted input. The problem is the existing data doesn't display when the page loads, so all you see are the changes after the prompts are answered. Can someone tell me what I'm doing wrong...and sorry if I'm not asking this in the right place.
    SEMrush

    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset = "utf-8">
            <title>testing</title>
        </head>
      
        <body>
            <div>
            <h1 id = "name">Chucky</h1>
            <h2 id = "gender">male</h2>
            <img id = "pic" src = "http://www.netanimations.net/Animated-gif-spinning-question-mark-picture-moving.gif"
                 alt = "alt description">
          
            <p>Two best friends:</p>
                <ol>
                    <li id = "friend1">Freddy Kruger</li>
                    <li id = "friend2">Not Trump</li>
                </ol>
          
            </div>      
            <script>
                //Get user answers to change existing
                document.getElementById("name").innerHTML = prompt("What's your name: ");
                document.getElementById("friend1").innerHTML = prompt("Best friend: ");
                document.getElementById("friend2").innerHTML = prompt("2nd best friend: ");
                var maleFemale = prompt("Are you male or female: ");
              
                // conditional image change
                if(maleFemale == 'male'){
                    document.getElementById("pic").src = "https://raddezigns-raddezigns.netdna-ssl.com/decal_pics/10083_Black.jpg";
                    document.getElementById("gender").innerHTML = "male";
                } else{
                    document.getElementById("pic").src = "https://i.pinimg.com/originals/c0/84/90/c0849057038a8aceade8e54c086b7b2c.jpg";
                    document.getElementById("gender").innerHTML = "female";
                  }
            </script>  
        </body>
    
    </html>
    
    Code (markup):
     
    Solved! View solution.
    YoNoSabe, Oct 29, 2017 IP
    SEMrush
  2. #2
    The page works this way because you ask it to display prompts every time page loads.

    If you want to display these prompts only after some event, you should add a submit button (or another element you like) which will trigger these prompts only after user clicks the button. Then just use "onclick" event to trigger these prompts - https://www.w3schools.com/jsref/event_onclick.asp
     
    phpmillion, Oct 30, 2017 IP
  3. YoNoSabe

    YoNoSabe Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thanks. worked great
     
    YoNoSabe, Oct 31, 2017 IP