如何用javascript改变<p>标签？

Question

例子截图所以我做了一个购物车的计数器。每当你按下 "+"的时候，计数器就会增加一个。但我也希望当你按下+号时，P标签也能改变。正如你可以看到在截图中，该产品的价格是159,95欧元，所以每次我按+，该产品的价格应该上升159,95欧元。

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>

Answer 1

在这里，我通过解析以下内容来获得商品的初始价格 <p> 然后在每次计数器变化时更新它。

请注意，这是一种获取商品价格的黑客方式，你的应用程序中一定要有一种方法为客户端代码提供一个数字商品价格，这样就不需要解析了。

formatPrice 函数使用欧元和逗号作为分隔符，你可能想根据选择的currencylocale来改变它。

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>

Answer 2

这将是更好的，我的意思是，太工作，如果你输入计数器。希望我能帮助你)

const allCounters = document.getElementsByClassName('qty');
let min = -1;
let result = document.getElementById('res');
let price = document.getElementById('prijs');
const counter =  document.querySelector('.count')
const minusBtn = document.querySelector('.minus')
const plusBtn = document.querySelector('.plus')
  
for (const someCounter of allCounters) {
  minusBtn.addEventListener('click', () => {
  if (counter.value <= 0){
  	console.log('disabled')
  }else {
  	counter.value--
    refreshPrice(counter);
  }
  });
  plusBtn.addEventListener('click', () => {
    counter.value++
    refreshPrice(counter);
  });
  counter.addEventListener('change', () =>{
     refreshPrice(counter);
  });
}

function refreshPrice(curCounter){
price.textContent = '€ ' + (curCounter.value * 159.95).toFixed(2)
}

.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>