#javascript #html
Вопрос:
У меня есть следующий код
var words = [
'TEST',
'Test2',
]
function randomize() {
var randomNumber = Math.floor(Math.random() * (words.length));
document.getElementById('Word1').innerHTML = words[randomNumber];
var randomNumber = Math.floor(Math.random() * (words.length));
document.getElementById('Word2').innerHTML = words[randomNumber];
var randomNumber = Math.floor(Math.random()*90000) 10000;
document.getElementById('Number1').innerHTML = randomNumber;
document.getElementById('Combine').innerHTML = 'Word1' 'Word2' 'Number1';
}
<body>
<div id="Word1">
<!-- Word1 will display here -->
</div>
<div id="Word2">
<!-- Word2 will display here -->
</div>
<div id="Number1">
<!-- Number will display here -->
</div>
<div id="Combine">
<!-- Word1Word2Number1 Will display here-->
</div>
<button onclick="randomize()" )>Generate</button>
<script src="javascript.js"></script>
</body>
как вы можете видеть, мне нужен последний для вывода в DIV «Объединить» в html, но объединить первые 3 вместе в непрерывную строку.
Что я здесь делаю не так, уже какое-то время бьюсь об это головой. Прошло несколько лет с тех пор, как я вообще занимался javascript.
Комментарии:
1. Сохраните результаты в переменной и используйте переменную
2. К вашему сведению, возможно, что ваши случайные слова будут одинаковыми
Ответ №1:
Используйте разные переменные для каждого случайного выбора, а затем объедините их в последнем DIV.
var words = [
'TEST',
'Test2',
]
function randomize() {
var randomWord1 = words[Math.floor(Math.random() * (words.length))];
document.getElementById('Word1').innerHTML = randomWord1;
var randomWord2 = words[Math.floor(Math.random() * (words.length))];
document.getElementById('Word2').innerHTML = randomWord2;
var randomNumber = Math.floor(Math.random() * 90000) 10000;
document.getElementById('Number1').innerHTML = randomNumber;
document.getElementById('Combine').innerHTML = randomWord1 randomWord2 randomNumber;
}
<body>
<div id="Word1">
<!-- Word1 will display here -->
</div>
<div id="Word2">
<!-- Word2 will display here -->
</div>
<div id="Number1">
<!-- Number will display here -->
</div>
<div id="Combine">
<!-- Word1Word2Number1 Will display here-->
</div>
<button onclick="randomize()" )>Generate</button>
<script src="javascript.js"></script>
</body>
Ответ №2:
Один из способов-просто захватить HTML-элемент в данный момент, сопоставить его с массивом, а затем объединить с пробелом. Чтобы облегчить это, я дал каждому элементу аналогичный класс, который можно было запросить.
Объяснение:
[...document.querySelectorAll('.word')] // this takes all the matching elements and puts them into an array that can be iterated
.map(e => e.innerHTML) // this maps that element array into an array of just each ones innerHTML
.join(' '); // this joins the array with a space
var words = [
'TEST',
'Test2',
]
function randomize() {
var randomNumber = Math.floor(Math.random() * (words.length));
document.getElementById('Word1').innerHTML = words[randomNumber];
var randomNumber = Math.floor(Math.random() * (words.length));
document.getElementById('Word2').innerHTML = words[randomNumber];
var randomNumber = Math.floor(Math.random()*90000) 10000;
document.getElementById('Number1').innerHTML = randomNumber;
document.getElementById('Combine').innerHTML = [...document.querySelectorAll('.word')].map(e => e.innerHTML).join(' ');
}
<body>
<div class='word' id="Word1">
<!-- Word1 will display here -->
</div>
<div class='word' id="Word2">
<!-- Word2 will display here -->
</div>
<div class='word' id="Number1">
<!-- Number will display here -->
</div>
<div id="Combine">
<!-- Word1Word2Number1 Will display here-->
</div>
<button onclick="randomize()" )>Generate</button>
<script src="javascript.js"></script>
</body>
Ответ №3:
Во-первых, я бы посоветовал не использовать одну и ту же переменную для нескольких операций. С помощью этого вы не добьетесь большой оптимизации. Это просто сбивает вас с толку и снижает читабельность.
Кроме того, вы добавляете строки ( ‘Word1’ ‘Word2’ ‘Number1’) непосредственно в свой combine div
внутренний текст. Вам нужно объединить string variables
.
var words = [
'TEST',
'Test2',
]
function randomize() {
var randomNumber = Math.floor(Math.random() * (words.length));
document.getElementById('Word1').innerHTML = words[randomNumber];
var randomNumber2 = Math.floor(Math.random() * (words.length));
document.getElementById('Word2').innerHTML = words[randomNumber];
var randomNumber3 = Math.floor(Math.random()*90000) 10000;
document.getElementById('Number1').innerHTML = randomNumber;
document.getElementById('Combine').innerHTML = randomNumber randomNumber2 randomNumber3;
}
<body>
<div id="Word1">
<!-- Word1 will display here -->
</div>
<div id="Word2">
<!-- Word2 will display here -->
</div>
<div id="Number1">
<!-- Number will display here -->
</div>
<div id="Combine">
<!-- Word1Word2Number1 Will display here-->
</div>
<button onclick="randomize()" )>Generate</button>
<script src="javascript.js"></script>
</body>