Я работал на довольно бессмысленном веб-сайте, где есть несколько «случайных» генераторов. Вы можете проверить это здесь: 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>

Заранее спасибо!

0
Sam 13 Янв 2017 в 02:23

4 ответа

Лучший ответ

Вот пример, в котором мы берем входное значение, добавляем его в массив, перемешиваем массив и затем помещаем его в список <ul>. Каждое добавленное значение добавляется в массив и перетасовывает список.

Попробуй это:


РЕДАКТИРОВАТЬ

Я добавил функцию shuffle для случая, когда вы хотите просто перемешать без добавления новых значений.

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>
1
Z-Bone 13 Янв 2017 в 16:40

Это то, что вы ищете?

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
Rohit 12 Янв 2017 в 23:33

Вам нужно будет сделать переменную массива глобальной, чтобы вы могли обращаться к ней из нескольких функций:

// 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
Cᴏʀʏ 12 Янв 2017 в 23:32

Инициализировать массив вне функции. В противном случае вы делаете его пустым при каждом вызове функции.

 <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>
0
Harminder 12 Янв 2017 в 23:35