柱形投票js

<div id="vote-container">
  <div class="vote-option" data-id="1">Option 1</div>
  <div class="vote-option" data-id="2">Option 2</div>
  <div class="vote-option" data-id="3">Option 3</div>
</div>
<div id="results-container">
  <div class="result-bar" id="result-1"></div>
  <div class="result-bar" id="result-2"></div>
  <div class="result-bar" id="result-3"></div>
</div>

#vote-container {
  display: flex;
  justify-content: space-around;
}

.vote-option {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 5px;
}

#results-container {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.result-bar {
  width: 50px;
  background-color: #ddd;
  margin: 5px;
}

const results = {
  1: 0,
  2: 0,
  3: 0
};

document.querySelectorAll('.vote-option').forEach(option => {
  option.addEventListener('click', () => {
    const id = option.getAttribute('data-id');
    results[id]++;
    updateResults();
  });
});

function updateResults() {
  for (const [id, count] of Object.entries(results)) {
    const bar = document.getElementById(`result-${id}`);
    bar.style.height = `${count * 20}px`; // Adjust multiplier as needed
  }
}