Decimal problem in calculator

Hello,
I need help with my decimal button in my calculator. Its working now somehow but i need to perfect it more and kinda dont know how. So if you know a way how to make it better please help. The issue is when i press number and after i press decimal it works for example 2.34 but the problem is you can press decimal after every number making it for example 2.3.4 and thats not what i want. So if you know how to fix it please do. Thank you.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="kalkulacka.css">
    <meta charset="UTF-8">
    <title>Kalkulačka</title>
</head>
<body>
    <body>
            <div id="kalkulacka">
                    <div id="vysledek">
                        <div id="historie">
                            <p id="history-value"></p>
                        </div>
                        <div id="output">
                            <p id="output-value"></p>
                        </div>
                    </div>
                    <div id="klavesnice">
                        <button class="operator" id="clear">C</button>
                        <button class="operator" id="backspace">AC</button>
                        <button class="operator" id="opposite">+/-</button>
                        <button class="operator" id="/">&#247;</button>
                        <button class="number" id="7">7</button>
                        <button class="number" id="8">8</button>
                        <button class="number" id="9">9</button>
                        <button class="operator" id="*">&times;</button>
                        <button class="number" id="4">4</button>
                        <button class="number" id="5">5</button>
                        <button class="number" id="6">6</button>
                        <button class="operator" id="-">-</button>
                        <button class="number" id="1">1</button>
                        <button class="number" id="2">2</button>
                        <button class="number" id="3">3</button>
                        <button class="operator" id="+">+</button>
                        <button class="operator" id=".">.</button>
                        <button class="number" id="0">0</button>
                        <button class="operator" id="=">=</button>
                    </div>
                </div>
		<script src="kalkulacka.js"></script>
	</body>
</html>

JS

function getHistory(){
	return document.getElementById("history-value").innerText;
}

function printHistory(num){
	document.getElementById("history-value").innerText=num;
}

function getOutput(){
	return document.getElementById("output-value").innerText;
}

function printOutput(num){
    if(num==""){
		document.getElementById("output-value").innerText=num;
	}
	else{
		document.getElementById("output-value").innerText=getFormattedNumber(num);
	}	
}

function getFormattedNumber(num) {
	if(num.length > 10){
	  num = num.substr(0, 10);
    alert("Dosáhl jsi max outputu");
	}
	var n = Number(num);
	if (n == 'Infinity') {
        value = '0';
        alert("Error neděl nulou");
    } else {
	var value = n.toLocaleString("en");
    }
	return value;
  }

function reverseNumberFormat(num){
	return Number(num.replace(/,/g,''));
}

var operator = document.getElementsByClassName("operator");
for(var i =0;i<operator.length;i++){
	operator[i].addEventListener('click',function(){
		if(this.id=="clear"){
			printHistory("");
			printOutput("");
		}
		else if(this.id=="backspace"){
			var output=reverseNumberFormat(getOutput()).toString();
			if(output){
				output= output.substr(0,output.length-1);
				printOutput(output);
			}
		}
		else if (this.id == "opposite") {
			var invertedNum = (-reverseNumberFormat(getOutput()));
			printOutput(invertedNum);
		}
		else{
			var output=getOutput();
			var history=getHistory();
			if(output==""&&history!=""){
				if(isNaN(history[history.length-1])){
					history= history.substr(0,history.length-1);
				}
			}
			if(output!="" || history!=""){
				output= output==""?output:reverseNumberFormat(output);
				history=history+output;
				if(this.id=="="){
					var result=eval(history);
					printOutput(result);
					printHistory("");
				}
				else{
					history=history+this.id;
					printHistory(history);
					printOutput("");
				}   
            } 
		}
		
	});
}
 
var number = document.getElementsByClassName("number");
for(var i =0;i<number.length;i++){
	number[i].addEventListener('click',function(){
		var output=reverseNumberFormat(getOutput());
		if(output!=NaN){
			output=output+this.id;
            printOutput(output);           
        }
	});
}

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

Hello,
some guidance on how to approach it:

  1. set global variable decimalAllowed to true:
    let decimalAllowed = true;

  2. change your decimal point button click handler function so that you first check the value of decimalAllowed variable and if it’s true only then you add decimal point and update decimalAllowed variable to false:

if (decimalAllowed === true) {
  /* add decimal point */
  decimalAllowed = false;
}
  1. When decimalAllowed is set to false you can click decimal button and additional decimal points won’t be added. Now you want to think when you want to allow decimal points again. Probably when you are writing a new number (don’t confuse numbers with digits here). Number are separated by operators (like +, -, *, /). So you can update decimalAllowed variable to true after any of these operators button was clicked. Also you probably want to allow decimal points after clear button is clicked. Besides look at you code and see if there are any more situation when you want to reset decimalAllowed to true - if so do it.
2 Likes