我無法在javascript中存盤html輸入以供使用

我正在嘗試做一個網站來分解我在輸入時寫的數字

//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>

我是這個編碼時代的新手，沒有任何朋友可以幫助我，希望有人可以在這個平臺上幫助我。在這段代碼中，我試圖獲得輸入元素的值，然后我想將其推送到factorialize 函式獲取其分解后的版本，將其推送到 result.innertext 以在網頁中顯示。

當我嘗試使用 console.log 來控制它們時，它什么也沒有顯示，因為當我嘗試在運行代碼之前輸入它時，用戶沒有輸入任何內容，它只會重繪 頁面。

uj5u.com熱心網友回復：

你快到了，但你從來沒有 update lastResult，這在這里也是不必要的。

而不是使用它，只需在單擊按鈕時使用輸入的當前值并將其傳遞給factorialize. 為此，factorialize 需要明確return它計算的內容：

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>

uj5u.com熱心網友回復：

我發現的唯一問題是您沒有在單擊事件偵聽器函式中呼叫 factorialize 函式，因為這個原因您的 lastResult 變數沒有更新并且答案顯示為空。

檢查下面的代碼。

//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>

標籤：

上一篇：如何在回圈內運行異步函式并獲取回傳值（Node.js/Javascript）

下一篇：如何在Javascript中比較2個陣列中的物件并回傳缺失的元素？