When I try to click on the keyboard keys like this: "/", (that requieres shift) it doesn't execute the code it is supposed to...I can't select it. Should I find another way? the complete code of my exercise is here: https://repl.it/#Sesadada/CALCULATOR
const buttons = document.querySelectorAll("button");
window.addEventListener("keydown", (e) => {
const key = document.querySelector(`button[data-key='${e.which}']`);
console.log(e.which, e.shiftKey);
if (e.which == 13) {
equal.click();
} else if (e.which == 8) {
zero();
} else {
key.click();
}
});
<div class="nums">
<button type="button" class="operator" data-key="80" value="%">%</button>
<button type="button" class="operator" data-key="68" value="/">/</button>
<button type="button" class="operator" data-key="187" value="+">+</button>
<button type="button" class="operator" data-key="88" value="*">x</button>
<button type="button" class="operator" data-key="189" value="-">-</button>
<button id="zero" type="button" class="operand" data-key="48" value="0">0</button>
<button type="button" class="equal" data-key="48" value="=">=</button>
</div>
You can use e.key to get the actual character that is being passed. So when the user holds shift + 5, e.key equals %.
const buttons = document.querySelectorAll(".operator");
buttons.forEach(function(e) {
e.addEventListener("click", function(el) {
console.log(el.target.value + " clicked");
});
});
window.addEventListener("keydown", (e) => {
const key = document.querySelector(`button[value='${e.key}']`);
if (key) {
key.click();
} else if (e.which == 13) {
equal.click();
} else if (e.which == 8) {
zero();
}
//const divide = document.querySelector(
//`button[data-key='${e.which.shiftKey}']`
//equal.click();
});
<div class="nums">
<button type="button" class="operator" data-key="5" value="%">%</button>
<button type="button" class="operator" data-key="68" value="/">/</button>
<button type="button" class="operator" data-key="187" value="+">+</button>
<button type="button" class="operator" data-key="88" value="*">x</button>
<button type="button" class="operator" data-key="189" value="-">-</button>
<button id="zero" type="button" class="operand" data-key="48" value="0">0</button>
<button type="button" class="equal" data-key="48" value="=">=</button>
</div>
Related
Im trying to get my numbers to display the assigned value on screen but I have no clue how to do it.
<div class="container">
<div class="Calaculatorout">
<div class="calculatordisplay">0</div>
<div class="buttons">
<button class="nine">9</button>
<button class="eight">8</button>
<button class="seven">7</button>
<button class="six">6</button>
<button class="five">5</button>
<button class="four">4</button>
<button class="three">3</button>
<button class="two">2</button>
<button class="one">1</button>
<button class="zero">0</button>
<button class="multi">X</button>
<button class="divide">/</button>
<button class="plus">+</button>
<button class="minus">-</button>
<button class="myForm">AC</button>
</div>
</div>
</div>
I need to find a way to assign the values in js or for them to appear on the webpage.
const del = document.querySelector(".back");
const buttons = document.querySelectorAll(".buttons");
const clear = document.querySelector(".clear");
const display = document.querySelector(".calculatordisplay");
buttons.forEach((button) => {
buttons.addEventListener("click", (e) => {
appendNumber(e);
updateDisplay();
});
});
function updateDisplay() {
display.textcontent;
}
Please be more specific with the question and provide all the details.
Anyway, the below code will help you to display the button value on the screen. Also, I added the concatenation logic.
But if you are trying to implement a calculator you need to do an extra bit of logic. Don't forget to handle number/0 or 0/0 scenario 😉
var disp = '';
function myFunction(x) {
disp = disp + x;
if(x == "AC") {
document.getElementById("calculatordisplay").innerHTML = 0;
} else if(disp == "") {
document.getElementById("calculatordisplay").innerHTML = x;
} else {
document.getElementById("calculatordisplay").innerHTML = disp;
}
}
<div class="container">
<div class="Calaculatorout">
<div id="calculatordisplay">0</div>
<div id="buttons">
<button onclick="myFunction(value)" id="nine" value="9">9</button>
<button onclick="myFunction(value)" id="eight" value="8">8</button>
<button onclick="myFunction(value)" id="seven" value="7">7</button>
<button onclick="myFunction(value)" id="six" value="6">6</button>
<button onclick="myFunction(value)" id="five" value="5">5</button>
<button onclick="myFunction(value)" id="four" value="4">4</button>
<button onclick="myFunction(value)" id="three" value="3">3</button>
<button onclick="myFunction(value)" id="two" value="2">2</button>
<button onclick="myFunction(value)" id="one" value="1">1</button>
<button onclick="myFunction(value)" id="zero" value="0">0</button>
<button onclick="myFunction(value)" id="multi" value="X">X</button>
<button onclick="myFunction(value)" id="divide" value="/">/</button>
<button onclick="myFunction(value)" id="plus" value="+">+</button>
<button onclick="myFunction(value)" id="minus" value="-">-</button>
<button onclick="myFunction(value)" id="myForm" value="AC">AC</button>
</div>
</div>
</div>
This is the HTML code and here the "CE" button i want to perform as a backspace.
HTML code..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculetor</title>
<link rel="stylesheet" href="calculetor.css">
</head>
<body>
<div id="container">
<div id="calculator">
<div id="result">
<p id="input"></p>
<p id="output"></p>
</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" value="7">7</button>
<button class="number" value="8">8</button>
<button class="number" value="9">9</button>
<button class="operator" id="*">*</button>
<button class="number" value="4">4</button>
<button class="number" value="5">5</button>
<button class="number" value="6">6</button>
<button class="operator" id="-">-</button>
<button class="number" value="1">1</button>
<button class="number" value="2">2</button>
<button class="number" value="3">3</button>
<button class="operator" id="+">+</button>
<button class="operator" id="log">log</button>
<button class="number" value="0">0</button>
<button class="operator" id="!">!</button>
<button class="operator" id="=">=</button>
</div>
</div>
</div>
<script src="calculetor.js"></script>
</body>
</html>
In this JS code in faction back() i want to write the logic of the backspace. Delete last character from input, however I would like to stick with JavaScript only without jquery.
JavaScript Code
let screen_input = document.getElementById("input1");
buttons = document.querySelectorAll(".keyboard");
let screen_output = document.getElementById("output");
screen_input = "";
for (item of buttons) {
item.addEventListener("click", (e) => {
buttonsText = e.target.innerText;
console.log(buttonsText);
if (buttonsText === "=") {
screen_output.textContent = eval(screen_input);
} else if (buttonsText === "C") {
screen_output.textContent = " ";
screen_input = "";
} else if (buttonsText === "CE") {
function back();//here i want to put the backspace logic
} else {
screen_input += buttonsText;
screen_output.textContent = screen_input;
}})};
So you want to perform an action when button pressed right?
Here is an example:
document.addEventListener("keydown", event => {
if(event.keyCode == 8){
console.log("backspace pressed")
}
});
Edit: You need to click in the snippet to make the code work.
I have trying to create a calculator using the eval() function. But for some reason my numbers and operator buttons wont show on the screen(form). Below is my html and js code.
const btns = document.querySelectorAll('.btn');
var screenView = document.querySelector('.screen');
const equalBtn = document.querySelector('.btn-equal');
const clearBtn = document.querySelector('.btn-clear');
for (let i = 0; i < btns.lenght; i++) {
btns[i].addEventListener('click', function() {
let number = btns[i].getAttribute('data-num');
screenView.value += number;
})
}
equalBtn.addEventListener('click', function() {
let value = eval(screenView.value);
screenView.value = value;
})
clearBtn.addEventListener('click', function() {
screenView.value = '';
})
<section class="calculator">
<form>
<input type="text" name="" id="" class="screen">
</form>
<div class="buttons">
<button type="button" class="btn btn-digits" data-num="7">7</button>
<button type="button" class="btn btn-digits" data-num="8">8</button>
<button type="button" class="btn btn-digits" data-num="9">9</button>
<button type="button" class="btn btn-operators" data-num="/">/</button>
<button type="button" class="btn btn-digits" data-num="4">4</button>
<button type="button" class="btn btn-digits" data-num="5">5</button>
<button type="button" class="btn btn-digits" data-num="6">6</button>
<button type="button" class="btn btn-operators" data-num="*">*</button>
<button type="button" class="btn btn-digits" data-num="1">1</button>
<button type="button" class="btn btn-digits" data-num="2">2</button>
<button type="button" class="btn btn-digits" data-num="3">3</button>
<button type="button" class="btn btn-operators" data-num="-">-</button>
<button type="button" class="btn btn-digits" data-num=".">.</button>
<button type="button" class="btn btn-digits" data-num="0">0</button>
<button type="button" class="btn-clear btn-digits">C</button>
<button type="button" class="btn btn-operators" data-num="+">+</button>
<button type="button" class="btn-equal btn-digits">=</button>
</div>
</section>
You have a typo there: lenght instead of length.
Also, I feel obliged to say, that eval() should always be considered after everything
else failed, as the last resort.
My current codes are not allowing me to properly display the operators. At this time I am not able to display an operator after an initial calculation. For example, if I do this '9+2' then press '='. I will get a result but if I press an operator like '*' the display will only show the operator without the number. Looking at my current code what am I missing? Please advise.
$(document).ready(function() {
var shouldbeClear = false;
//create variable to store input from user to calculate later
var inputs = [''];
//create string to store current input string
var totalString;
//create operators array for validation without the .
var operators1 = ['+', '-', '*', '/'];
var operators2 = ['.'];
//numbers for validation
var nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function getValue(value) {
if (operators2.includes(inputs[inputs.length - 1]) === true && value === '.') {
alert('STOP & RESTART!!!');
} else if (inputs.length === 1 && operators1.includes(value) === false) {
inputs.push(value);
} else if (operators1.includes(inputs[inputs.length - 1]) === false) {
inputs.push(value);
} else if (nums.includes(Number(value))) {
inputs.push(value);
}
update();
}
function update() {
totalString = inputs.join('');
$('#display').html(totalString);
}
function getTotal() {
shouldbeClear = true;
totalString = inputs.join('');
$('#display').html(eval(totalString));
var result = document.getElementById("display").innerHTML;
inputs = [];
inputs[0] = '';
for (var i = 0; i <= result.length - 1; i++) {
inputs[i + 1] = result[i];
}
update();
}
$('button').on('click', function() {
if (this.id === 'deleteAll') {
inputs = ['0'];
update();
} else if (this.id === 'backSpace') {
inputs.pop();
update();
} else if (this.id === 'total') {
getTotal();
} else {
if (inputs[inputs.length - 1].indexOf('+', '-', '/', '*', '.') === -1) {
if (shouldBeCleared){
shouldBeCleared = false;
inputs=[''];
update();
getValue(this.id);
} else {
getValue(this.id);
}
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="calcOutput">
<span id="display">Enter Some Number...</span>
<hr>
</div>
<div class="text-center" id="calculator">
<button type="button" class="btn btn-danger btn-lg btn3d" id="deleteAll">AC</button>
<button type="button" class="btn btn-warning btn-lg btn3d" id="backSpace">CE</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="/">/</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="*">*</button><br>
<button type="button" class="btn btn-primary btn-lg btn3d" id="7">7</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="8">8</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="9">9</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="-">-</button><br>
<button type="button" class="btn btn-primary btn-lg btn3d" id="4">4</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="5">5</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="6">6</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="+">+</button><br>
<button type="button" class="btn btn-primary btn-lg btn3d" id="1">1</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="2">2</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="3">3</button>
<button type="button" class="btn btn-success btn-lg btn3d" id=".">.</button><br>
<button type="button" class="btn btn-info btn-lg btn3d bigButton" id="0">0</button>
<button type="button" class="btn btn-info btn-lg btn3d bigButton" id="total">=</button><br>
</div>
</div>
Add a variable which will inform the calculator whether it should clear everything.
I called the variable shouldBeCleared
Each time you click on = shouldBeCleared is set to true.
Then if you click on any NUMBER, check if shouldBeCleared is set to true, clear your inputs array and update().
As follows:
$(document).ready(function() {
var shouldBeCleared = false;
//create variable to store input from user to calculate later
var inputs = [''];
//create string to store current input string
var totalString;
//create operators array for validation without the .
var operators1 = ['+', '-', '*', '/'];
var operators2 = ['.'];
//numbers for validation
var nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function getValue(value) {
if (operators2.includes(inputs[inputs.length - 1]) === true && value === '.') {
alert('STOP & RESTART!!!');
} else if (inputs.length === 1 && operators1.includes(value) === false) {
inputs.push(value);
} else if (operators1.includes(inputs[inputs.length - 1]) === false) {
inputs.push(value);
} else if (nums.includes(Number(value))) {
inputs.push(value);
}
update();
}
function update() {
totalString = inputs.join('');
$('#display').html(totalString);
}
function getTotal() {
shouldBeCleared = true;
totalString = inputs.join('');
$('#display').html(eval(totalString));
var result = document.getElementById("display").innerHTML;
inputs = [];
inputs[0] = '';
for (var i = 0; i <= result.length - 1; i++) {
inputs[i + 1] = result[i];
}
update();
}
$('button').on('click', function() {
if (this.id === 'deleteAll') {
inputs = ['0'];
update();
} else if (this.id === 'backSpace') {
inputs.pop();
update();
} else if (this.id === 'total') {
getTotal();
} else {
if (inputs[inputs.length - 1].indexOf('+', '-', '/', '*', '.') === -1) {
if (shouldBeCleared){
shouldBeCleared = false;
inputs=[''];
update();
}
getValue(this.id);
} else {
getValue(this.id);
}
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="calcOutput">
<span id="display">Enter Some Number...</span>
<hr>
</div>
<div class="text-center" id="calculator">
<button type="button" class="btn btn-danger btn-lg btn3d" id="deleteAll">AC</button>
<button type="button" class="btn btn-warning btn-lg btn3d" id="backSpace">CE</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="/">/</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="*">*</button><br>
<button type="button" class="btn btn-primary btn-lg btn3d" id="7">7</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="8">8</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="9">9</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="-">-</button><br>
<button type="button" class="btn btn-primary btn-lg btn3d" id="4">4</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="5">5</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="6">6</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="+">+</button><br>
<button type="button" class="btn btn-primary btn-lg btn3d" id="1">1</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="2">2</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="3">3</button>
<button type="button" class="btn btn-success btn-lg btn3d" id=".">.</button><br>
<button type="button" class="btn btn-info btn-lg btn3d bigButton" id="0">0</button>
<button type="button" class="btn btn-info btn-lg btn3d bigButton" id="total">=</button><br>
</div>
</div>
I have some buttongroups like this:
<div class="btn-group" id="RPPP">
<button type="button" class="btn" name="PPP" value="1">1</button>
<button type="button" class="btn" name="PPP" value="2">2</button>
<button type="button" class="btn" name="PPP" value="3">3</button>
<button type="button" class="btn" name="PPP" value="4">4</button>
<button type="button" class="btn" name="PPP" value="5">5</button>
</div>
...and at the bottom an "Analyse" button.
<a href="#last" id="secnext" class=" btn-lg btn-info " >Analyse</a>
they look like this
In the eventlistener function i'd like to push the selected button's name and value into an multidimensional array.
var myBtnn = document.getElementById('secnext');
myBtnn.addEventListener('click', function(event) {
var array =[];
//store buttons name and value both in an array
}
So that I'll have them like:
[PPP][4]
[TTT][3]
[DDD][5]
Take a look at this sample code.
You need Array#reduce and forin to achieve what you want.
Note that I am selecting all the buttons with this call:
Also, note that I have put all buttons in one group, but I hope you get the idea.
var coll = document.querySelectorAll('button');
So, depending on your html you may want to change the html to select the buttons.
var myBtnn = document.getElementById('secnext');
myBtnn.addEventListener('click', function (event) {
var array = [];
var coll = document.querySelectorAll('button');
//store buttons name and value both in an array
var collArr = [].slice.call(coll);
var ans = [];
var obj = collArr.reduce(function (obj, btn) {
if (!obj[btn.name]) {
obj[btn.name] = 0;
}
obj[btn.name]++;
return obj;
}, {});
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
ans.push([i, obj[i]]);
}
}
console.log(ans);
});
<div class="btn-group" id="RPPP">
<button type="button" class="btn" name="PPP" value="1">1</button>
<button type="button" class="btn" name="PPP" value="2">2</button>
<button type="button" class="btn" name="PPP" value="3">3</button>
<button type="button" class="btn" name="PPP" value="4">4</button>
<button type="button" class="btn" name="TTT" value="1">1</button>
<button type="button" class="btn" name="TTT" value="2">2</button>
<button type="button" class="btn" name="TTT" value="3">3</button>
<button type="button" class="btn" name="DDD" value="4">4</button>
<button type="button" class="btn" name="DDD" value="5">5</button>
<button type="button" class="btn" name="DDD" value="4">6</button>
<button type="button" class="btn" name="DDD" value="5">7</button>
<button type="button" class="btn" name="DDD" value="5">8</button>
</div>
Analyse
You should use objects instead of arrays.
So if you have an object like PPP you can put an array inside the object.
Example:
var obj = {
'PPP' : ['1', '2'],
'TTT' : ['1', '2']
};
obj.PPP[0] == '1';
obj.PPP[1] == '2';
obj.TTT[0] == '1';
obj.TTT[1] == '2';