Вставка случайного элемента из массива JavaScript в строку html

#javascript #html #arrays

#javascript #HTML #массивы

Вопрос:

У меня есть массив строк:

 var prepositions = ['on', 'in', 'under', 'behind', 'above']

И я хочу вставить случайный элемент из этого массива в строку html в показанном промежутке:

 "The yellow object is ____ the blue object"

Более конкретно, я хочу, чтобы это предложение появлялось столько раз, сколько слов есть в массиве, каждый раз по-разному, в случайном порядке.

Я очень новичок в JavaScript, поэтому даже не уверен, с чего начать. Есть какие-нибудь идеи?

1. С какой частью у вас возникла проблема? Получение случайного индекса или вставка значения в строку? Это две части вашей единственной проблемы. Вам нужно разбить проблему на основные шаги и решать их по одному за раз.

2. @Taplar Я знаю, как выбрать случайный элемент из массива. Я не знаю, как вставить это значение в строку.

3. Итак, вам нужно посмотреть, как выполнить конкатенацию строк, или «шаблонные литералы».

Ответ №1:

Это создаст копию массива, затем переберет исходную длину массива и удалит слова из скопированного массива по мере их использования, чтобы не было дубликатов.

 function randomizePrepositions(sentence, prepositions) {
  words = prepositions.slice()
  out = "";
  for (z = 0; z < prepositions.length; z  ) {
    pos = Math.floor(Math.random() * words.length)
    word = words[pos];
    out  = sentence.replace("___",word)
    words.splice(pos, 1)
  }
  
  return out;
}

var prepositions = ['on', 'in', 'under', 'behind', 'above']

div = document.querySelector("div");
div.innerHTML = randomizePrepositions("The yellow object is ___ the blue object<br>", prepositions)

 <div></div>

Развернуть фрагмент

Ответ №2:

Вот как вы это делаете:

 let prepositions = ['on', 'in', 'under', 'behind', 'above']

document.querySelector('#output').innerHTML = `The yellow object is ${prepositions[Math.floor(Math.random()*prepositions.length)]} the blue object`;

 <html lang="en">
  <body>
    <div id="output"></div>
  </body>
</html>

Развернуть фрагмент

Ответ №3:

Вы можете сначала перетасовать свой массив, а затем выбрать один предлог за другим, используя функцию setNextSentence() . Предложения отображаются в течение некоторого времени (например, 10 секунд) и переключаются автоматически до тех пор, пока не будет показано последнее предложение.

 var prepositions = ['on', 'in', 'under', 'behind', 'above']
// assuming there is an html element like <span id="sentence"></span>
var elem = document.getElementById('sentence')
var active = 0
shuffle(prepositions)
// first sentence displayed immediately
setNextSentence()
// triggered by timer each 10 seconds
var timer = setInterval(setNextSentence, 10000)   

function setNextSentence() {
  elem.innerHTML = "The yellow object is "   prepositions[active]   " the blue object"
  active  
  if (active == prepositions.length) {
    // stop the timer
    clearInterval(timer)
  }
}

function shuffle(a) {
  let j, x, c;
  for (c = a.length; c; c--) {
    j = Math.floor(Math.random() * c);
    x = a[c - 1];
    a[c - 1] = a[j];
    a[j] = x;
  }
  return a;
}

1. Вы не указали в своем ответе, как getNextSentence можно было бы получить 5 предложений.

2. True — не был уверен в точном сценарии. Теперь я добавил два возможных варианта, чтобы дать представление.

3. Из OP. «Более конкретно, я хочу, чтобы это предложение появлялось столько раз, сколько слов в массиве, каждый раз по-разному, в случайном порядке». Интервал не нужен. Вы просто повторяете количество элементов в массиве

4. Уверен, что существует необходимость в интервале 😇 — OP «каждый раз с другим»

5. Это начинает быть забавным. OP: В этом ответе есть довольно много изменений — надеюсь, в конце мы все сделаем правильно.