Помогите пожалуйста пишу сайт на html css js не могу сделать опрос

Рейтинг: 0Ответов: 1Опубликовано: 16.08.2023

Пробовала написать код на js чтобы он запоминал голоса но он не работает помогите пожалуйста
вот код:

const buttons = document.querySelectorAll('.vote-button');
const resultDiv = document.getElementById('result');
const storageKey = 'votedOption';

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const optionId = button.id;

    if (!localStorage.getItem(storageKey)) {
      const optionCountElement = document.getElementById(`${optionId}Count`);
      const currentCount = parseInt(optionCountElement.innerText.match(/\d+/)[0]);
      optionCountElement.innerText = `${optionId}: ${currentCount + 1} голосов`;

      localStorage.setItem(storageKey, optionId);

      buttons.forEach(btn => {
        if (btn.id !== optionId) {
          btn.disabled = true;
          btn.classList.add('voted');
        }
      });
    }
  });
});

// Проверяем наличие сохраненного выбора при загрузке страницы
if (localStorage.getItem(storageKey)) {
  const votedOption = localStorage.getItem(storageKey);
  disableButtonsExcept(votedOption);
}

function disableButtonsExcept(optionId) {
  buttons.forEach(btn => {
    if (btn.id !== optionId) {
      btn.disabled = true;
      btn.classList.add('voted');
    }
  });
}
.voting-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.vote-button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background-color: #3498db;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.vote-button:hover {
  background-color: #2980b9;
}


/* Опциональные стили для активной кнопки (если нужно) */

.vote-button:active {
  background-color: #1f618d;
}

.voted {
  background-color: #ccc;
  cursor: not-allowed;
}
<h2>Какой вариант вам нравится больше всего?</h2>
<div class="voting-buttons">
  <button class="vote-button" id="option1">Вариант 1</button>
  <button class="vote-button" id="option2">Вариант 2</button>
  <button class="vote-button" id="option3">Вариант 3</button>
</div>
<div class="result" id="result">
  <p>Результаты голосов:</p>
  <p id="option1Count">Вариант 1: 0 голосов</p>
  <p id="option2Count">Вариант 2: 0 голосов</p>
  <p id="option3Count">Вариант 3: 0 голосов</p>
</div>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Пробовала написать код на js чтобы он запоминал голоса но он не работает помогите пожалуйста

Предложу такой вариант решения.

Тут не работает localStorage... Но если скопировать и вставить в файл html - работать будет.

getInfo()
document.querySelector('.voting-buttons').addEventListener('click', e => {
  const o = e.target
  if (!o.classList.contains('vote-button')) return
  const id = o.id + 'Count'
  const or = document.querySelector('#' + id + ' span')
  or.textContent = +or.textContent + 1
  setInfo()
})
//
function getInfo() {
  /* комментарий нужно потом убрать
  let o = localStorage.getItem('info')
  o = JSON.parse(o)
  Object.entries(o).forEach(([k, v])=> document.querySelector('#' + k + ' span').textContent = v)
  */
}
//
function setInfo() {
  const o = [...document.querySelectorAll('#result [id]')].reduce((obj, o) => (
    obj[o.id] = +o.querySelector('span').textContent,
    obj
  ), {})
  /* комментарий нужно потом убрать
  localStorage.setItem('info', JSON.stringify(o))
  */
}
.voting-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.vote-button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background-color: #3498db;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.vote-button:hover {
  background-color: #2980b9;
}


/* Опциональные стили для активной кнопки (если нужно) */

.vote-button:active {
  background-color: #1f618d;
}

.voted {
  background-color: #ccc;
  cursor: not-allowed;
}
<h2>Какой вариант вам нравится больше всего?</h2>
<div class="voting-buttons">
  <button class="vote-button" id="option1">Вариант 1</button>
  <button class="vote-button" id="option2">Вариант 2</button>
  <button class="vote-button" id="option3">Вариант 3</button>
</div>
<div class="result" id="result">
  <p>Результаты голосов:</p>
  <p id="option1Count">Вариант 1: <span>0</span> голосов</p>
  <p id="option2Count">Вариант 2: <span>0</span> голосов</p>
  <p id="option3Count">Вариант 3: <span>0</span> голосов</p>
</div>