Así que tengo mi función JS que verifica si un botón de opción está seleccionado, luego muestra el valor en mi HTML como de costumbre.
Mi problema es que solo funciona si el valor predeterminado se establece en 0. ¿Cómo cambiaría esto para que si uso la opción checked en $5 en mi entrada de radio HTML, también muestre ese valor en mi navegador?
Si cambio mi opción checked a un valor de tip diferente, todavía muestra 0 como el valor inicial ya que no hice clic en nada.
Aquí está mi código JS
window.tip = 0; const tipTotal = document.getElementById("tip"); const orderTotal = document.getElementById("total"); document.addEventListener("click", ({ target }) => { if (target.className === "tips" && target.checked) { window.tip = parseInt(target.value); } else { return; tipTotal.textContent = `$${window.tip}`; }Muestro el botón de radio seleccionado aquí
<td id="tip">$0.00</td>Aquí están mis botones de radio HTML
<input type="radio" value="0" id="tip0" name="tip" class="tips" /> <label for="tip0">$0</label> </div> <div> <input type="radio" value="300" id="tip1" name="tip" class="tips" /> <label for="tip1">$3</label> </div> <div> <input type="radio" value="500" id="tip2" name="tip" class="tips" checked //here is the default checked option for $5 /> <label for="tip2">$5</label> </div> Entonces, de manera predeterminada, mi aplicación mostrará la opción tip: $5 marcada, sin embargo, el HTML en el navegador para Tips dirá Tip: $0.00 en lugar de Tip: $5.00 a menos que haga clic en él.
Establece window.tip solo cuando se hace clic en un botón de radio porque agregó un detector de eventos que se activa solo al hacer clic. Puede agregar un detector de eventos en carga.
window.tip = 0; const tipTotal = document.getElementById("tip"); const orderTotal = document.getElementById("total"); document.addEventListener("click", ({ target }) => { if (target.className === "tips" && target.checked) { window.tip = parseInt(target.value); } }); document.addEventListener("load", () => { const selectedOption = document.querySelector(".tips:checked"); window.tip = parseInt(selectedOption.value); });También eliminé una declaración else innecesaria en el primer detector de eventos.
EDITAR
Actualizar automáticamente el texto tipTotal :
window.tip = 0; const tipTotal = document.getElementById("tip"); const orderTotal = document.getElementById("total"); function updateTip(value) { window.tip = parseInt(value); tipTotal.textContent = window.tip; } document.addEventListener("click", ({ target }) => { if (target.className === "tips" && target.checked) { updateTip(target.value); } }); document.addEventListener("load", () => { const selectedOption = document.querySelector(".tips:checked"); updateTip(selectedOption.value); });Primero, tienes una variable global llamada "consejo" y un elemento con una id de "consejo" también. Los elementos con id s también se vuelven globales y, por lo tanto, tiene un conflicto en la denominación.
A continuación, debe actualizar inicialmente ese td en su JS y también cuando cambie el monto de la propina.
let tip = 0; const tipTotal = document.getElementById("tipAmount"); const orderTotal = document.getElementById("total"); // Initialize the table data tipTotal.textContent = document.querySelector(".tips:checked").value; document.addEventListener("click", function(event) { // No need to see if it's checked because clicking // on a radio button makes it checked and this code // wouldn't be called if you didn't click it. if (event.target.className === "tips") { tipTotal.textContent = event.target.value // Update the table } }); <div> <input type="radio" value="0" id="tip0" name="tip" class="tips"> <label for="tip0">$0</label> </div> <div> <input type="radio" value="300" id="tip1" name="tip" class="tips"> <label for="tip1">$3</label> </div> <div> <input type="radio" value="500" id="tip2" name="tip" class="tips" checked> <label for="tip2">$5</label> </div> <table> <tr><td id="tipAmount"></td></tr> </table>Simplemente active un evento de clic de botón de tip2 :
document.getElementById("tip2").click();Por ejemplo:
const tipTotal = document.getElementById("tip"); const tipButton = document.getElementById("tip2"); tipButton.addEventListener("click", ({ target }) => { if (target.className === "tips" && target.checked) { window.tip.innerText = "$" + target.value; } else { return; } }); // activate click event on tip2 radio button tipButton.click(); <div id="tip">$0.00</div> <div> <input type="radio" value="5.00" id="tip2" name="tip" class="tips" /> <label for="tip2">$5</label> </div>