I cant store html inputs at javascript to use-CodePudding

I am trying to do a website to get the factorialize of the number that I writed at the input

//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 >
  <h1>Factorialize A Number</h1>
</div>
<div >
  <form>
    <input type="number" placeholder="Write your number" id="get-Number">
    <button type="button" id="get-button">Get Number</button>
  </form>
</div>

<div  id="result-container">
  <h4>Result</h4>
  <div id="result-number">0</div>
</div>

I am new at this coding era and I don't have any friends to help me I hope someone could help me at this platform.In this code I am tried to have the value of the input element then I wanted to push it in the factorialize function to get its factorialized version to push it to the result.innertext to show it in the web page.

When I try console.log to control them it shows nothing because theres nothing that user put in the input when ı try to put it before running the code it just refreshes the page.

CodePudding user response：

You were almost there, but you never update lastResult, which is also unnecessary here.

Instead of using that, just use the current value of the input at the time the button is clicked and pass it to factorialize. For that to work, factorialize needs to explicitly return what it has calculcated:

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 >
  <h1>Factorialize A Number</h1>
</div>
<div >
  <form>
    <input type="number" placeholder="Write your number" id="get-Number">
    <button type="button" id="get-button">Get Number</button>
  </form>
</div>

<div  id="result-container">
  <h4>Result</h4>
  <div id="result-number">0</div>
</div>

CodePudding user response：

The Only Problem I found is that you do not call factorialize function also in click event listener function because this reason your lastResult variable is not updated and the answer is showing empty.

Check below code.

//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 >
  <h1>Factorialize A Number</h1>
</div>
<div >
  <form>
    <input type="number" placeholder="Write your number" id="get-Number">
    <button type="button" id="get-button">Get Number</button>
  </form>
</div>

<div  id="result-container">
  <h4>Result</h4>
  <div id="result-number">0</div>
</div>