JavaScript is not changing content of Bootstrap popover

Question

I am trying to create a popover that will show the bill according to the number of items.

I have created this popover with bootstrap

And I have created buttons to choose the number of the items and add them to the cart

document.getElementsByClassName("btnminus")[0].addEventListener('click', decrement);

document.getElementsByClassName("btnplus")[0].addEventListener('click', increment);

document.getElementsByClassName("adcart")[0].addEventListener('click', addcart);

function decrement() {
  var x = parseInt(document.getElementsByClassName("form-control")[0].value);
  if (x != 0) {
    document.getElementsByClassName("form-control")[0].value = parseInt(document.getElementsByClassName("form-control")[0].value) - 1;
  }


}

function increment() {
  document.getElementsByClassName("form-control")[0].value = parseInt(document.getElementsByClassName("form-control")[0].value) + 1;
}

function addcart() {
  document.getElementsByClassName("poper")[0].dataset.bsContent = "YOUR total bill is " + parseInt(document.getElementsByClassName("form-control")[0].value) * 125;
}

But when add to cart button is clicked the popover data does not get changed. I am also getting this issue showing up while inspecting on chrome

Audit usage of navigator.userAgent, navigator.appVersion, and navigator. platform

JavaScript is not changing content of Bootstrap popover

0 Answers