我正在建立一個捐贈模式。
當我單擊捐贈按鈕時，進度條會根據輸入值遞增。
h1當我點擊捐贈時，我想替換錢字串。因此，如果輸入值為 10，當我單擊捐贈按鈕時，h1 應顯示為：
$140 is still needed for this project
這只運行一次，因為它僅在找到“$150”時才替換文本。
.modal
.modal-header-box
h1 $150 is still needed for this project
.modal-content
progress#myProgress(value='50', max='200')
h1 Only days left to fund this project. Join the other 42 other donors who have already suppoorted this project. Every dollar helps.
input(type='number', placeholder='$' id='value', max='100')
button#btn Give Now
.button.save-later Save for later
.button.social Tell your friends
JavaScript
document.getElementById('btn').addEventListener('click', function() {
var x = document.getElementById('myProgress');
console.log(x.value, document.getElementById('value').value)
x.value = x.value document.getElementById('value').value;
let difference = x.max - x.value;
console.log(difference);
document.body.innerHTML = document.body.innerHTML.replace('$150', `${difference}`);
});
有什么方法可以讓這更加動態，所以如果多次點擊捐贈按鈕，字串會更新？
CodePen 鏈接
https://codepen.io/make96/pen/XWZdbPZ
uj5u.com熱心網友回復：
您的問題在于替換頁面上的所有內容。您應該將轉換限制為您正在更改的元素。而不是替換document.body，然后定位到modal header box。
document.body.innerHTML = document.body.innerHTML.replace('$150', `${difference}`);
替換 modal-header-box 內容。
document.getElementsByClassName("modal-header-box")[0].innerHTML = `<h1>$${difference} is still needed for this project</h1>`;
uj5u.com熱心網友回復：
只需將數字放在一個跨度中，每次點擊時只更改跨度輸入。每次單擊時，您將跨度的值和輸入框的值相減。
功能：
document.getElementById("btn").onclick = function(){
var value = parseInt(document.getElementById("test").innerHTML);
var donate = parseInt(document.getElementById("value").value);
document.getElementById("myProgress").value = donate;
document.getElementById("test").innerHTML = value-donate;
}
模態標題框
.modal-header-box
h1 $<span id="test">150</span> is still needed for this project
uj5u.com熱心網友回復：
不要替換檔案正文，每次都更新正文不是很好的做法，只更新必填欄位。
Javascript
document.getElementById("btn").addEventListener("click", function() {
const title = document.getElementById("title");
const x = document.getElementById("myProgress");
const prev = x.value
x.value = prev document.getElementById("value").value;
let difference = x.max - x.value;
title.innerHTML = title.innerText.replace(x.max - prev, `${difference}`);
});
模板
h1#title $150 is still needed for this project
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/471318.html
標籤：javascript
下一篇：在添加元素之前制作空表