2017-01-12 34 views
0

我一直在研究一个相当毫无意义的网站,其中有多个“随机”生成器。你可以在这里查看:randomwordgen.net16.net 正如你可以看到底部有一个未完成的发生器,这就是我在这里。我想让它根据您输入的内容生成一个列表。我的想法是将输入字段的值添加到当您点击“添加到列表”时将创建列表的数组。然后我将有一个单独的按钮,将使用该数组生成列表。唯一的问题是,我不知道如何将字符串添加到数组,当我只知道变量的名称,而不是值。如果任何人都可以帮我解决这个问题,那会很棒! 这是整个网站的代码:如何制作列表随机工具

<!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 { 
 
\t background-color:pink; 
 
} 
 
button.10letter { 
 
\t background-color: blue; 
 
} 
 
button.5letter { 
 
\t background-color: blue; 
 
\t position:relative; 
 
\t top:50px; 
 
} 
 
button.4letter { 
 
\t background-color: blue; 
 
\t position:relative; 
 
\t top:100px; 
 
} 
 
button.3letter { 
 
\t background-color: blue; 
 
\t position:relative; 
 
\t top:150px; 
 
} 
 
button.Add { 
 
\t position:relative; 
 
\t 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>
这是列表中的部分代码:提前

<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>

谢谢!

+1

你几乎得到了它,问题是,你每一次重新分配ARR变量,一个空数组:'VAR ARR = [];'你可以声明funcion的是外所以每次添加单词时都不会重置。 – yuriy636

+0

谢谢各位的回复!我会在您的帮助下更新网站! –

回答

1

这里是其中我们取输入值,把它添加到一个数组,洗牌数组,然后把它在一个列表<ul>一个例子。每增加一个值都会被添加到数组中并重新整理列表。

试试这个:


编辑

我增加了对当你只是想不增加新的价值洗牌随机播放功能。

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>

+0

我喜欢它,我之前的评论我现在已经删除,因为我没有添加足够的清单,使它做任何似乎随机的,谢谢!我现在唯一抱怨的是,我没有看到一种方式,我可以重新随机化列表而不添加它,这是我想要做的。你有什么想法如何做到这一点? –

+0

@Bob我现在增加了一个洗牌按钮..再次检查 –

+0

感谢您的洗牌按钮!这正是我正在寻找的! –

0

你需要让你的数组变量全局所以你可以从多个函数访问:

// 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 = ''; 
    } 
} 

然后你就可以有另一种功能,其拍摄你需要什么了阵列,也就是现在,因为访问的我们将其移至文档的全局范围。你可以有另一个按钮来清空数组。

0

这是你在找什么?

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>

0

初始化数组的功能之外。否则,每次调用该函数时都会将其清空。

<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>