JavaScript 計算器中只有 1 位小數？

Question

目前正在制作一個 JavaScript 計算器。 現在它沒有完全制作在我只想要顯示 1 個小數點的部分。 我試圖使用帶有 if 語句的函數的事件偵聽器。

我的完整代碼：

 function insert(num) { document.getElementById('display').innerHTML = document.getElementById('display').innerHTML + num; } function clean() { document.getElementById('display').innerHTML = "0"; } let display = document.getElementsByName("display"); let decimalClicker = false; document.getElementsByClassName("point").addEventListener("click", function() { if (display === ".") if (decimalClicked != true) { display += "."; decimalClicked = true; } })

 <div class="containter"> <form name="form"> <table> <div class="display" id="display">0</div> <tr> <td colspan="3"><input class="clear" type="button" value="clear" onclick="clean(0)"></td> <td><button class="op div" type="button" value="'/'" onclick="insert('/')"></button></td> </tr> <tr> <td><input class="num" type="button" value="9" onclick="insert(9)"></td> <td><input class="num" type="button" value="8" onclick="insert(8)"></td> <td><input class="num" type="button" value="7" onclick="insert(7)"></td> <td><input class="op mul" type="button" value="x" onclick="insert('*')"></td> </tr> <tr> <td><input class="num" type="button" value="4" onclick="insert(4)"></td> <td><input class="num" type="button" value="5" onclick="insert(5)"></td> <td><input class="num" type="button" value="6" onclick="insert(6)"></td> <td><input class="op sub" type="button" value="-" onclick="insert('-')"></td> </tr> <tr> <td><input class="num" type="button" value="1" onclick="insert(1)"></td> <td><input class="num" type="button" value="2" onclick="insert(2)"></td> <td><input class="num" type="button" value="3" onclick="insert(3)"></td> <td><input class="op add" type="button" value="+" onclick="insert('+')"></td> </tr> <tr> <td colspan="2" style="text-align: center;"><input class="numo" type="button" value="0" onclick="insert(0)"></td> <td><input class="point" type="button" value="." onclick="insert('.')"></td> <td><input class="eq" type="button" value="=" onclick="insert('=')"></td> </tr> </table> </form> </div>

我有興趣嘗試修復/制作的部分。 我理解它的方式或我如何嘗試去做。 我將decimalClicker設為false，然后運行if語句來檢查它是否存在，如果不存在，則單擊按鈕會添加它，但如果返回true，則不會添加它。：

let display = document.getElementsByName("display");
let decimalClicker = false;
document.getElementsByClassName("point").addEventListener("click", function(){
    if (display != ".")
        if(decimalClicked != true){
            display += ".";
            decimalClicked = true;
        }
}
)

在控制台我得到

未捕獲的類型錯誤：document.getElementsByClassName(...).addEventListener 不是 index.html:56 處的函數

Answer 1

也許您可以使用它並刪除decimalClicked：

let display = document.getElementsByName("display");
let decimalClicker = false;
document.getElementsByClassName("point").addEventListener("click", function(){
if (display.indexOf('.') == -1){
    display += '.';
  }
 )

然后，只有 1 個 '.' 在您的顯示器中。