2017-01-12 72 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>