如何使用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>
评论
Clark
Clark

Here I'm getting the initial item price by parsing the contents of <p> and then updating it every time the counter changes.

请注意,这是一种获取商品价格的怪异方式,您的应用程序中必须有一种方法可以为客户端代码提供数字商品价格,因此无需解析。

formatPrice function uses euro and comma as a separator, you might want to change it depending on selected currency/locale.

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

const formatPrice = price => {
   return ('€ ' + price.toFixed(2)).replace('.', ',');
}

const priceNumeric = parseFloat(price.innerHTML.replace(/[^0-9.,]/g, "").replace(',', '.'));

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;
  }
  price.innerHTML = formatPrice(counter.value * priceNumeric);
  });
  plusBtn.addEventListener('click', () => {
    counter.value = parseInt(counter.value) + 1;
    price.innerHTML = formatPrice(counter.value * priceNumeric);
  });
}
.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>
点赞
评论