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")){...}
...
});
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>
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 to following code:
<div class="overall">
<div class="calccont">
<input type="text" class="output">
</div>
<div class="buttons">
<button class="btn" type="button" value="1">1</button>
<button class="btn" type="button" value="2">2</button>
<button class="btn" type="button" value="3">3</button>
<button class="btn" type="button" value="4">4</button>
</div>
</div>
and
var allBtns = document.querySelectorAll(".btn");
for ( i = 0; i < allBtns.length; i++ ) {
allBtns[i].addEventListener("click", function(){
document.querySelector(".output").value += allBtns[i].getAttribute("value");
});
}
Im trying to build a calculator in JS and the expected result was putting all the buttons value in the input, but it doesnt seem to work. Any help will be greatly appreciated.
You should be using this to access the current button within your click event:
var allBtns = document.querySelectorAll(".btn");
for (i = 0; i < allBtns.length; i++) {
allBtns[i].addEventListener("click", function() {
document.querySelector(".output").value += this.getAttribute("value");
});
}
<div class="overall">
<div class="calccont">
<input type="text" class="output">
</div>
<div class="buttons">
<button class="btn" type="button" value="1">1</button>
<button class="btn" type="button" value="2">2</button>
<button class="btn" type="button" value="3">3</button>
<button class="btn" type="button" value="4">4</button>
<div>
You should use the this keyword to access the clicked button and then get its value like this:
var allBtns = document.querySelectorAll(".btn");
for ( i = 0; i < allBtns.length; i++ ) {
allBtns[i].addEventListener("click", function(){
document.querySelector(".output").value += this.getAttribute("value");
});
}
<div class="overall">
<div class="calccont">
<input type="text" class="output">
</div>
<div class="buttons">
<button class="btn" type="button" value="1">1</button>
<button class="btn" type="button" value="2">2</button>
<button class="btn" type="button" value="3">3</button>
<button class="btn" type="button" value="4">4</button>
<div>
More about the this keyword:
In most cases, the value of this is determined by how a function is
called. It can't be set by assignment during execution, and it may be
different each time the function is called. ES5 introduced the bind
method to set the value of a function's this regardless of how it's
called, and ECMAScript 2015 introduced arrow functions whose this is
lexically scoped (it is set to the this value of the enclosing
execution context).
On a side note: You are missing a < in the first div tag in the code you have posted, that might also be causing you some issues if that wasn't a copy-paste omission.
I want to select both button (color and size) in the same time and I want it focus like this >> enter image description here.
I want send data form focus button on form.
function show(elementId) {
document.getElementById("id1").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById("id3").style.display="none";
document.getElementById(elementId).style.display="block";
}
.btn:focus{
border-radius: 20px;
color:#000;
}
.btn2:focus{
border-radius: 10px;
color:#D97476;
}
<form name="selectItem" method="POST" action="keepdata.php">
<div class="select-color">
<p>Select color</p>
<button type="button" name="scolor" class="btn btn-default black-s7" onclick="show('id1');">Black</button>
<button type="button" name="scolor" class="btn btn-default silver-s7" onclick="show('id2');">Green</button>
<button type="button" name="scolor" class="btn btn-default gold-s7" onclick="show('id3');">Red</button>
</div>
<div class="select-option-s7">
<p>Select Size</p>
<button type="button" class="btn2 btn-color black" title="black">S</button>
<button type="button" class="btn2 btn-color silver" title="silver">M</button>
<button type="button" class="btn2 btn-color silver" title="silver">L</button>
</div>
<button type="submit">submit</button>
</form>
thank you
Why you not use input type="radio" ?
Use another class with style and with jquery add class on click button.
$('.select-color button').on('click', function(){
$('.select-color button.selected').removeClass('selected');
$(this).addClass('selected');
});
$('.select-option-s7 button').on('click', function(){
$('.select-option-s7 button.selected').removeClass('selected');
$(this).addClass('selected');
});
.selected{
border-radius: 10px;
color:#D97476;
}
.btn:focus{
outline: none;
}
.btn2:focus{
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="selectItem" method="POST" action="keepdata.php">
<div class="select-color">
<p>Select color</p>
<button type="button" name="scolor" class="btn btn-default black-s7" onclick="show('id1');">Black</button>
<button type="button" name="scolor" class="btn btn-default silver-s7" onclick="show('id2');">Green</button>
<button type="button" name="scolor" class="btn btn-default gold-s7" onclick="show('id3');">Red</button>
</div>
<div class="select-option-s7">
<p>Select Size</p>
<button type="button" class="btn2 btn-color black" title="black">S</button>
<button type="button" class="btn2 btn-color silver" title="silver">M</button>
<button type="button" class="btn2 btn-color silver" title="silver">L</button>
</div>
<button type="submit">submit</button>
</form>