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

Question

screenshot of my example 所以我为购物车做了一个柜台。每次按下 + 时，计数器都会加一。但我也希望 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 函数使用欧元和逗号作为分隔符，您可能需要根据所选的货币/地区进行更改。

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>