Estoy construyendo un modal de donación.
Cuando hago clic en el botón de donar, la barra de progreso se incrementa según el valor de entrada.
Quiero reemplazar la cadena de dinero de h1 cuando hago clic en donar. Entonces, si el valor de entrada es 10, cuando hago clic en el botón de donar, h1 debería leer:
$140 is still needed for this projectEsto se ejecuta solo una vez, porque reemplaza el texto solo cuando encuentra '$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 friendsJavaScript
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}`); });¿Hay alguna forma de hacer que esto sea más dinámico, de modo que la cadena se actualice si se hace clic en el botón de donar varias veces?
Enlace de CodePen
Su problema reside en reemplazar todo en la página. Debe restringir la transformación a los elementos que está cambiando. En lugar de reemplazar document.body, apunte al modal header box en su lugar.
document.body.innerHTML = document.body.innerHTML.replace('$150', `${difference}`);Reemplace el contenido del cuadro de encabezado modal en su lugar.
document.getElementsByClassName("modal-header-box")[0].innerHTML = `<h1>$${difference} is still needed for this project</h1>`;No reemplace el cuerpo del documento. No es una buena práctica actualizar el cuerpo cada vez, actualice solo el campo obligatorio.
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}`); });Modelo
h1#title $150 is still needed for this projectSimplemente coloque el número en un lapso y solo cambie la entrada del lapso en cada clic. Toma el valor del intervalo y el valor del cuadro de entrada y lo resta cada vez que hace clic en él.
Función:
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
.modal-header-box h1 $<span id="test">150</span> is still needed for this project