如何使用javascript更改<p>标签

由 发布于

screenshot of my example So i have made a counter for a shoppingcart. Everytime you press on the + the counter goes up by one. But i also want the p tag to change when you press the +. As you can see in the screenshot, the price of the product is 159,95 euro so everytime i press the + the price of the product should go up by 159,95 euro. here is my code:

const allCounters = document.getElementsByClassName('qty');
let min = -1;
let result = document.getElementById('res');
let price = document.getElementById('prijs');

for (const someCounter of allCounters) {
  const minusBtn = someCounter.children[0];
  const counter = someCounter.children[1];
  const plusBtn = someCounter.children[2];
  minusBtn.addEventListener('click', () => {
  if (counter.value <= 0){
  	console.log('disabled')
  }else {
  	counter.value = parseInt(counter.value) - 1;
  }
  });
  plusBtn.addEventListener('click', () => {
    counter.value = parseInt(counter.value) + 1;
  });
}
.qty{
  align-self: center;
}

.qty .count {
  color: var(--color-black);
  display: inline-block;
  vertical-align: top;
  font-size: 25px;
  font-weight: 700;
  line-height: 30px;
  padding: 0 2px;
  min-width: 35px;
  text-align: center;
}

.qty .plus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: lightgrey;
  width: 30px;
  height: 30px;
  font: 30px/1 Arial, sans-serif;
  text-align: center;
}

.qty .minus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: lightgray;
  width: 30px;
  height: 30px;
  font: 30px/1 Arial, sans-serif;
  text-align: center;
  background-clip: padding-box;
}

div {
  text-align: center;
}

.minus:hover {
  color: var(--color-black);
}

.plus:hover {
  color: var(--color-black);
}

/*Prevent text selection*/
span {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input {
  border: 0;
  width: 2%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input:disabled {
  background-color: white;
}
    <div class="qty">
        <span class="minus">-</span>
        <input class="count" type="number" name="qty" value="1" />
        <span class="plus">+</span>
    </div>
    <div class="prijs-product">
		<p id="prijs">€ 159,95</p>
	</div>