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.
Related
How to add number value when i click button?
For example
If i click 100,000 twice,
200,000 will be entered in the input.
$(document).ready(function() {
$('#myform button').on('click', function() {
$('#cvalue').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="box">
<form id="myform">
<div class="inputdiv">
<input type="text" id="cvalue" class="money">
</div>
<button class="button1" type="button" value="100,000">100,000</button>
<button class="button1" type="button" value="200,000">200,000</button>
<button class="button1" type="button" value="300,000">300,000</button>
<button class="button1" type="button" value="500,000">500,000</button>
<button class="button1" type="button" value="1,000,000">1,000,000</button>
</form>
Not trivial
const fmt = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
$(document).ready(function() {
const $cvalue = $('#cvalue');
$('#myform .button1').on('click', function() {
const val = +$(this).val().replace(/\D/g, "") + +$cvalue.val().replace(/\D/g, "")
$cvalue.val(fmt.format(val));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="box">
<form id="myform">
<div class="inputdiv">
<input type="text" id="cvalue" class="money" value="0">
</div>
<button class="button1" type="button" value="100,000">100,000</button>
<button class="button1" type="button" value="200,000">200,000</button>
<button class="button1" type="button" value="300,000">300,000</button>
<button class="button1" type="button" value="500,000">500,000</button>
<button class="button1" type="button" value="1,000,000">1,000,000</button>
</form>
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>
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>
I am trying to make my code submit a boolean button with two options. I am trying to trigger the S and K keypress to submit each button. I saw the following code, but when I try it, it doesn't run.
This is my HTML code. Each button has a function that give me a timestamp of the click, submit the page and save the option that the participant chooses (A or B).
<!DOCTYPE html>
<html>
<body>
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" id="of1A" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" id="of1B" value="False">B</button>
</p>
<input type="hidden" name="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
<!--The keypress code-->
<script>
var input = document.getElementById("of1A");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 75) {
event.preventDefault();
document.getElementById("of1A").click();
});
var input = document.getElementById("of1B");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 83) {
event.preventDefault();
document.getElementById("of1B").click();
}
});
//The function that gives me a timestamp
function myFunction() {
var n = Date.now();
document.getElementById("c1").value = n;
}
</script>
</body>
Without the keypress code the code runs in the next way:
function myFunction() {
var n = Date.now();
document.getElementById("c1").value = n;
}
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="False">B</button>
</p>
<input type="hidden" name="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
How can I make for example If first input .res is focused write there else on .res2 I tried this firstly .res is focused then when you click buttons which are into .operators div focus moves to second input .res2 but it doesnt work
$(".one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.zero,.dot").click(function(){
if($('.res').is(":focus")){
firstNumber = $('.res').val(($('.res').val()) + $(this).val());
} else {
secondNumber = $('.res2').val(($('.res2').val()) + $(this).val());
}
})
$(".plus,.subtract,.divide,.multiply").click(function(){
resultWindow.blur();
$('.res2').focus();
})
<div id="calculator">
<div class="wind">
<input class="res" value=" " maxlength="24">
<input class="res2" value=" " maxlength="24">
<div class="numbers">
<button class="one" value="1">1</button>
<button class="two" value="2">2</button>
<button class="three" value="3">3</button>
<br>
<button class="four" value="4">4</button>
<button class="five" value="5">5</button>
<button class="six" value="6">6</button>
<br>
<button class="seven" value="7">7</button>
<button class="eight" value="8">8</button>
<button class="nine" value="9">9</button>
<br>
<button class="zero" value="0">0</button>
<button class="dot" value=".">.</button>
</div>
<div class="operators">
<button class="plus">+</button>
<button class="subtract">-</button>
<button class="divide">/</button>
<button class="multiply">*</button>
<button class="equal">=</button>
</div>
</div>
The main issue is that every time you click the button, the input blurs and the button gains focus.
So, $('.res').is(":focus") will always return false.
To achieve this, you need to add another event listener to prevent the default behavior of the button clicks:
$("button").mousedown(function(e) {e.preventDefault()})
Also, I'd recommend to use this query selector:
$(".numbers > button")
$(".operators > button")
So, your code looks simpler.
Take a look how it works:
$("button").mousedown(function(e) {e.preventDefault()})
$(".numbers > button").click(function() {
if ($('.res').is(":focus")) {
firstNumber = $('.res').val(($('.res').val()) + $(this).val());
} else {
secondNumber = $('.res2').val(($('.res2').val()) + $(this).val());
}
})
$(".operators > button").click(function() {
resultWindow.blur();
$('.res2').focus();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="calculator">
<div class="wind">
<input class="res" value=" " maxlength="24">
<input class="res2" value=" " maxlength="24">
<div class="numbers">
<button class="one" value="1">1</button>
<button class="two" value="2">2</button>
<button class="three" value="3">3</button>
<br>
<button class="four" value="4">4</button>
<button class="five" value="5">5</button>
<button class="six" value="6">6</button>
<br>
<button class="seven" value="7">7</button>
<button class="eight" value="8">8</button>
<button class="nine" value="9">9</button>
<br>
<button class="zero" value="0">0</button>
<button class="dot" value=".">.</button>
</div>
<div class="operators">
<button class="plus">+</button>
<button class="subtract">-</button>
<button class="divide">/</button>
<button class="multiply">*</button>
<button class="equal">=</button>
</div>
</div>
Try doing a mousedown event instead of a click event on your buttons, and then preventing default, which should keep the input from losing focus.
$(".one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.zero,.dot").on('mousedown', function(event){
event.preventDefault();
if($('.res').is(":focus")){...}
...
});