Блог

Главная - Вопросы по программированию - Объединение нескольких выходов Var в один div

Объединение нескольких выходов Var в один div

#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>
Метки: