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

read about [selectors](https://stackoverflow.com/a/10693852/8732818) and you will be able to understand why your listener is throwing an error — Calvin Nunes, Feb 04 '20 at 19:40
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Calvin Nunes, Feb 04 '20 at 19:42
`getElementsByClassName` returns an array, so you might want to add `[0]` to find the first element from the array, and then add event listener. — technophyle, Feb 04 '20 at 19:43
Ah okay that makes sense now. I have added an Id to the decimal and switched to getElementsById as they have to be unique and only have one. But with code I provided and the other member provided I still get multiple decimals. but the TypeError is now gone — BrettEvade, Feb 04 '20 at 20:10
have you read about [.toFixed()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) ?? — Calvin Nunes, Feb 04 '20 at 20:27
@CalvinNunes I have but it would help in this situation. I need to be able to only input 1 decimal that would help me format it if i clicked equal unless I read it wrong. — BrettEvade, Feb 04 '20 at 22:50

score 0 · Answer 1 · answered Feb 04 '20 at 19:43

0

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.

answered Feb 04 '20 at 19:43

Juan Andres solanas

185
7

Thanks for the comment. Implemented and still can get multiple "." and inspector still says: Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function at index.html:56 – BrettEvade Feb 04 '20 at 19:50

Only 1 decimal in a JavaScript calculator?

1 Answers1