javascript arrays and looping -
i'm jessi , i'm web development student. i'm trying write program arrays , i'm stuck. have array of phrases , when user enters number between 1 , 10 supposed show many phrases on screen i'm stuck. don't know how display multiple results on screen. i'd appreciate help. thanks.
<!doctype html> <html> <head> <title>get response</title> </head> <body> <form> <h1>select how many phrases want displayed.</h1> <input type="number" class="userinput"></input> <button type="submit" value="submit" onclick="showme()"></button> </form> <div class="myphrases"> </div> <script src="js/main.js"></script> </body> </html> ////////////////// javascript function showme() { var number = document.queryselector('.userinput').value; var display = ""; var phrases = [ "hello there", "what's doc", "because said so", "say again", "it's celebration", "enjoy yourselves", "welcome", "where did go", "why crying", "stop playing"]; var random = math.floor(math.random() * phrases.length); for(var = 0; < phrases.length; i++) { } }
first, should set html element serve output area. empty div element choice. you've done with: <div class="myphrases"></div>.
next, html input element not closing tag (</input>) , instead of using submit button, use regular button (since not submitting data anywhere).
also, don't use inline html event handling attributes (onclick, onmouseover, etc.) they:
- create spaghetti code leads duplication , makes code harder read.
- causes global anonymous wrapper functions created around attribute's value , change
thisbinding in callback functions. - don't follow w3c event standard of using
.addeventlistener().
next, don't have loop go on every phrase (phrases.length). have go amount of times user has entered.
finally, can update div output area adjusting innerhtml string build loop:
// reference text box, button , output area var number = document.queryselector('.userinput'); var btn = document.queryselector("button"); var output = document.queryselector(".myphrases"); // set event handling function button btn.addeventlistener("click", showme); function showme() { var display = ""; var phrases = [ "hello there", "what's doc", "because said so", "say again", "it's celebration", "enjoy yourselves", "welcome", "where did go", "why crying", "stop playing"]; // string hold loop results var result = ""; // set upper limit loop. // if entered value greater length of array, use length // of array. if not, use value entered user var count = number.value > phrases.length ? phrases.length : number.value; for(var = 0; < count; i++) { var random = math.floor(math.random() * phrases.length); result += phrases[random] + "<br>"; } // inject string output area output.innerhtml = result; }<form> <h1>select how many phrases want displayed.</h1> <input type="number" class="userinput"> <button type="button">submit</button> </form> <div class="myphrases"></div>
great
ReplyDelete