¡Ayúdame a escribir el Javascript por favor!
¡Quiero hacer una racha como las rayas de Snapchat cuando haces clic en el botón Sí y las rayas se romperán cuando se presione el botón cruz/restablecer/no!
Pero aquí viene lo principal: quiero que cada racha de usuarios se almacene en su cuenta, ¡para lo cual agregaré autenticación en el proyecto más adelante!
Estoy usando MongoDB para almacenar Usuarios y Rachas
Las rayas se mostrarán aquí:
<p class="mt-2 text-gray-400"> Praying without any Break since <span id="streaks">0</span> day(s)! </p>Estos son los Botones:
<div class="group relative flex justify-between items-center mt-2"> <h1 class="text-lg">Have you offered all Prayers Today?</h1> <div class="flex flex-row"> <!-- YES Button --> <button id="answer_yes" onclick="updateScores" class="flex p-2 m-1 border-2 rounded hover:text-white text-green-400 border-green-400 hover:bg-green-400" > <span>✓</span> </button> <!--NO BUtton--> <button id="answer_no" class="flex p-2 m-1 border-2 rounded hover:text-white text-red-400 border-red-400 hover:bg-red-400" > <span>✗</span> </button> </div> </div>El Javascript que estaba probando era este:
const yes = { score: 0, button: document.querySelector("#answer_yes"), display: document.querySelector("#streaks"), }; const resetButton = { score: 0, button: document.querySelector("#answer_no"), display: document.querySelector("#streaks"), }; function updateScores(streaks) { streaks.score += 1; streaks.display.classList.add("has-text-success"); streaks.button.disabled = true; streaks.display.textContent = streaks.score; } yes.button.addEventListener("click", function () { updateScores(streaks); }); resetButton.addEventListener("click", reset); function reset() { for (let p of [yes, resetButton]) { p.score = 0; p.display.textContent = 0; p.button.disabled = false; } }PD: ¡Soy un principiante, así que tengan paciencia con mi código inútil y de mierda! Este es mi primer proyecto Full-Stack y ni siquiera puedo crear el Javascript.
Vi que su código actual es HTML y JavaScript básicos y no funciona. Así que hice que funcionara.
Después de cambiar, este es su código HTML:
<p class="mt-2 text-gray-400"> Praying without any Break since <input id="streaks" value=0 disabled/> day(s)! </p> <div class="group relative flex justify-between items-center mt-2"> <h1 class="text-lg">Have you offered all Prayers Today?</h1> <div class="flex flex-row"> <button id="answer_yes" onclick="onYesButton()" class="flex p-2 m-1 border-2 rounded hover:text-white text-green-400 border-green-400 hover:bg-green-400" > <span>✓</span> </button> <button id="answer_no" onclick="onNoButton()" class="flex p-2 m-1 border-2 rounded hover:text-white text-red-400 border-red-400 hover:bg-red-400" > <span>✗</span> </button> </div> </div>Y este es tu código JS:
function onYesButton() { if (+document.getElementById('streaks').value >= 0) { document.getElementById('streaks').value = +document.getElementById('streaks').value + 1; } } function onNoButton() { if (+document.getElementById('streaks').value >= 1) { document.getElementById('streaks').value = +document.getElementById('streaks').value - 1; } }Puedes comprobarlo ahora, la funcionalidad funciona como querías.