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>
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
}
});
Advertisement
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";
});