Estoy tratando de hacer un sitio web para obtener la factorización del número que escribí en la entrada
//setting up variables let getnumber = document.querySelector("#get-Number"); let gotvalue = getnumber.value; let getbutton = document.querySelector("#get-button"); let result = document.querySelector("#result-number"); let lastResult = 0; //My Functions function factorialize(num) { if (num === 0 || num === 1) lastResult = 1; else if (num < 0) { lastResult = 0; } for (var i = num - 1; i >= 1; i--) { num *= i; } lastResult = num; } function write() { factorialize(getnumber.value) getbutton.addEventListener('click', () => { result.innerText = lastResult; }) } write() //calling write body { background-color: rgb(75, 4, 75); color: wheat; } .container { /*background-color:black;*/ display: flexbox; } h1 { margin-left: 42%; margin-top: 200px; } #get-Number { margin-left: 35%; border-top-left-radius: 15px; border-bottom-left-radius: 15px; height: 50px; width: 350px; border: none; border-bottom-style: solid; background-color: rgba(128, 0, 128, 0.164); color: wheat; } #get-button { border-top-right-radius: 15px; border-bottom-right-radius: 15px; height: 55px; width: 150px; border: none; background-color: rgba(128, 0, 128, 0.164); color: wheat; border-bottom-style: solid; } #result-container { margin-left: 50%; height: 35px; } #result-number { padding-left: 15px; } <div class="container"> <h1>Factorialize A Number</h1> </div> <div class="container"> <form> <input type="number" placeholder="Write your number" id="get-Number"> <button type="button" id="get-button">Get Number</button> </form> </div> <div class="container" id="result-container"> <h4>Result</h4> <div id="result-number">0</div> </div>Soy nuevo en esta era de codificación y no tengo ningún amigo que me ayude. Espero que alguien pueda ayudarme en esta plataforma. En este código, intento tener el valor del elemento de entrada y luego quise insertarlo en el función factorializar para obtener su versión factorializada para enviarla al resultado. texto interno para mostrarlo en la página web.
Cuando intento controlarlos con console.log, no muestra nada porque no hay nada que el usuario haya puesto en la entrada cuando trato de ponerlo antes de ejecutar el código, simplemente actualiza la página.
Casi llegaste, pero nunca actualizaste lastResult , que también es innecesario aquí.
En lugar de usar eso, simplemente use el valor actual de la entrada en el momento en que se hace clic en el botón y páselo a factorialize . Para que eso funcione, factorialize necesita return explícitamente lo que ha calculado:
let getnumber = document.querySelector("#get-Number"); let getbutton = document.querySelector("#get-button"); let result = document.querySelector("#result-number"); function factorialize(num) { for (var i = num - 1; i >= 1; i--) { num *= i; } return num; } getbutton.addEventListener('click', () => { result.textContent = factorialize(getnumber.value); }) body { background-color: rgb(75, 4, 75); color: wheat; } .container { /*background-color:black;*/ display: flexbox; } h1 { margin-left: 42%; margin-top: 200px; } #get-Number { margin-left: 35%; border-top-left-radius: 15px; border-bottom-left-radius: 15px; height: 50px; width: 350px; border: none; border-bottom-style: solid; background-color: rgba(128, 0, 128, 0.164); color: wheat; } #get-button { border-top-right-radius: 15px; border-bottom-right-radius: 15px; height: 55px; width: 150px; border: none; background-color: rgba(128, 0, 128, 0.164); color: wheat; border-bottom-style: solid; } #result-container { margin-left: 50%; height: 35px; } #result-number { padding-left: 15px; } <div class="container"> <h1>Factorialize A Number</h1> </div> <div class="container"> <form> <input type="number" placeholder="Write your number" id="get-Number"> <button type="button" id="get-button">Get Number</button> </form> </div> <div class="container" id="result-container"> <h4>Result</h4> <div id="result-number">0</div> </div>El único problema que encontré es que no llama a la función factorializar también en la función de escucha de eventos de clic porque esta es la razón por la que su variable lastResult no se actualiza y la respuesta se muestra vacía.
Verifique el código a continuación.
//setting up variables let getnumber = document.querySelector("#get-Number"); let gotvalue = getnumber.value; let getbutton = document.querySelector("#get-button"); let result = document.querySelector("#result-number"); let lastResult = 0; //My Functions function factorialize(num) { if (num === 0 || num === 1) lastResult = 1; else if (num < 0) { lastResult = 0; } for (var i = num - 1; i >= 1; i--) { num *= i; } lastResult = num; } function write() { factorialize(getnumber.value) getbutton.addEventListener('click', () => { factorialize(getnumber.value) // call factorialize function also in click event listener function result.innerText = lastResult; }) } write() //calling write body { background-color: rgb(75, 4, 75); color: wheat; } .container { /*background-color:black;*/ display: flexbox; } h1 { margin-left: 42%; margin-top: 200px; } #get-Number { margin-left: 35%; border-top-left-radius: 15px; border-bottom-left-radius: 15px; height: 50px; width: 350px; border: none; border-bottom-style: solid; background-color: rgba(128, 0, 128, 0.164); color: wheat; } #get-button { border-top-right-radius: 15px; border-bottom-right-radius: 15px; height: 55px; width: 150px; border: none; background-color: rgba(128, 0, 128, 0.164); color: wheat; border-bottom-style: solid; } #result-container { margin-left: 50%; height: 35px; } #result-number { padding-left: 15px; } <div class="container"> <h1>Factorialize A Number</h1> </div> <div class="container"> <form> <input type="number" placeholder="Write your number" id="get-Number"> <button type="button" id="get-button">Get Number</button> </form> </div> <div class="container" id="result-container"> <h4>Result</h4> <div id="result-number">0</div> </div>