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. <!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):
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