Only 1 decimal in a JavaScript calculator?

Question

Currently making a JavaScript calculator. Right now its not fully made just at the part where I only want 1 decimal point to show. Im trying to use a event listener with a function with if statements.

My full Code:

 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>

The part im interested in trying to fix/make work. The way i understand it or how im trying to do it. I make decimalClicker false and i run an if statement to check to see if it is there and if its not and the button is clicked it adds it but if it comes back true it wont add it.:

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

In console I get

Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function at index.html:56

Answer 1

Maybe you can use this and remove decimalClicked:

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

Then, only 1 '.' in your display.