Me gustaría que el código cambie su respuesta cuando cambie el valor de la entrada.
Entonces, digamos que en lugar de 10, me gustaría que me dijera cuánto HP (puntos de salud) tendré en el nivel 15. ¿Hay alguna forma de que pueda hacer esto? No tengo tanta experiencia en Javascript.
Así que en este momento lo codifiqué de manera predeterminada a 10 en todas las estadísticas. Mi sitio web me dice que en el nivel 10, tengo 895.4 hp. El único problema es que no se queda en 15 cuando trato de presionar enter. Simplemente volverá a 10. Prácticamente inútil. ¿Hay alguna forma de mantener ese número 15 cuando presiono enter?
var finalhp = 500; let hpmultiplier = 1.06; var hpvaluestring = document.querySelector('.hp').value; var hpvalue = parseInt(hpvaluestring); for (let i = 0; i < hpvalue; i++) { var finalhp = finalhp * hpmultiplier } console.log(finalhp) <form> <div> <input class="hp" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value"> <input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value"> </div> </form>Agregue un detector de eventos de envío de formulario al elemento de formulario y evite el envío de formulario allí.
<form onsubmit="submitForm(event)"> <div> <input class="hp" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value"> <input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value"> </div> </form>Agregue una función de envío de formulario dentro de una etiqueta de secuencia de comandos
function submitForm(event){ event.preventDefault(); var finalhp = 500; let hpmultiplier = 1.06; var hpvaluestring = document.querySelector('.hp').value; var hpvalue = parseInt(hpvaluestring); for (let i = 0; i < hpvalue; i++) { var finalhp = finalhp * hpmultiplier } console.log(finalhp) }Entonces, principalmente, solo estoy agregando eventListeners para activar la función de calculateHP de HP en el cambio de valor de entrada/control deslizante . La función calculateHP contiene la misma lógica que compartió. Hice esto para que los eventListeners puedan devolver la llamada a la función.
Prueba lo siguiente:
const input = document.querySelector('.hp') const slider = document.querySelector('.slider') slider.addEventListener('change', calculateHP) input.addEventListener('change', calculateHP) function calculateHP(){ let multiplier = 1.06 let level = Number(input.value) let HP = 500 for(let i = 0; i<level; i++){ HP = HP * multiplier } return console.log(HP) } <div> <label>Level: </label> <input class="hp" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value"> <input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value"> </div>