Как заменить значения через js в по нажатию кнопки?

Question

[Владимир]

Есть выбор размеров обуви.

Пример кода:

<div> Выберите размер </div>

<button> RUS </button>
<button> US </button> 
<button> EU </button> 
<button> СМ </button>

<ul aria-label="Размер" class="variable-items-wrapper">
	<li class="variable-items"> 30 </li>
	<li class="variable-items"> 32 </li>
	<li class="variable-items"> 34 </li>
	<li class="variable-items"> 36 </li>
</ul>

Нужно чтобы значения внутри при нажатии на на кнопку, менялись на заданные через js.
То есть нажимаем на СМ и все значения в li у нас подменяются на заданные.

Вопрос как это можно реализовать. Чтобы было понятнее, прилагаю скриншот подобного

Answer 1

[0xD34F]

const values = {
  RUS: [ 'раз значение', 'два значение', 'три' ],
  US: [ '...', '...', '...' ],
  // ...
};

const items = document.querySelectorAll('li');
const buttons = document.querySelectorAll('button');

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick({ target: { innerText: key } }) {
  items.forEach(function(n, i) {
    n.innerText = this[i] ?? `ЗНАЧЕНИЕ #${i} ДЛЯ ${key} НЕ ЗАДАНО`;
  }, values[key] ?? []);
}

Comments

[Владимир]

Здравствуйте, спасибо за ваш ответ.
Это наиболее подходящее решение, но не до конца то что нужно.

В данном случае, скрипт отрабатывает всегда, если будет один из "размеров" не будет выведен, то скрипт переберет и поменяет значения по порядку - https://codepen.io/sbsanldo-the-animator/pen/MWPZmdO

В идеале нужно перебрать как-то один раз все возможные размеры со значениями (Как будто бы перевод).

Логика такая:

32 rus = 30us = 28eu = 25cm
34 rus = 32us = 30eu = 27cm

[0xD34F]

Владимир, выводите всё и всегда. "Не будет выведен" ---> "скрыт".

Answer 2

[Stalker_RED]

Размерам от chatGPT я бы особо не доверял, лучше перепроверить по каким-то таблицам

Answer 3

[Rsa97]

JS не нужен.

Comments

[Ankhena]

Ещё через data- можно аналогично