javascript計算器無法從表單中獲取值-有解無憂

開頭的 num1 和 num2 中的 2 個變數不是從 javascript 檔案中的 HTML 表單中獲取的。如果我將值分配給輸入框，但當用戶更改值時無效

我是 javascript 的新手，正在努力學習，所以任何幫助都將不勝感激

let num1 = document.getElementById("num1-el").value
let num2 = document.getElementById("num2-el").value

let calEl = document.getElementById("cal-el")
let sumEl = document.getElementById("equals-el")
let sum = 0
const submitBtn = document.getElementById("submit-btn")

submitBtn.addEventListener("click", function() {

  if (calEl.value === " ") {
    sum = num1   num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "-") {
    sum = num1 - num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "*") {
    sum = num1 * num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "/") {
    sum = num1 / num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  }

})

body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div>
    <form>
      <input id="num1-el" type="number" value="<? echo $num1; ?>">
  </div>
  <div>
    <select id="cal-el">
      <option value=" "> </option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
  </form>
  <div>
    <button id="submit-btn">Submit</button>
  </div>
  <div id="equals-el">

  </div>
  <script src="index.js"></script>
</body>

</html>

uj5u.com熱心網友回復：

因為您num1 = document.getElementById("num1-el").value在最開始（當它為空時）進行初始化，然后從不更新它。你必須抓住它，num2然后點擊按鈕。

您還必須將它們轉換為數字，因為它們是字串"2"，而不是數字2。

2 3 == 5但是"2" "3" == "23"。

let num1;
let num2;

let calEl = document.getElementById("cal-el")
let sumEl = document.getElementById("equals-el")
let sum = 0
const submitBtn = document.getElementById("submit-btn")

submitBtn.addEventListener("click", function() {
  
  num1 =  document.getElementById("num1-el").value;
  num2 =  document.getElementById("num2-el").value;
  
  
  if (calEl.value === " ") {
    sum = num1   num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "-") {
    sum = num1 - num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "*") {
    sum = num1 * num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "/") {
    sum = num1 / num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  }

})

body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div>
    <form>
      <input id="num1-el" type="number" value="<? echo $num1; ?>">
  </div>
  <div>
    <select id="cal-el">
      <option value=" "> </option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
  </form>
  <div>
    <button id="submit-btn">Submit</button>
  </div>
  <div id="equals-el">

  </div>
  <script src="index.js"></script>
</body>

</html>

uj5u.com熱心網友回復：

這里有幾件事是錯誤的：

您希望在單擊提交按鈕而不是在加載代碼時采樣num1和num2取值。
由于您使用input的.value是，因此是一個字串，因此您需要將其轉換為數字Number()。
而不是sumEl.innerHTML =，只使用sumEl.innerHTML =. 否則它只會在答案中添加另一個元素。
由于您擁有相同的代碼<p>The Answer is ${sum}</p>，因此您可以將其匯出到所有if else更簡潔的代碼下方。
僅在使用變數時使用變數。如果您不需要在高范圍內使用它們 - 不要僅僅因為您可以就在那里定義它們。

let calEl = document.getElementById("cal-el");
let sumEl = document.getElementById("equals-el");
const submitBtn = document.getElementById("submit-btn");

submitBtn.addEventListener("click", function() {
  let sum = 0;
  let num1 = Number(document.getElementById("num1-el").value);
  let num2 = Number(document.getElementById("num2-el").value);

  if (calEl.value === " ") {
    sum = num1   num2
  } else if (calEl.value === "-") {
    sum = num1 - num2
  } else if (calEl.value === "*") {
    sum = num1 * num2
  } else if (calEl.value === "/") {
    sum = num1 / num2
  }

  sumEl.innerHTML = `<p>The Answer is ${sum}</p>`


})

body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}

<form>
  <input id="num1-el" type="number" value="<? echo $num1; ?>">
  <div>
    <select id="cal-el">
      <option value=" "> </option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
</form>
<div>
  <button id="submit-btn">Submit</button>
</div>
<div id="equals-el">
</div>

uj5u.com熱心網友回復：

您必須從input函式內部獲取值，因為需要一個事件來獲取值（有時是onchange，oninput...）。

由于inputare的初始值null意味著它是空的（在加載腳本和變數時只使用它）。但是當您使用任何事件時，它們現在已被填充，更新后的值將被納入變數

也用于Number()轉換string為，number因為string不要加起來像number：
Number as string : "1" "4"="14"這是一個字串連接
Number as number : 1 4=5

JavaScript 將嘗試在所有數字運算中將字串轉換為數字，例如乘法、除法或減法......

閱讀本文了解更多資訊

let sum = 0
const submitBtn = document.getElementById("submit-btn")
let calEl = document.getElementById("cal-el")
let sumEl = document.getElementById("equals-el")

submitBtn.addEventListener("click", function() {
  let num1 = document.getElementById("num1-el").value
  let num11 = Number(num1)
  let num2 = document.getElementById("num2-el").value
  let num22 = Number(num2)

  if (calEl.value === " ") {
    sum = num11   num22
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "-") {
    sum = num1 - num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "*") {
    sum = num1 * num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  } else if (calEl.value === "/") {
    sum = num1 / num2
    sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
  }

})

body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div>
    <form>
      <input id="num1-el" type="number" value="<? echo $num1; ?>">
  </div>
  <div>
    <select id="cal-el">
      <option value=" "> </option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
  </form>
  <div>
    <button id="submit-btn">Submit</button>
  </div>
  <div id="equals-el">

  </div>
  <script src="index.js"></script>
</body>

</html>

uj5u.com熱心網友回復：

首先，我建議閱讀有關服務器/客戶端編程的內容，以了解 Javascript 和 PHP 等語言之間的區別。一個好的開始可能是
客戶端和服務器端編程之間有什么區別？.

要解決您的代碼中的一些問題：

HTML 無效，并非所有打開的元素也都關閉。考慮使用 linter 或驗證器
value="<? echo $num1; ?>" 是 php 語法，這里不需要。
在<form>常用的進步的東西，有一個自定義操作。我的猜測是您可以通過使用以下內容來簡化代碼onClick：
在按下按鈕之前，您將獲得num1-el和num2-el值，讓我們將其移動到中，以便我們確定我們擁有最新的值。onClick
由于. value回傳一個字串，我們需要使用Number()將其轉換為實數
因為你總是在做sumEl.innerHTML = ...，我們可以把它移到外面if/else以使其更具可讀性。

const btn = document.getElementById("submit-btn")
btn.addEventListener("click", function() {

  let num1 = Number(document.getElementById("num1-el").value);
  let num2 = Number(document.getElementById("num2-el").value);

  let calEl = document.getElementById("cal-el")
  let sumEl = document.getElementById("equals-el")
  let sum = 0;

  if (calEl.value === " ") {
    sum = num1   num2;
  } else if (calEl.value === "-") {
    sum = num1 - num2;
  } else if (calEl.value === "*") {
    sum = num1 * num2;
  } else if (calEl.value === "/") {
    sum = num1 / num2;
  }
  
  sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`
});

body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

input, select, button {
  width: 100px;
}

<div class='container'>
    <input id="num1-el" type="number">
    <select id="cal-el">
        <option value=" "> </option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input id="num2-el" type="number">
    <button id="submit-btn">Calculate</button>
    <div id="equals-el">
</div>

uj5u.com熱心網友回復：

從任何值托克input，textarea，select或其它HTML element使用JavaScript，默認情況下它的資料型別是串，直到使用資料型別轉換（轉換為一個新的變數和其它資料型別）這個值。

此外，您可以使用switch()替代if()陳述句，使您的代碼更清晰，更不穩定。

const submitBtn = document.getElementById("submit-btn");
submitBtn.addEventListener("click", function() {
  let sum = 0;
  let num1 = Number(document.getElementById("num1-el").value);
  let num2 = Number(document.getElementById("num2-el").value);
  let calEl = document.getElementById("cal-el");
  let sumEl = document.getElementById("equals-el");
  switch(calEl.value){
    case " ": {sum = num1   num2;break;}
    case "-": {sum = num1 - num2;break;}
    case "*": {sum = num1 * num2;break;}
    case "/": {sum = num1 / num2;break;}
    // If the user didn't select the operator ( ,-,* or /) then the defualt operator is ' ';
    default:  {sum = num1   num2;break;}
  }
  sumEl.innerHTML  = `<p>The Answer is ${sum}</p>`;
});

body {
  background-color: lightskyblue;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  text-align: center;
}

<html>

<head>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div>
    <form>
      <input id="num1-el" type="number" value="<? echo $num1; ?>">
  </div>
  <div>
    <select id="cal-el">
      <option value=" "> </option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>
  <div>
    <input id="num2-el" type="number">
  </div>
  </form>
  <div>
    <button id="submit-btn">Submit</button>
  </div>
  <div id="equals-el">

  </div>
  <script src="index.js"></script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/341318.html

標籤：javascript html

上一篇：如果在陣列中找到單詞，則Vue.js按下拉串列過濾（僅不完全匹配）

下一篇：在一個if內執行多個動作