Используя обычную кнопку (не радио/флажок), как я могу убедиться, что выбрано только одно значение И отменяет выбор другого, если оно выбрано?

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

Мой HTML

 <p class="call">Please select a number.</p>
  <div class="button-flex">
   <button class="rating">1</button>
   <button class="rating">2</button>
   <button class="rating">3</button>
   <button class="rating">4</button>
   <button class="rating">5</button>
  </div>

Мой JS

let allBtns = document.querySelectorAll(".rating");

allBtns.forEach((option) => {
  option.addEventListener("click", function () {
    option.style.backgroundColor = "orange";
  });
});

По сути, я хочу, чтобы пользователь мог щелкнуть только один рейтинг (от 1 до 5), который в конечном итоге будет использоваться для обновления строки.

Основная проблема, которую я хотел бы решить прямо сейчас, — это возможность выбрать одно значение, выбрать другое и отменить выбор ранее выбранного значения. Мне удалось найти метод с использованием радио, и флажки будут работать, но я также хочу сохранить стиль кнопки, потому что именно так она должна отображаться.

Возможно ли это с помощью обычного элемента кнопки?

вы используете что-то вроде реакции или vue?

Mulan 09.04.2022 19:21

@Mulan Нет, я только начал использовать js пару недель назад.

Marcus 09.04.2022 19:24
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
2
28
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

let allBtns = document.querySelectorAll(".rating");

allBtns.forEach((option) => {
  option.addEventListener("click", function (event) {
    allBtns.forEach(el => {
      el.classList.remove('active');
    });
    
    event.currentTarget.classList.add('active');
  });
});
.rating.active {
  background-color: orange;
}
<p class="call">Please select a number.</p>
<div class="button-flex">
 <button role="radio" class="rating">1</button>
 <button role="radio" class="rating">2</button>
 <button role="radio" class="rating">3</button>
 <button role="radio" class="rating">4</button>
 <button role="radio" class="rating">5</button>
</div>

Идентифицирует текущий выбранный элемент кнопки с помощью .active

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

С помощью этого ответа смогу ли я проверить, есть ли у него «активный» класс для хранения значения, а затем обновить строку?

Marcus 09.04.2022 19:47

Я не совсем понимаю вопрос. Вы хотите получить значение кнопки с классом «активный»?

L.Wonbae 10.04.2022 09:51
Ответ принят как подходящий

Вы должны запомнить последнюю кнопку, а затем изменить ее при следующем нажатии, например:

let allBtns = document.querySelectorAll(".rating");
let lastBtn;

allBtns.forEach((option) => {
  option.addEventListener("click", function () {
    lastBtn && (lastBtn.style.backgroundColor = null);
    (lastBtn = option).style.backgroundColor = "orange";
  });
});
<p class="call">Please select a number.</p>
  <div class="button-flex">
   <button class="rating">1</button>
   <button class="rating">2</button>
   <button class="rating">3</button>
   <button class="rating">4</button>
   <button class="rating">5</button>
  </div>

Как именно работает этот код? Я не совсем понимаю семантику, но это ответ, который решает мою проблему.

Marcus 09.04.2022 21:52

@Marcus Можете ли вы указать, какую часть вы не поняли, чтобы помочь мне быть более кратким с ответом?

syduki 09.04.2022 22:09

Я прошу прощения. В частности, как именно работают «lastBtn && (lastBtn.style..)» и «(lastBtn = option)? Это условные операторы?

Marcus 09.04.2022 23:10

Первый оператор является оператором соединения "короткое замыкание", второй — просто операцией присваивания, оба используют оператор группировки.

syduki 09.04.2022 23:28

Другие вопросы по теме