Question

我一直在研究一个相当毫无意义的网站，其中有多个“随机”生成器。你可以在这里查看：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 {
	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>

这是列表部分的代码：

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

提前致谢！

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

Answer 2

您需要将数组变量设置为全局，以便可以从多个函数访问它：

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

然后你可以有另一个函数从数组中选择你需要的东西，现在可以访问它，因为我们将它移动到文档的全局范围。您可以使用另一个按钮来清空阵列。

Answer 3

这是你在寻找什么？

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>

Answer 4

在函数外部初始化数组。否则，每次调用该函数时都会将其清空。

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

如何制作列表随机数发生器

4 个答案: