CODEWITHSUNDEEP
javascripthtmlarraysstring
Sam
Sam

Reputation: 313

How to make a list randomizer

I have been working on a fairly pointless website where there are multiple "random" generators. You can check it out here: randomwordgen.net16.net As you can see there is an unfinished generator at the bottom, that's what I'm here for. I want to get it to generate a list from things you input. My idea is to add the input field's value to the array that will make the list when you hit "Add to List." Then I will have a separate button that will generate the list using that array. The only problem is that I don't know how to add the string to the array when I only know the name of the variable, not the value. If anyone could help me with any of this, that would be great! This is the code for the whole site:

<!DocType html>
<html>
<head>
<link rel="shortcut icon" href="https://cdn2.iconfinder.com/data/icons/thesquid-ink-40-free-flat-icon-pack/64/rubber-duck-512.png" type="image/x-icon">
<title>Random Word Generator</title>
<style>
body {
	background-color:pink;
}
button.10letter {
	background-color: blue;
}
button.5letter {
	background-color: blue;
	position:relative;
	top:50px;
}
button.4letter {
	background-color: blue;
	position:relative;
	top:100px;
}
button.3letter {
	background-color: blue;
	position:relative;
	top:150px;
}
button.Add {
	position:relative;
	top:50px;
}
</style>
</head>
<body>
<h1 style="color:grey">Random word generator:</h1>
<button class="10letter" onclick="doAlert();" style="color:orange">Generate with 10 letters.</button>
<script>
function createRandomWord(length) {
    var consonants = 'bcdfghjklmnpqrstvwxyz',
        vowels = 'aeiou',
        rand = function(limit) {
            return Math.floor(Math.random()*limit);
        },
        i, word='', length = parseInt(length,10),
        consonants = consonants.split(''),
        vowels = vowels.split('');
    for (i=0;i<length/2;i++) {
        var randConsonant = consonants[rand(consonants.length)],
            randVowel = vowels[rand(vowels.length)];
        word += (i===0) ? randConsonant.toUpperCase() : randConsonant;
        word += i*2<length-1 ? randVowel : '';
    }
    return word;
}
function doAlert() {
alert( "Your word is: "+createRandomWord(10)+" (bonus points if your word is real)." );
}
</script>
<button class="5letter" onclick="doAlert5();" style="color:orange">Generate with 5 letters.</button>
<script>
function createRandomWord5(length) {
    var consonants = 'bcdfghjklmnpqrstvwxyz',
        vowels = 'aeiou',
        rand = function(limit) {
            return Math.floor(Math.random()*limit);
        },
        i, word='', length = parseInt(length,10),
        consonants = consonants.split(''),
        vowels = vowels.split('');
    for (i=0;i<length/2;i++) {
        var randConsonant = consonants[rand(consonants.length)],
            randVowel = vowels[rand(vowels.length)];
        word += (i===0) ? randConsonant.toUpperCase() : randConsonant;
        word += i*2<length-1 ? randVowel : '';
    }
    return word;
}
function doAlert5() {
alert( "Your word is: "+createRandomWord(5)+" (bonus points if your word is real)." );
}
</script>
<button class="4letter" onclick="doAlert4();" style="color:orange">Generate with 4 letters.</button>
<script>
function createRandomWord4(length) {
    var consonants = 'bcdfghjklmnpqrstvwxyz♀☺☻ƒ=ù"?',
        vowels = 'aeiou',
        rand = function(limit) {
            return Math.floor(Math.random()*limit);
        },
        i, word='', length = parseInt(length,10),
        consonants = consonants.split(''),
        vowels = vowels.split('');
    for (i=0;i<length/2;i++) {
        var randConsonant = consonants[rand(consonants.length)],
            randVowel = vowels[rand(vowels.length)];
        word += (i===0) ? randConsonant.toUpperCase() : randConsonant;
        word += i*2<length-1 ? randVowel : '';
    }
    return word;
}
function doAlert4() {
alert( "Your word is: "+createRandomWord(4)+" (bonus points if your word is real)." );
}
</script>
<button class="3letter" onclick="doAlert3();" style="color:orange">Generate with 3 letters.</button>
<script>
function createRandomWord3(length) {
    var consonants = 'bcdfghjklmnpqrstvwxyz',
        vowels = 'aeiou',
        rand = function(limit) {
            return Math.floor(Math.random()*limit);
        },
        i, word='', length = parseInt(length,10),
        consonants = consonants.split(''),
        vowels = vowels.split('');
    for (i=0;i<length/2;i++) {
        var randConsonant = consonants[rand(consonants.length)],
            randVowel = vowels[rand(vowels.length)];
        word += (i===0) ? randConsonant.toUpperCase() : randConsonant;
        word += i*2<length-1 ? randVowel : '';
    }
    return word;
}
function doAlert3() {
alert( "Your word is: "+createRandomWord(3)+" (bonus points if your word is real)." );
}
</script>
<h1 style="color:grey">Name Generator:</h1>
<button style="color:orange" onclick="generator();">Generate</button>
<script>
function generator(){
  
  var first = ["Kick","Stupid","Random Name","Officer","School-Related","Unoriginal","Original","Mousey","Website to name things?","n00b","Error","var first=name.first","Bob","Joe","Boris","Duck","Cheese","Pablo","Stimuli","Last Test Grade","First Word","Puss","Cat","Cherokee", "Jerry", "[Insert Weird First Name Here]"]
  var last = ["Me","Idiot","dummy.dummy","randomwordgen.net16.net (shameless advertising)","he went that way","it was him!","DESTRUCTION...","Rats","You need advice for a name, use a website or something! Oh wait.","Opposition","Apple","404 not found","var last=name.last","You sure you want to pick this name?","McGuire","Rox","Knox","Bobert","Green","Raul","Damend","Milk","Positive","Negative","Rocky","Boots","Cherry","Parakeet","[Insert Weird Last Name Here]"]

  var randomNumber1 = parseInt(Math.random() * first.length);
  var randomNumber2 = parseInt(Math.random() * last.length);
  var name = first[randomNumber1] + " " + last[randomNumber2];

  alert(name);            

  
  }
  
</script>
<h1 style="color:grey">List Randomizer</h1>
<div>
<input type="text" id="Words">
<button id="Add" onClick="appendToArray()">Add To List</button>
<script>
function appendToArray() {
var Words = document.getElementById("Words");
var Word = Words.value 
var arr = [];
arr.push(Word);
}

</script>
</div>
</body>
</html>
And this is the code for the list part:

<h1 style="color:grey">List Randomizer</h1>
<div>
<input type="text" id="Words">
<button id="Add" onClick="appendToArray()">Add To List</button>
<script>
function appendToArray() {
var Words = document.getElementById("Words");
var Word = Words.value 
var arr = [];
arr.push(Word);
}

</script>
</div>

Thanks in advance!

Upvotes: 0

Views: 2106

Answers (4)

Z-Bone
Z-Bone

Reputation: 1584

Here is an example in which we take the input value, add it to an array, shuffle the array and then put it in a list <ul>. Every added value is added to the array and re-shuffles the list.

Try this:

EDIT

I added the shuffle function for when you just want to shuffle without adding new values.

var randomList = [];
function appendToArray() {
  var word = document.getElementById("Words").value;
  randomList.push(word);
  updateList(randomList);
  document.getElementById("Words").value = "";
}

function updateList(wordsArr) {
  shuffleArr(wordsArr);
  var list = document.getElementById('list');
  list.innerHTML = "";
  for (var i =0; i < wordsArr.length; i++) {
    var word = wordsArr[i];
    var li = document.createElement('li');
    li.innerText = word;
    list.appendChild(li);
  }
}

function shuffleArr(arr) {
    var j,
        x,
        i;
    for (var i = arr.length; i; i--) {
        j = Math.floor(Math.random() * i);
        x = arr[i - 1];
        arr[i - 1] = arr[j];
        arr[j] = x;
    }
}

function shuffleList() {
  var list = randomList;
  updateList(list);
}
<h1 style="color:grey">List Randomizer</h1>
<div>
<input type="text" id="Words">
<button id="Add" onClick="appendToArray()">Add To List</button>
<button id="Shuffle" onClick="shuffleList()">Shuffle List</button>
  <h3>List</h3>
  <ul id="list"></ul>

Upvotes: 1

Harminder
Harminder

Reputation: 141

Initialize array outside the function. Otherwise you are making it empty every time you call the function. 

 <h1 style="color:grey">List Randomizer</h1>
    <div>
    <input type="text" id="Words">
    <button id="Add" onClick="appendToArray()">Add To List</button>
    <script>
    var arr = [];
    function appendToArray() {
    var Words = document.getElementById("Words");
    var Word = Words.value 
    arr.push(Word);
    }

    </script>
    </div>

Upvotes: 0

Rohit
Rohit

Reputation: 1812

Is this what are you looking for?

var arr = [];
function appendToArray() {
var Words = document.getElementById("Words");
var Word = Words.value 

arr.push(Word);
    
}
function showArray() {
  console.log(arr);
}
<h1 style="color:grey">List Randomizer</h1>
<div>
<input type="text" id="Words">
<button id="Add" onClick="appendToArray()">Add To List</button>
<button id="Add" onClick="showArray()">Show List</button>

</div>

Upvotes: 0

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107536

You will need to make your array variable global so you can access it from multiple functions:

// declare this only once
var arr = [];

function appendToArray() {
    var word = document.getElementById("Words").value;
    // check to make sure something was entered
    if (word && word.length) {
        arr.push(word);
        // clear the input box if added to the array
        document.getElementById("Words").value = '';
    }
}

Then you can have another function that picks whatever you need out of the array, which is now accessible because we moved it to the global scope of your document. You could have another button to empty the array then as well.

Upvotes: 0

Related Questions