the ‘0.’ keeps disappearing after clicking other numbers in calculator

So i am building a calculator. I am trying to get the decimals to display on screen. That is not the problem. After i click the decimal button; and then a random number button, the zero to the right of the decimal point disappears. I believe this is happening because i am using the replace method to get rid of the zero in the numbers function. This is a very simple implementation that i feel like i should already know. I wanted to know if anybody had any ideas?

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Calculator</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>My Calculator</h1>
    <br>

    <div class="container calculator">
        <div class="screen_display">0</div>
        <button class="calcbutton operator" id="+">+</button>
        <button class="calcbutton operator" id="-">-</button>
        <button class="calcbutton operator" id="+">÷</button>
        <button class="calcbutton operator" id="x">x</button>
        <button class="calcbutton number" id="7" value="7">7</button>
        <button class="calcbutton number" id="8" value="8">8</button>
        <button class="calcbutton number" id="9" value="9">9</button>
        <button class="calcbutton number" id="4" value="4">4</button>
        <button class="calcbutton number" id="5" value="5">5</button>
        <button class="calcbutton number" id="6" value="6">6</button>
        <button class="calcbutton number" id="1" value="1">1</button>
        <button class="calcbutton number" id="2" value="2">2</button>
        <button class="calcbutton number" id="3" value="3">3</button>
        <button class="calcbutton number" id="0" value="0">0</button>
        <button class="calcbutton decimal" id="." value='.'>.</button>
        <button class="calcbutton others" id="clear">AC</button>
        <button class="calcbutton other" id="equals">=</button>
    </div>

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

</html>

JavaScript
​x
 
<!DOCTYPE html>
​
<html>
​
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Calculator</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
​
<body>
    <h1>My Calculator</h1>
    <br>
​
    <div class="container calculator">
        <div class="screen_display">0</div>
        <button class="calcbutton operator" id="+">+</button>
        <button class="calcbutton operator" id="-">-</button>
        <button class="calcbutton operator" id="+">÷</button>
        <button class="calcbutton operator" id="x">x</button>
        <button class="calcbutton number" id="7" value="7">7</button>
        <button class="calcbutton number" id="8" value="8">8</button>
        <button class="calcbutton number" id="9" value="9">9</button>
        <button class="calcbutton number" id="4" value="4">4</button>
        <button class="calcbutton number" id="5" value="5">5</button>
        <button class="calcbutton number" id="6" value="6">6</button>
        <button class="calcbutton number" id="1" value="1">1</button>
        <button class="calcbutton number" id="2" value="2">2</button>
        <button class="calcbutton number" id="3" value="3">3</button>
        <button class="calcbutton number" id="0" value="0">0</button>
        <button class="calcbutton decimal" id="." value='.'>.</button>
        <button class="calcbutton others" id="clear">AC</button>
        <button class="calcbutton other" id="equals">=</button>
    </div>
​
    <script src="index.js"></script>
</body>
​
</html>
​

const numberButton = document.querySelectorAll('.number'); //console.log(numbers)
const operatorButton = document.querySelectorAll('.operator');
const toolButton = document.querySelectorAll('.others');
const decimalButton = document.querySelector('.decimal');
const screenDisplay = document.querySelector('.screen_display')

let display, number, zero,
    equal = false;
let valEntered = false;

numberButton.forEach(num => {
    num.addEventListener("click", (e) => {
        let str = screenDisplay.textContent
        display = screenDisplay.textContent = str.replace(/^0+/, "");
        if (valEntered) {
            display = screenDisplay.textContent = e.target.value;
        } else {
            display = screenDisplay.textContent += e.target.value;
        }

        if (display.length > 16) {
            alert("Thats as far as it goes");
        }
    })
});


decimalButton.addEventListener('click', (e) => {
    let decimal = e.target.value;
    zero = '0'
    if (zero) {
        display = screenDisplay.textContent += decimal
    }

});

JavaScript
 
const numberButton = document.querySelectorAll('.number'); //console.log(numbers)
const operatorButton = document.querySelectorAll('.operator');
const toolButton = document.querySelectorAll('.others');
const decimalButton = document.querySelector('.decimal');
const screenDisplay = document.querySelector('.screen_display')
​
let display, number, zero,
    equal = false;
let valEntered = false;
​
numberButton.forEach(num => {
    num.addEventListener("click", (e) => {
        let str = screenDisplay.textContent
        display = screenDisplay.textContent = str.replace(/^0+/, "");
        if (valEntered) {
            display = screenDisplay.textContent = e.target.value;
        } else {
            display = screenDisplay.textContent += e.target.value;
        }
​
        if (display.length > 16) {
            alert("Thats as far as it goes");
        }
    })
});
​
​
decimalButton.addEventListener('click', (e) => {
    let decimal = e.target.value;
    zero = '0'
    if (zero) {
        display = screenDisplay.textContent += decimal
    }
​
});
​

Answer

Try this below code. I have added an if condition, if (!str.includes(".")) which will now only replace 0, if there is no decimal.

const numberButton = document.querySelectorAll(".number"); //console.log(numbers)
const operatorButton = document.querySelectorAll(".operator");
const toolButton = document.querySelectorAll(".others");
const decimalButton = document.querySelector(".decimal");
const screenDisplay = document.querySelector(".screen_display");
const clearButton = document.getElementById("clear");

let display,
  number,
  zero,
  equal = false;
let valEntered = false;

numberButton.forEach((num) => {
  num.addEventListener("click", (e) => {
    let str = screenDisplay.textContent;
    if (!str.includes("."))
      display = screenDisplay.textContent = str.replace(/^0+/, "");
    if (valEntered) {
      display = screenDisplay.textContent = e.target.value;
    } else {
      display = screenDisplay.textContent += e.target.value;
    }

    if (display.length > 16) {
      alert("Thats as far as it goes");
    }
  });
});

decimalButton.addEventListener("click", (e) => {
  let decimal = e.target.value;
  zero = "0";
  if (zero) {
    display = screenDisplay.textContent += decimal;
  }
});

clearButton.addEventListener("click", (e) => {
  screenDisplay.innerHTML = "0";
});

JavaScript
 
const numberButton = document.querySelectorAll(".number"); //console.log(numbers)
const operatorButton = document.querySelectorAll(".operator");
const toolButton = document.querySelectorAll(".others");
const decimalButton = document.querySelector(".decimal");
const screenDisplay = document.querySelector(".screen_display");
const clearButton = document.getElementById("clear");
​
let display,
  number,
  zero,
  equal = false;
let valEntered = false;
​
numberButton.forEach((num) => {
  num.addEventListener("click", (e) => {
    let str = screenDisplay.textContent;
    if (!str.includes("."))
      display = screenDisplay.textContent = str.replace(/^0+/, "");
    if (valEntered) {
      display = screenDisplay.textContent = e.target.value;
    } else {
      display = screenDisplay.textContent += e.target.value;
    }
​
    if (display.length > 16) {
      alert("Thats as far as it goes");
    }
  });
});
​
decimalButton.addEventListener("click", (e) => {
  let decimal = e.target.value;
  zero = "0";
  if (zero) {
    display = screenDisplay.textContent += decimal;
  }
});
​
clearButton.addEventListener("click", (e) => {
  screenDisplay.innerHTML = "0";
});
​

Advertisement

Answer