Soy bastante nuevo en JS y no puedo entender por qué mi HTML interno no muestra ningún resultado en mis 4 campos de texto de entrada. Los valores de ID de todos los campos de texto coinciden con los valores de document.getElementByID, pero no se muestran.
document.getElementById('calculate').addEventListener('click', calculateCoins) function calculateCoins (){ //converts cents value from string to Int var cent = parseInt(document.getElementById('cents').value, 10); /* calculates # of quarters, displays # of quarters, and calculates the remainder money */ let quarterAmount = Math.floor(cent / 25); document.getElementById('quarters').innerHTML = quarterAmount; let quarterRemainder = cent % 25; /* calculates # of dimes, displays # of dimes, and calculates the remainder money */ let dimeAmount = Math.floor(quarterRemainder / 10); document.getElementById('dimes').innerHTML = dimeAmount; let dimeRemainder = quarterRemainder % 10; /* calculates # of nickels, displays # of nickels, and calculates the remainder money */ let nickelAmount = Math.floor(dimeRemainder / 5); document.getElementById('nickels').innerHTML = nickelAmount; let nickelRemainder = dimeRemainder % 5; /* calculates # of pennies and displays # of pennies */ let pennyAmount = Math.floor(nickelRemainder / 1); document.getElementById('pennies').innerHTML = pennyAmount; console.log(quarterAmount); console.log(quarterRemainder); console.log(dimeAmount); console.log(dimeRemainder); console.log(nickelAmount); console.log(nickelRemainder); console.log(pennyAmount); }Para actualizar el campo de entrada, use .value no .innerHTML
document.getElementById('pennies').value = pennyAmount;Para los formularios, debe usar la propiedad value en lugar de la propiedad innerHTML . Esto se debe a que innerHTML cambia el código interno de las etiquetas, mientras que el value cambia el atributo de value de la entrada.
Un ejemplo de esto está abajo.
document.querySelector("#text").value = "I'm text!"; <input type="text" name="text" id="text" placeholder="Enter any text here..." /> Además, la propiedad de value también se puede leer para ver el texto actual ingresado por el usuario.
Extra : también acabo de notar la siguiente línea de su código.
let pennyAmount = Math.floor(nickelRemainder / 1);En realidad, este código no es necesario, ya que la división por uno es básicamente el mismo número, y el suelo no cambiará el resultado.
Esta puede ser una posible solución para lograr el objetivo deseado:
Esto usa document.getElementById(k).value = <<calculated value>>; en lugar de innerHTML .
Fragmento de código
const coins = Object.fromEntries('quarters:25, dimes:10, nickels:5, pennies:1' .split(',') .map(ob => ob.split(':')) .map(([k, v]) => ([k.trim(), {divisor: v, val: 0}]))); const getQR = (num, divisor) => ([ Math.floor(num / divisor), num % divisor ]); const calculateCoins = () => { const userInput = +document.getElementById('cents').value.toString(); coins.quarters.val = userInput; Object.entries(coins). forEach(([k, {divisor, val}], idx, selfArr) => { const [d, r] = getQR(val, divisor); document.getElementById(k).value = d; if (idx + 1 < selfArr.length) selfArr[idx+1][1].val = r; }); }; document.getElementById('calculate').addEventListener('click', calculateCoins) .outer { display: flex; flex-direction: column } input { width: fit-content; margin: 25px 5px 5px; border: 2px solid black; } button { width: fit-content; margin: 10px; } <div class="outer"> <input id="cents">Enter num of cents</input> <input id="quarters" >Num of quarters</input> <input id="dimes" >Num of dimes</input> <input id="nickels" >Num of nickels</input> <input id="pennies" >Num of pennies</input> <button id="calculate">Get coins</button> </div>Explicación
coins generado mediante el uso de información conocidaval para la siguiente iteración.