如何改变<p>标记为 javascript</p>

Question

我的示例的屏幕截图所以我为购物车制作了一个计数器。 每次按下 + 时，计数器都会加一。 但我也希望 p 标签在你按下 + 时改变。 正如您在屏幕截图中看到的，产品价格为 159,95 欧元，因此每次我按 + 时，产品价格应为 go 上涨 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>的内容获取初始商品价格，然后在每次计数器更改时更新它。

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

formatPrice function 使用欧元和逗号作为分隔符，您可能需要根据所选的货币/区域设置进行更改。

 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>