let reset = document.getElementById("reset"),
output = document.getElementById("output"),
calcButtons = document.getElementById("calc_buttons");
function clearScreen() {
output.innerHTML = " "
}
calcButtons.addEventListener("click", printNum, false);
function printNum(e) {
if (e.target !== e.currentTarget) {
let clickedItem = e.target.value;
output.innerHTML += clickedItem;
};
}
function add(){
};
function subtract(){
};
function multiply(){
};
function divide(){
};
<h1> My First JavaScript Calculator </h2>
<div id="calculator">
<div id="calc_buttons">
<span id="output"></span>
<button onclick="clearScreen()"class="operate" id="reset">C</button>
<button class="num" id="seven" value="7">7</button>
<button class="num" id="eight" value="8">8</button>
<button class="num" id="nine" value="9">9</button>
<button class="operate" id="divide" value="/">/</button>
<button class="num" id="four" value="4">4</button>
<button class="num" id="five" value="5">5</button>
<button class="num" id="six" value="6">6</button>
<button class="operate" id="multiply" value="*">*</button>
<button class="num" id="one" value="1">1</button>
<button class="num" id="two" value="2">2</button>
<button class="num" id="three" value="3">3</button>
<button class="operate" id="minus" value="-">-</button>
<button class="num" id="zero" value="0">0</button>
<button class="operate" id="decimal" value=".">.</button>
<button class="operate" id="equals" value="=">=</button>
<button class="operate" id="plus" value="+">+</button>
</div>
How would I set up a functions for multiple operations in a calculator application?
I have most of the calculator finished aside from the actual 'calculation' portion of it. Which is kind of the main point of a calculator. This one is escaping me. Does anyone have any ideas on how to approach this issue? I'd appreciate some in-depth explanation as well.
Related
I'm working on a simple JavaScript calculator. Everything seems fine and other buttons works as expected except for the equal button which returns an "undefined" when it is clicked. On clicking the equal button, "if" the value of the screen is empty, I want the value of the screen to be set to an empty string, else, the new screen.value should be the result of an eval();
I've gone over the code several times and can't find what the problem is. Pls help. Thanks.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
<div class="wrapper">
<form>
<input type="text" class="screen" placeholder="0" value="";>
</form>
<div class="buttons">
<button type="button" class="btn btn-yellow" data-num="*">*</button>
<button type="button" class="btn btn-yellow" data-num="/">/</button>
<button type="button" class="btn btn-yellow" data-num="-">-</button>
<button type="button" class="btn btn-yellow" data-num="+">+</button>
<button type="button" class="btn btn-grey" data-num="9">9</button>
<button type="button" class="btn btn-grey" data-num="8">8</button>
<button type="button" class="btn btn-grey" data-num="7">7</button>
<button type="button" class="btn btn-grey" data-num="6">6</button>
<button type="button" class="btn btn-grey" data-num="5">5</button>
<button type="button" class="btn btn-grey" data-num="4">4</button>
<button type="button" class="btn btn-grey" data-num="3">3</button>
<button type="button" class="btn btn-grey" data-num="2">2</button>
<button type="button" class="btn btn-grey" data-num="1">1</button>
<button type="button" class="btn btn-grey" data-num="0">0</button>
<button type="button" class="btn btn-grey" data-num=".">.</button>
<button type="button" class="btn btn-equal">=</button>
<button type="button" class="btn btn-clear">C</button>
</div>
</div>
<script type="text/javascript" src="calculator.js"></script>
</body>
</html>
JAVASCRIPT CODE HERE
(function(){
let screen = document.querySelector(".screen");
let buttons = document.querySelectorAll(".btn");
let equal = document.querySelector(".btn-equal");
let clear = document.querySelector(".btn-clear");
buttons.forEach(function(button) {
button.addEventListener("click", function(e){
let value = e.target.dataset.num;
screen.value += value;
})
});
equal.addEventListener("click", function(e){
if (screen.value === "") {
screen.value = "";
} else{
let answer = eval(screen.value);
screen.value = answer;
}
})
clear.addEventListener("click", function(){
screen.value = "";
})
})();
The issue because you give the "=" button a ".btn" class, which has the 'click' event listener, and because the "=" button doesn't have attribute data-num, the input will be concatenate with undefined, so any calculation you will do will be end with "undefined" which give Syntax error.
So just removing "btn" class from "=" button will solve the issue.
This works, please check.
(function(){
let screen = document.querySelector(".screen");
let buttons = document.querySelectorAll(".btn");
let equal = document.querySelector(".btn-equal");
let clear = document.querySelector(".btn-clear");
buttons.forEach(function(button) {
button.addEventListener("click", function(e){
let value = e.target.dataset.num;
console.log(value)
screen.value += value;
})
});
equal.addEventListener("click", function(e){
if (screen.value === "") {
screen.value = "";
} else{
console.log(screen.value)
let answer = eval(screen.value);
screen.value = answer;
}
})
clear.addEventListener("click", function(){
screen.value = "";
})
})();
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
<div class="wrapper">
<form>
<input type="text" class="screen" placeholder="0" value="";>
</form>
<div class="buttons">
<button type="button" class="btn btn-yellow" data-num="*">*</button>
<button type="button" class="btn btn-yellow" data-num="/">/</button>
<button type="button" class="btn btn-yellow" data-num="-">-</button>
<button type="button" class="btn btn-yellow" data-num="+">+</button>
<button type="button" class="btn btn-grey" data-num="9">9</button>
<button type="button" class="btn btn-grey" data-num="8">8</button>
<button type="button" class="btn btn-grey" data-num="7">7</button>
<button type="button" class="btn btn-grey" data-num="6">6</button>
<button type="button" class="btn btn-grey" data-num="5">5</button>
<button type="button" class="btn btn-grey" data-num="4">4</button>
<button type="button" class="btn btn-grey" data-num="3">3</button>
<button type="button" class="btn btn-grey" data-num="2">2</button>
<button type="button" class="btn btn-grey" data-num="1">1</button>
<button type="button" class="btn btn-grey" data-num="0">0</button>
<button type="button" class="btn btn-grey" data-num=".">.</button>
<button type="button" class="btn-equal">=</button>
<button type="button" class="btn btn-clear">C</button>
</div>
</div>
</body>
</html>
When I click on a button, the number isn't displayed on the current-output div. This is supposed to be a test if I hooked up the buttons right. Any possible fixes for this? Can it be the problem of using classes? I'm writing the code in vanilla JavaScript.
const numberButtons = Array.from(document.getElementsByClassName('number'));
const previousOutputText = Array.from(document.getElementsByClassName('previous-output'));
const currentOutputText = Array.from(document.getElementsByClassName('current-output'));
class Calculator {
constructor(previousOutputText, currentOutputText) {
this.previousOutputText = previousOutputText;
this.currentOutputText = currentOutputText;
}
addNumber(number) {
this.currentOutput = number;
}
updateDisplay() {
this.currentOutputText.innerHTML = this.currentOutput;
}
}
const calculator = new Calculator(previousOutputText, currentOutputText);
numberButtons.forEach(button => {
button.addEventListener('click', () => {
calculator.addNumber(button.innerHTML);
calculator.updateDisplay();
})
})
<div class="output">
<div data-previous-output class="previous-output"></div>
<div data-current-output class="current-output"></div>
</div>
<button class="span-two all-clear" data-all-clear>AC</button>
<button class="delete" data-delete>DEL</button>
<button class="operation" data-operation>/</button>
<button class="number" data-number>7</button>
<button class="number" data-number>8</button>
<button class="number" data-number>9</button>
<button class="operation" data-operation>*</button>
<button class="number" data-number>4</button>
<button class="number" data-number>5</button>
<button class="number" data-number>6</button>
<button class="operation" data-operation>-</button>
<button class="number" data-number>1</button>
<button class="number" data-number>2</button>
<button class="number" data-number>3</button>
<button class="operation" data-operation>+</button>
<button class="number" data-number>0</button>
<button class="number" data-number>.</button>
<button class="span-two equals" data-equals>=</button>
You didn't provide the script position, and it can be the problem.
Check with this lines that buttons are really found from DOM
console.log('Working on buttons', numberButtons);
numberButtons.forEach(button => {
If they are not presents, move the <script> right before </body>
Then just put some console.log into the click even handler and some of Calculator method will provide you a really simple debug.
Your two arrayFrom for the outputs are wrong
You should delegate
I am not entirely happy with the "this" in your code either
const previousOutputText = document.querySelector('.previous-output');
const currentOutputText = document.querySelector('.current-output');
class Calculator {
constructor(previousOutputText, currentOutputText) {
this.currentOutput = "";
this.previousOutputText = previousOutputText;
this.currentOutputText = currentOutputText;
}
addNumber(number) {
this.currentOutput = number;
}
updateDisplay() {
this.currentOutputText.innerHTML = this.currentOutput;
}
}
const calculator = new Calculator(previousOutputText, currentOutputText);
document.getElementById("container").addEventListener("click",function(e) {
e.preventDefault(); // or make all buttons type="button"
const tgt = e.target;
if (tgt.classList.contains("btn")) {
calculator.addNumber(tgt.innerHTML);
calculator.updateDisplay();
}
})
<div class="output">
<div data-previous-output class="previous-output">xxx</div>
<div data-current-output class="current-output">yyy</div>
</div>
<div id="container">
<button class="btn span-two all-clear" data-all-clear>AC</button>
<button class="btn delete" data-delete>DEL</button>
<button class="btn operation" data-operation>/</button>
<button class="btn number" data-number>7</button>
<button class="btn number" data-number>8</button>
<button class="btn number" data-number>9</button>
<button class="btn operation" data-operation>*</button>
<button class="btn number" data-number>4</button>
<button class="btn number" data-number>5</button>
<button class="btn number" data-number>6</button>
<button class="btn operation" data-operation>-</button>
<button class="btn number" data-number>1</button>
<button class="btn number" data-number>2</button>
<button class="btn number" data-number>3</button>
<button class="btn operation" data-operation>+</button>
<button class="btn number" data-number>0</button>
<button class="btn number" data-number>.</button>
<button class="btn span-two equals" data-equals>=</button></div>
For your output text, getElementsByClassName returns an HTMLCollection, The fix would be to get the first index of the output elements.
const numberButtons = Array.from(document.getElementsByClassName('number'));
const previousOutputText = document.getElementsByClassName('previous-output')[0];
const currentOutputText = document.getElementsByClassName('current-output')[0];
class Calculator {
constructor(previousOutputText, currentOutputText) {
this.previousOutputText = previousOutputText;
this.currentOutputText = currentOutputText;
}
addNumber(number) {
this.currentOutput = number;
}
updateDisplay() {
this.currentOutputText.innerHTML = this.currentOutput;
}
}
const calculator = new Calculator(previousOutputText, currentOutputText);
numberButtons.forEach(button => {
button.addEventListener('click', () => {
calculator.addNumber(button.innerHTML);
calculator.updateDisplay();
})
})
<div class="output">
<div data-previous-output class="previous-output"></div>
<div data-current-output class="current-output"></div>
</div>
<button class="span-two all-clear" data-all-clear>AC</button>
<button class="delete" data-delete>DEL</button>
<button class="operation" data-operation>/</button>
<button class="number" data-number>7</button>
<button class="number" data-number>8</button>
<button class="number" data-number>9</button>
<button class="operation" data-operation>*</button>
<button class="number" data-number>4</button>
<button class="number" data-number>5</button>
<button class="number" data-number>6</button>
<button class="operation" data-operation>-</button>
<button class="number" data-number>1</button>
<button class="number" data-number>2</button>
<button class="number" data-number>3</button>
<button class="operation" data-operation>+</button>
<button class="number" data-number>0</button>
<button class="number" data-number>.</button>
<button class="span-two equals" data-equals>=</button>
I want to make a calculator that shows the numbers clicked before calculating. this version is not completed but the code that shows the numbers is completed but its not working as supposed.
function getHistory() {
return document.querySelector(".history-value").innerText;
}
function printHistory(num) {
document.querySelector(".history-value").innerText = num;
}
function getOutput() {
document.getElementById("output-value").innertxt;
}
function printOutput(num) {
document.getElementById("output-value").innerText = num;
}
let getOperator = document.getElementsByClassName("operator");
for (var i = 0; i < getOperator.length; i++) {
getOperator[i].addEventListener("click", function() {
//uncompleted code
})
}
let getNumber = document.getElementsByClassName("number");
for (var i = 0; i < getNumber.length; i++) {
getNumber[i].addEventListener("click", function() {
let output = getOutput();
if (output != NaN) {
output = output + this.id
printOutput(output)
}
})
}
<div class="container">
<div class="calculator">
<div class="result">
<div class="history">
<p class="history-value"></p>
</div>
<div class="output">
<p id="output-value"></p>
</div>
</div>
<div class="keyboard">
<button class="operator" id="clear">C</button>
<button class="operator" id="backspace">CE</button>
<button class="operator" id="%">%</button>
<button class="operator" id="/">÷</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="*">×</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="empty" id="empty"></button>
<button class="number" id="0">0</button>
<button class="empty" id="empty"></button>
<button class="operator" id="=">=</button>
</div>
</div>
</div>
It has to show in the output all the numbers I've pressed but it is showing undefined plus the last pressed number
The culprit is in this function here:
function getOutput(){
document.getElementById("output-value").innertxt;
}
Two issues here:
1- Mind the typo: it's innerText, not innertxt!
2- This function is not returning the value is the innerText, in fact it returns nothing to the code that called it, hence the "undefined".
Also to show all numbers pressed, you can append the number to the string output using +=, like this:
if (output!=NaN) {
output+=this.id
printOutput(output)
}
(Also add a similar thing to the operators' onclick handler).
<body>
<div class="container">
<div class="calculator">
<div class="result">
<div class="history">
<p class="history-value"></p>
</div>
<div class="output">
<p id="output-value"></p>
</div>
</div>
<div class="keyboard">
<button class="operator" id="clear">C</button>
<button class="operator" id="backspace">CE</button>
<button class="operator" id="%">%</button>
<button class="operator" id="/">÷</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="*">×</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="empty" id="empty"></button>
<button class="number" id="0">0</button>
<button class="empty" id="empty"></button>
<button class="operator" id="=">=</button>
</div>
</div>
</div>
<script>
function getHistory(){
return document.querySelector(".history-value").innerText;
}
function printHistory(num){
document.querySelector(".history-value").innerText=num;
}
function getOutput(){
return document.getElementById("output-value").innerText;
}
function printOutput(num){
document.getElementById("output-value").innerText=num;
}
let getOperator= document.getElementsByClassName("operator");
for (var i = 0; i < getOperator.length; i++) {
getOperator[i].addEventListener("click",function(){
//uncompleted code
})
}
let getNumber= document.getElementsByClassName("number");
for (var i = 0; i < getNumber.length; i++) {
getNumber[i].addEventListener("click",function(){
let output=getOutput();
if (output!=NaN) {
output+=this.id
printOutput(output)
}
})
}
</script>
</body>
</html>
It's because output doesn't get any value from the function getOutput since nothing's being returned.
Because of that fact output is set to undefined. When you concatenate undefined with id (the number), whatever it may be, they are coerced to strings. This means you get "undefined7", "undefined9", "undefinedn", etc.
let output=getOutput(); // output is undefined.
if (output!=NaN) {
output=output+this.id //output plus n is "undefinedn"
To prove this we can use short-circuit evaluation:
let output=getOutput(); // output is undefined.
if (output!=NaN) {
output= output || "" + this.id //output plus n is "n"
This checks if output is falsy - since undefined is falsy, it returns an empty string and concats that with this.id instead.
Example:
<body>
<div class="container">
<div class="calculator">
<div class="result">
<div class="history">
<p class="history-value"></p>
</div>
<div class="output">
<p id="output-value"></p>
</div>
</div>
<div class="keyboard">
<button class="operator" id="clear">C</button>
<button class="operator" id="backspace">CE</button>
<button class="operator" id="%">%</button>
<button class="operator" id="/">÷</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="*">×</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="empty" id="empty"></button>
<button class="number" id="0">0</button>
<button class="empty" id="empty"></button>
<button class="operator" id="=">=</button>
</div>
</div>
</div>
<script>
function getHistory(){
return document.querySelector(".history-value").innerText;
}
function printHistory(num){
document.querySelector(".history-value").innerText=num;
}
function getOutput(){
document.getElementById("output-value").innertxt;
}
function printOutput(num){
document.getElementById("output-value").innerText=num;
}
let getOperator= document.getElementsByClassName("operator");
for (var i = 0; i < getOperator.length; i++) {
getOperator[i].addEventListener("click",function(){
//uncompleted code
})
}
let getNumber= document.getElementsByClassName("number");
for (var i = 0; i < getNumber.length; i++) {
getNumber[i].addEventListener("click",function(){
let output=getOutput();
if (output!=NaN) {
output=output||""+this.id
printOutput(output)
}
})
}
</script>
</body>
</html>
I've found that touchstart works better than the click event when working with my iPad, so I would like to use touchstart instead of 'click'.
Q: How do I refactor the JavaScript portion of the following? I used to have a single $(document).on('click','.number',pgm.number)
pgm = {}
pgm.number = function() {
console.log(this) // etc
}
btn1.addEventListener('touchstart', pgm.number, false)
btn2.addEventListener('touchstart', pgm.number, false)
btn3.addEventListener('touchstart', pgm.number, false)
btn4.addEventListener('touchstart', pgm.number, false)
btn5.addEventListener('touchstart', pgm.number, false)
btn6.addEventListener('touchstart', pgm.number, false)
btn7.addEventListener('touchstart', pgm.number, false)
btn8.addEventListener('touchstart', pgm.number, false)
btn9.addEventListener('touchstart', pgm.number, false)
btn0.addEventListener('touchstart', pgm.number, false)
<button id="btn1" class="number">1</button>
<button id="btn2" class="number">2</button>
<button id="btn3" class="number">3</button>
<button id="btn4" class="number">4</button>
<button id="btn5" class="number">5</button>
<button id="btn6" class="number">6</button>
<button id="btn7" class="number">7</button>
<button id="btn8" class="number">8</button>
<button id="btn9" class="number">9</button>
<button id="btn0" class="number">0</button>
You can get the buttons by class number and iterate over them using Array#forEach function and for each item add the event handler.
document.querySelectorAll('.number')
.forEach(btn => btn .addEventListener('touchstart', pgm.number, false))
See an example
function showId() {
console.log(this.id) ;
}
document.querySelectorAll('.number')
.forEach(btn => btn.addEventListener('click', showId, false))
<button id="btn1" class="number">1</button>
<button id="btn2" class="number">2</button>
<button id="btn3" class="number">3</button>
<button id="btn4" class="number">4</button>
<button id="btn5" class="number">5</button>
<button id="btn6" class="number">6</button>
<button id="btn7" class="number">7</button>
<button id="btn8" class="number">8</button>
<button id="btn9" class="number">9</button>
<button id="btn0" class="number">0</button>
Add the touchstart to the document and use the event target to check if the element has the className ".number". This is the closest to jQuery's event delegation:
pgm.number = function(e) {
var t = e.target; // get the taget of the event (the element that got touchstarted)
if(t.classList.contains("number")) { // if it has a class of .number
console.log(t); // log it (use it)
}
}
document.addEventListener("touchstart", pgm.number, false);
Example using click:
var pgm = {};
pgm.number = function(e) {
var t = e.target;
if (t.classList.contains("number")) {
console.log(t);
}
}
document.addEventListener("click", pgm.number, false);
<button id="btn1" class="number">1</button>
<button id="btn2" class="number">2</button>
<button id="btn3" class="number">3</button>
<button id="btn4" class="number">4</button>
<button id="btn5" class="number">5</button>
<button id="btn6" class="number">6</button>
<button id="btn7" class="number">7</button>
<button id="btn8" class="number">8</button>
<button id="btn9" class="number">9</button>
<button id="btn0" class="number">0</button>
var buttons = document.querySelectorAll('.number');
buttons.forEach((button)=>{
button.addEventListener('click',(e)=>{console.log(e.target)},false);
});
<button id="btn1" class="number">1</button>
<button id="btn2" class="number">2</button>
<button id="btn3" class="number">3</button>
<button id="btn4" class="number">4</button>
<button id="btn5" class="number">5</button>
<button id="btn6" class="number">6</button>
<button id="btn7" class="number">7</button>
<button id="btn8" class="number">8</button>
<button id="btn9" class="number">9</button>
<button id="btn0" class="number">0</button>
It's sample code.
I hope it help you.
I'm using the following JavaScript to add a decimal into an input field:
function addChar(input, character) {
if (input.value == null || input.value == "0"){
input.value = character}
else{
input.value += character}
};
$('#button-dot').click(function() {
addChar(this.form.display, '.');
});
with HTML markup:
<INPUT NAME="display" ID="disp" VALUE="0" SIZE="28" MAXLENGTH="25"/>
<button TYPE="button" ID="button-1" VALUE="1">1</button>
<button TYPE="button" ID="button-2" VALUE="2">2</button>
<button TYPE="button" ID="button-3" VALUE="3">3</button>
<button TYPE="button" ID="button-4" VALUE="4">4</button>
<button TYPE="button" ID="button-5" VALUE="5">5</button>
<button TYPE="button" ID="button-6" VALUE="6">6</button>
<button TYPE="button" ID="button-7" VALUE="7">7</button>
<button TYPE="button" ID="button-8" VALUE="8">8</button>
<button TYPE="button" ID="button-9" VALUE="9">9</button>
<button TYPE="button" ID="button-0" VALUE="0">0</button>
<button TYPE="button" ID="button-dot" VALUE=".">.</button>
When the user presses the the #button-dot key prior to any number key, the decimal appears with no zero to the left of it and I would like for that to be the case. So is there a way to alter this code such that when the user inputs the decimal point as the first key, a zero will appear to the left of the decimal?
Try this handler:
$('#button-dot').click(function(){
var txt = disp.val().replace(/\./g, '');
if(!txt)
txt = '0';
txt += '.';
disp.val(txt);
});
$(function() {
var disp = $('#disp');
//all buttons except for last button `dot`
$('[id^=button-]').slice(0, -1).click(function() {
var txt = disp.val();
if('0' === txt) { //modified condition
txt = '';
}
disp.val(txt + this.value);
});
$('#button-dot').click(function() {
var txt = disp.val().replace(/\./g, ''); //replace all previous dots
if (!txt)
txt = '0';
disp.val(txt + '.');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<INPUT NAME="display" ID="disp" VALUE="0" SIZE="28" MAXLENGTH="25" />
<button TYPE="button" ID="button-1" VALUE="1">1</button>
<button TYPE="button" ID="button-2" VALUE="2">2</button>
<button TYPE="button" ID="button-3" VALUE="3">3</button>
<button TYPE="button" ID="button-4" VALUE="4">4</button>
<button TYPE="button" ID="button-5" VALUE="5">5</button>
<button TYPE="button" ID="button-6" VALUE="6">6</button>
<button TYPE="button" ID="button-7" VALUE="7">7</button>
<button TYPE="button" ID="button-8" VALUE="8">8</button>
<button TYPE="button" ID="button-9" VALUE="9">9</button>
<button TYPE="button" ID="button-0" VALUE="0">0</button>
<button TYPE="button" ID="button-dot" VALUE=".">.</button>
Not entirely sure what you want, but this code will replace a dot or a zero or an empty input with 0.:
function addChar(input, character) {
if (input.value == '' || input.value == '.' || input.value == "0"){
input.value = "0" + character}
else{
input.value += character}
};
$('#button-dot').click(function() {
addChar($('input').get(0), '.');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="i" />
<button id="button-dot">.</button>