Estoy tratando de multiplicar dos números que obtuve de 2 entradas dentro de 2 funciones. ¿Cómo puedo acceder al valor fuera de la función? ¿Es esta la forma correcta de hacerlo? En este punto, obtengo NaN en total.
let coinName = document.getElementById("coinName"); let nrCoins = document.getElementById("nrCoins"); let inputName = document.getElementById("inputName"); let inputNr = document.getElementById("inputNr"); let inputValue = document.getElementById("inputValue"); let coinValue = document.getElementById("coinValue"); let total = document.getElementById("total"); function coinNamer() { coinName.innerHTML = inputName.value; inputName.value = ""; } function nrCoinss() { nrCoins.innerHTML = inputNr.valueAsNumber; inputNr.value = ""; } function coinValuee() { coinValue.innerHTML = inputValue.valueAsNumber + "$"; inputValue.value = ""; } total.innerHTML = nrCoins * coinValue;
El problema es que tanto nrCoins
como coinValue
son HTMLElement
. No son números. Es por eso que el NaN
.
Para resolver esto, haz esto-
total.innerHTML = nrCoins.innerHTML * coinValue.innerHTML;
Pero todavía hay un problema. Porque coinValue.innerHTML
contiene el signo "$" al final. Necesitamos eliminarlo y multiplicarlo.
Así que la solución correcta será-
total.innerHTML = nrCoins.innerHTML * coinValue.innerHTML.slice(0, coinValue.innerHTML.length - 1);
En una nota separada: la multiplicación de dos cadenas funciona siempre que sean representaciones válidas de números.
console.log("12" * "12") console.log(" 12 " * " 12") console.log("12\n\r" * "12")
debe convertir el valor de entrada en number
y devolverlo.
este es un ejemplo que le explica cómo usar su entrada y calcular total
const inputPrice = document.getElementById('price'), inputQte = document.getElementById('qte'), SubmitButton = document.getElementById('btn') let total = 0 SubmitButton.addEventListener('click', function (e) { // e.preventDefault() for do not refresh the page e.preventDefault() // convert and assign price * qte to total // the + operator is to convert from string to number total = +inputPrice.value * +inputQte.value console.log(total) })
nrCoins y coinValue se refieren a elementos DOM y no puede multiplicarlos. En su lugar, devuelva su inputNr.value y inputValue.value de sus respectivas funciones y use esas funciones para multiplicar estos números, es decir
function nrCoinss() { nrCoins.innerHTML = inputNr.valueAsNumber; inputNr.value = ""; return inputNr.valueAsNumber; } function coinValuee() { coinValue.innerHTML = inputValue.valueAsNumber + "$"; inputValue.value = ""; return inputValue.valueAsNumber; } total.innerHTML = nrCoinss() * coinValuee();