CODEWITHSUNDEEP
javascripthtmlarraysfunction
Nicht Eric
Nicht Eric

Reputation: 29

Random amount of random letters from array only giving one Element back

I'm quite new to javascript so this question might be dumb. So basicly what I'm trying to do is to have an array with the letters a-z for example. A random number from 1-10 is generated and saved in a variable which determins how many letters the function will return. After that the variable is given to another function which will pick random elements from the array and return them back to html. It's hard to explain I'm sorry

Everything works fine but it gives only one skin back at a time instead of the amount based on variable "letternum"

Heres where I'm at so far

var letters = [
    "a","b","c","d","e","f","g","h","i",
    "j","k","l","m","n","o","p","q","r",
    "s","t","u","v","w","x","y","z",
];

function letters() {
  var letternum = Math.floor(Math.random() * 10) + 1;
  var i;

  for (i = 1; i < letternum; i++) {
    var random = Math.floor(Math.random() * letters.length) + 1;
    var randletter = letters[random];
    document.getElelemtById('div').innerHTML = "Random letters picked:" + randletter;
  }
}

I do apologize for the title I couldn't find a better one

Upvotes: 0

Views: 175

Answers (4)

Djaouad
Djaouad

Reputation: 22776

You have some errors in your code:

  • You're misspelling getElementById.
  • You're naming both the array and the function letters.
  • You're overwriting previously written letters using =.
  • You should use Math.random() * (letters.length - 1) to avoid getting undefined (due to index getting out of range).

var letters = [
  "a", "b", "c", "d", "e", "f", "g", "h", "i",
  "j", "k", "l", "m", "n", "o", "p", "q", "r",
  "s", "t", "u", "v", "w", "x", "y", "z",
];

function lettersFunction() {  // a different name
  var letternum = Math.floor(Math.random() * 10) + 1;
  var i;
  for (i = 1; i < letternum; i++) {
    var random = Math.floor(Math.random() * (letters.length - 1)) + 1;
    var randletter = letters[random];
    document.getElementById('div').innerHTML += "Random letter picked: " + randletter + '<br>';  // += instead of =, and add a new line after each letter
  }
}
lettersFunction(); // calling the function
<div id="div"></div>

Upvotes: 1

bhansa
bhansa

Reputation: 7504

Just update the innerHTML don't overwrite it. Remove the typos as well and use some other id for your div, other than div.

document.getElementById('numdiv').innerHTML += "Random letters picked:" + randletter;

Code:

<div id="numdiv" onclick="randletters();">Click</div>

<script>
  var letters = [
    "a", "b", "c", "d", "e", "f", "g", "h", "i",
    "j", "k", "l", "m", "n", "o", "p", "q", "r",
    "s", "t", "u", "v", "w", "x", "y", "z",
  ];

  function randletters() {

    var letternum = Math.floor(Math.random() * 10) + 1;
    var i;
    for (i = 1; i < letternum; i++) {
      var random = Math.floor(Math.random() * letters.length) + 1;
      var randletter = letters[random];
      document.getElementById('numdiv').innerHTML += "Random letters picked:" + randletter + "<br>";
     }
      document.getElementById('numdiv').innerHTML += "<br><hr>";
    
  }
</script>

Upvotes: 0

Joe Love
Joe Love

Reputation: 5952

Your display function is inside your for loop-- meaning that it's going to display once for every letter it picks. What you want to do is to concatenate the letters together in the for loop and display them once:

 var letters = [
     "a","b","c","d","e","f","g","h","i",
     "j","k","l","m","n","o","p","q","r",
     "s","t","u","v","w","x","y","z",
 ];

 function letters(){

     var letternum = Math.floor(Math.random() * 10) + 1;
     var i;
     var randletter;
         for (i = 1; i < letternum; i++) {
             var random = Math.floor(Math.random() * letters.length) + 1;
             randletter += letters[random];
    }
     document.getElelemtById('div').innerHTML = "Random letters picked:" + randletter;

}

Upvotes: 0

Jonny Rathbone
Jonny Rathbone

Reputation: 179

document.getElelemtById('div').innerHTML = "Random letters picked:" + randletter;

This line at the end of the loop changes the innerHTML, so you are left with just the last one in the random number. You could changes this to:

document.getElelemtById('div').innerHTML += "Random letters picked:" + randletter;

so they are appended.

Upvotes: 0

Related Questions