1

I'm jessi and I'm a web development student. I'm trying to write a program with arrays and I'm stuck. I have an array of phrases and when a user enters a number between 1 and 10 it is supposed to show that many phrases on the screen but I'm stuck. I don't know how to display multiple results on the screen. I'd really appreciate any help. Thanks. 

 <!DOCTYPE html>
  <html>
  <head>
  <title>Get A Response</title>
  </head>

 <body>
 <form>
  <h1>Select how many phrases you 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 up Doc",
    "Because I said so",
    "Say it again",
    "It's a celebration",
    "Enjoy yourselves",
    "Welcome",
    "Where did you go", "Why you crying", "Stop playing"];


   var random = Math.floor(Math.random() * phrases.length);

    for(var i = 0; i < phrases.length; i++) {

    }
  }
Improve this question
0

1 Answer 1

Reset to default
3

First, you should set up an HTML element that will serve as your output area. An empty div element is a good choice. You've already done that with: <div class="myphrases"></div>.

Next, the HTML input element does not get a closing tag (</input>) and instead of using a submit button, just use a regular button (since you are not actually submitting data anywhere).

Also, don't use inline HTML event handling attributes (onclick, onmouseover, etc.) as they:

  1. Create spaghetti code that leads to duplication and makes the code harder to read.
  2. Causes global anonymous wrapper functions to be created around your attribute's value and change the this binding in your callback functions.
  3. Don't follow the W3C Event standard of using .addEventListener().

Next, don't have your loop go over every phrase (phrases.length). Only have it go for the amount of times the user has entered.

Finally, you can update the div output area by adjusting its innerHTML to be a string that you build up from your loop:

// Get reference to the text box, the button and the output area
var number = document.querySelector('.userInput');
var btn = document.querySelector("button");
var output = document.querySelector(".myphrases");

// Set up the event handling function for the button
btn.addEventListener("click", showme);

function showme() {
 
  var display = "";

   var phrases = [
    "Hello there",
    "What's up Doc",
    "Because I said so",
    "Say it again",
    "It's a celebration",
    "Enjoy yourselves",
    "Welcome",
    "Where did you go", "Why you crying", "Stop playing"];

   // String to hold loop results
   var result = "";
  
    // Set up the upper limit for the loop.
    // If the entered value is greater than the length of the array, use the length 
    // of the array. If not, use the value entered by the user
    var count = number.value > phrases.length ? phrases.length : number.value;
    
    for(var i = 0; i < count; i++) {
      var random = Math.floor(Math.random() * phrases.length);
      result += phrases[random] + "<br>";
    }
    
   // Inject the string into the output area
   output.innerHTML = result;
  }
<form>
  <h1>Select how many phrases you want displayed.</h1>
  <input type="number" class="userInput">
  <button type="button">Submit</button>
 </form>

<div class="myphrases"></div>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.