Home > Enterprise >  My javascript only works for the first element
My javascript only works for the first element

Time:08-05

I'm using JS code to create a cart button with plus and minus buttons for quantity. The code is working only for the first cart and the page contains 4.

I've tried to use querySelectorAll instead of querySelector but the code is not working.

var cartButtons1 = document.querySelectorAll('.cart-button1');
var card_value1 = document.querySelector(".added1");
var pqtplus1 = document.querySelector(".pqt-plus1");
var pqtminus1 = document.querySelector(".pqt-minus1");
var cartvalue1 = 0;

cartButtons1.forEach(button => {
  button.addEventListener('click', cartClick1);
});

function cartClick1() {
  let button = this;
  card_value1.textContent = cartvalue1  = 1;
}

pqtplus1.addEventListener('click', function() {
  if (card_value1.nodeValue <= 0) {
    card_value1.textContent = cartvalue1  = 1;
  }
});

pqtminus1.addEventListener('click', function() {
  if (Number(card_value1.innerText) - 1 >= 0) {
    card_value1.textContent = cartvalue1 -= 1;
  }
});
<div >
  <span > 
    <button type="button" > 
      <i ></i> - 
    </button>
    <div >
      <span >0</span>
    </div>
    <button type="button" > 
      <i ></i>   
    </button>
  </span>
</div>

<div >
  <span > 
    <button type="button" > 
      <i ></i> - 
    </button>
    <div >
      <span >0</span>
    </div>
    <button type="button" > 
      <i ></i>   
    </button>
  </span>
</div>

<div >
  <span > 
    <button type="button" > 
      <i ></i> - 
    </button>
    <div >
      <span >0</span>
    </div>
    <button type="button" > 
      <i ></i>   
    </button>
  </span>
</div>

<div >
  <span > 
    <button type="button" > 
      <i ></i> - 
    </button>
    <div >
      <span >0</span>
    </div>
    <button type="button" > 
      <i ></i>   
    </button>
  </span>
</div>

CodePudding user response:

The issue is because querySelector() returns a single Element objects whereas querySelectorAll() returns an array-like list of Elements. As such you would need to implement a loop to iterate over all the buttons and attach the event handlers.

That being said, you can make the code much more simple by using the same class on all the relevant elements in the repeated HTML structure and then using DOM traversal within the event handler to relate them together.

Here's an example of how to do this. Note that the same event handler works for all repeated quantity input controls, as well as both plus/minus actions due to the use of a data attribute.

document.querySelectorAll(".btn-sm").forEach(btn => {
  btn.addEventListener('click', e => {
    let total = e.target.closest('.pls-moins').querySelector('.added');
    total.textContent = Math.max(0, parseInt(total.textContent, 10)   parseInt(e.currentTarget.dataset.inc, 10));
  });
});
<div >
  <span >
    <button type="button"  data-inc="-1"> 
      <i ></i> - 
    </button>
    <span >
      <span >0</span>
    </span>
    <button type="button"  data-inc="1"> 
      <i ></i>   
    </button>
  </span>
</div>

<div >
  <span >
    <button type="button"  data-inc="-1"> 
      <i ></i> - 
    </button>
    <span >
      <span >0</span>
    </span>
    <button type="button"  data-inc="1"> 
      <i ></i>   
    </button>
  </span>
</div>

<div >
  <span >
    <button type="button"  data-inc="-1"> 
      <i ></i> - 
    </button>
    <span >
      <span >0</span>
    </span>
    <button type="button"  data-inc="1"> 
      <i ></i>   
    </button>
  </span>
</div>

<div >
  <span >
    <button type="button"  data-inc="-1"> 
      <i ></i> - 
    </button>
    <span >
      <span >0</span>
    </span>
    <button type="button"  data-inc="1"> 
      <i ></i>   
    </button>
  </span>
</div>

One last thing to note - your HTML is invalid as you cannot place a div within a span. I corrected this in the example above.

  • Related