How to change its class and content when clicking on an element, and return it back when clicked again?

Question

JavaScript

Good afternoon!

<span class="badge bg-danger" style="cursor: pointer;">150</span>
<span class="badge bg-danger" style="cursor: pointer;">250</span>
<span class="badge bg-danger" style="cursor: pointer;">350</span>
<span class="badge bg-danger" style="cursor: pointer;">450</span>

How to bind 2 numbers to each span (each element has its own numbers), for example, display 150 by default and 200 when clicking on this element, as well as change the class to badge bg-success, and when you click on the element again, return the class and content default?

Answer 1

As an option))

<span class="badge bg-danger" onclick="changeBadge(150, 200)" style="cursor: pointer;">150</span>
  <span class="badge bg-danger" onclick="changeBadge(250, 255)" style="cursor: pointer;">250</span>
  <span class="badge bg-danger" onclick="changeBadge(350, 235)" style="cursor: pointer;">350</span>
  <span class="badge bg-danger" onclick="changeBadge(450, 225)" style="cursor: pointer;">450</span>
  <script>

    const changeBadge = (oldContent, newContent) => {
      
      const badge = event.target

      if (badge.classList.contains('bg-danger')) {
          badge.classList.add('bg-success')
          badge.classList.remove('bg-danger')
          badge.innerHTML = newContent
      } else {
          badge.classList.remove('bg-success')
          badge.classList.add('bg-danger')
          badge.innerHTML = oldContent
      }
    }
  </script>

Answer 2

for me, this is the most correct option if you use jQuery . It is
most correct to store its state in the data of the element itself and, based on its value, take any actions
. You can play here)