JS, Select и Массивы

138
26 мая 2021, 23:40

Нужна ваша помощь. Есть в html'е select с четырьмя пунктами, кнопка и параграф, есть в коде 4 массива. Нужно, чтобы в зависимости от выбранного пункта в селекте при нажатии кнопки, в параграфе рандомно выводилась надпись из соответствующего массива. Да, тут ещё switch-case применить надо бы.

let array1 = ['PHP', 'JavaScript', 'Python', 'Perl', 'Ruby', 'Go', 'Java']; 
let array2 = ['Red', 'Green', 'Yellow', 'Black', 'White', 'Green', 'Brown']; 
let array3 = ['1', '2', '3', '4', '5', '6', '7']; 
let array4 = ['BMW', 'Nissan', 'Lada', 'WW', 'Mustang', 'NIVA', 'RR']; 
 
let button = document.getElementById('clickButton');
<body> 
 
  <form name="myForm"> 
    <select name="language" size="1"> 
      <option value="Array1" selected="selected">Array 1</option> 
      <option value="Array2">Array 2</option> 
      <option value="Array3">Array 3</option> 
      <option value="Array4">Array 4</option> 
    </select> 
    <p><button id="clickButton">Клик</button></<p> 
      <p>Нажми на кнопку</p> 
  </form> 
 
 
  <script src="script.js"></script> 
 
</body>

С одним массивом вопросов нет, функция примитивная. Но вот селект и несколько массивов... никак не могу сориентироваться. Всем заранее спасибо!

Answer 1

Можно собрать все массивы в один объект и искать их по его ключам:

let obj = { 
  lang: ['PHP', 'JavaScript', 'Python', 'Perl', 'Ruby', 'Go', 'Java'], 
  color: ['Red', 'Green', 'Yellow', 'Black', 'White', 'Green', 'Brown'], 
  number: ['1', '2', '3', '4', '5', '6', '7'], 
  mark: ['BMW', 'Nissan', 'Lada', 'WW', 'Mustang', 'NIVA', 'RR'], 
} 
 
let select = document.getElementById('select'); 
let array; // здесь будет хранится текущий выбранный массив 
select.addEventListener('change', function(){ 
  let key = this.value;  
  // value выбранной опции, который совсем случайно совпадает с ключами объекта 
  // Из которого достаем нужный массив по этому ключу: 
  array = obj[key];  
}); 
 
let msg = document.getElementById('msg'); 
let btn = document.getElementById('btn'); 
btn.addEventListener('click', function(){ 
  if( !array ) { return; } // Если массив еще не выбрали - функция прерывается 
 
  msg.textContent = ""; 
  let rand = Math.floor( Math.random() * array.length );   
  setTimeout(function(){ 
    msg.textContent = array[rand]; 
  }, 100); // Небольшое мигание при клике. 
});
<form name="myForm"> 
  <select id="select" name="language"> 
    <option value="lang">Язык Программирования</option> 
    <option value="color">Цвет</option> 
    <option value="number">Число от 1 до 7</option> 
    <option value="mark">Марка Машины</option> 
  </select> 
  <button id="btn" type="button">Клик</button></<p> 
  <p id="msg">Нажми на кнопку</p> 
</form>

Answer 2

Вариант без свича :

let arrays = { 
  array1: ['PHP', 'JavaScript', 'Python', 'Perl', 'Ruby', 'Go', 'Java'], 
  array2: ['Red', 'Green', 'Yellow', 'Black', 'White', 'Green', 'Brown'], 
  array3: ['1', '2', '3', '4', '5', '6', '7'], 
  array4: ['BMW', 'Nissan', 'Lada', 'WW', 'Mustang', 'NIVA', 'RR'] 
}; 
 
let button = document.getElementById('clickButton'), 
  getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max)); 
 
button.addEventListener('click', () => { 
  let arrName = document.querySelector('select[name="language"]').value, 
    p = document.getElementById('output'), 
    arr = arrays[arrName]; 
 
  p.textContent = arr[getRandomInt(arr.length)]; 
});
<select name="language" size="1"> 
  <option value="array1" selected="selected">Array 1</option> 
  <option value="array2">Array 2</option> 
  <option value="array3">Array 3</option> 
  <option value="array4">Array 4</option> 
</select> 
<p><button id="clickButton">Клик</button></<p> 
  <p id="output">Нажми на кнопку</p>

Вариант со свичем :

let array1 = ['PHP', 'JavaScript', 'Python', 'Perl', 'Ruby', 'Go', 'Java'], 
  array2 = ['Red', 'Green', 'Yellow', 'Black', 'White', 'Green', 'Brown'], 
  array3 = ['1', '2', '3', '4', '5', '6', '7'], 
  array4 = ['BMW', 'Nissan', 'Lada', 'WW', 'Mustang', 'NIVA', 'RR']; 
 
let button = document.getElementById('clickButton'); 
 
function getRandomInt(max) { 
  return Math.floor(Math.random() * Math.floor(max)); 
} 
 
button.addEventListener('click', () => { 
  let arrName = document.querySelector('select[name="language"]').value; 
  let p = document.getElementById('output'); 
  let res = ''; 
 
  switch (arrName) { 
    case 'Array1': 
      res = array1[getRandomInt(array1.length)]; 
      break; 
    case 'Array2': 
      res = array2[getRandomInt(array2.length)]; 
      break; 
    case 'Array3': 
      res = array3[getRandomInt(array3.length)]; 
      break; 
    case 'Array4': 
      res = array4[getRandomInt(array4.length)]; 
      break; 
  } 
 
  p.textContent = res; 
});
<select name="language" size="1"> 
  <option value="Array1" selected="selected">Array 1</option> 
  <option value="Array2">Array 2</option> 
  <option value="Array3">Array 3</option> 
  <option value="Array4">Array 4</option> 
</select> 
<p><button id="clickButton">Клик</button></<p> 
  <p id="output">Нажми на кнопку</p>

READ ALSO
Скачивание файлов в js
javascript

Скачивание файлов в js

Подскажите как написать скрипт для Tampermonkey, чтобы он при открытии новой вкладки в Firefox (например какой-либо картинки на сайте https://wallpaperscraftru)...

 91
Не попадаю в блок else if [закрыт]
javascript

Не попадаю в блок else if [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

 113
Как узнать в какую сторону отсортируется массив функцией sort(fn)
javascript

Как узнать в какую сторону отсортируется массив функцией sort(fn)

Есть функция sort(fn)Как не проверяя результат, узнать в какую сторону сортируется массив (увеличение или уменьшение)?

 142
Jquery UI draggable stop: поймать элемент который находится под тем,который перетягивают
javascript

Jquery UI draggable stop: поймать элемент который находится под тем,который перетягивают

Собственно говоря, вопрос в заголовкеЧто я хочу сделать, но не знаю как: при срабатывании event stop получить элемент, над которым отпустили блок,...

 111