I am trying to make an input modify each time I click on a button. Kind of like a calculator. The will start at 0. When I click on the button "7" it will change its value to 7, when I click on "4" it will change to 74. Basically like a calculator.
I made this code that does modify the value of the input, however I can't seem to find how I can append more values to that values. Here is my code. Could someone help me?
<input class="normal-input" type="number" step="0.01"> <!-- Value is NULL-->
<button value="7" class="my-buttons" type="button"> 7 </button> <!--Button to change the value of the input-->
$('.my-buttons').click(function(){
$(".normal-input").attr("value", $(this).attr('value'));
}); <!-- The actual function. -->
As you can see the function completely replaces the previous value for the new one. I want it to append the values like in a calculator.
I would suggest you to try doing this:
Initialize value to zero
whenever click is called, multiply the current value by 10, and add the button value to it.
and you can remove the step attribute as per the use case.
In this function:
$(".normal-input").attr("value", $(this).attr('value'));
The second parameter is the value to set:
$(this).attr('value')
You need to have this as a combination of the previous value and the new value:
$(".normal-input").attr('value') + '' + $(this).attr('value')
The blank string is to make sure the final result is a string, not the addition of 2 numbers.
If you would like to convert it to a number, you can use parseInt():
const combinedNumber = $(".normal-input").attr('value') + '' + $(this).attr('value')
const intNumber = parseInt(combinedNumber)
The final code could look something like:
<input class="normal-input" type="number" step="0.01"> <!-- Value is NULL-->
<button value="7" class="my-buttons" type="button"> 7 </button> <!--Button to change the value of the input-->
$('.my-buttons').click(function(){
const existingValue = $(".normal-input").attr('value')
const newValue = $(this).attr('value'
const combinedValue = parseInt(existingValue + '' + newValue)
$(".normal-input").attr("value", combinedValue);
}); <!-- The actual function. -->
You just need to concat both the actual value and the value of button which is clicked to get required values .
Demo Code :
$('.my-buttons').click(function() {
var value = $(".normal-input").val()
var clicked_button = $(this).attr('value')
//use val and combined both value
$(".normal-input").val(value + "" + clicked_button);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="normal-input" type="number">
<button value="7" class="my-buttons" type="button"> 7 </button>
<button value="10" class="my-buttons" type="button"> 10 </button>
<button value="6" class="my-buttons" type="button"> 6 </button>
Related
Something that has bugged me for a while and always giving me headaches.
I have an input field with a value in numbers
<input id="base-life" class="base-stats" type="number" name="base-life" value="20" readonly />
I am picking up the value of the input field with
let charlife = document.getElementById('base-life');
I have a number with which i want to increase the value of the base-life input field. This of course changes dynamically based on other stuff but let's say it's 2
let increaseWith = 2;
in an onclick function i want to increase base-life with 2 (base-life + 2) everything it is clicked
function increase() {
charlife.value += increaseWith;
}
Now this only adds 2 to the value of the input field, makes it 202. I know that this happens when one of the numbers are actually strings. Perhaps my charlife. I tried everything and it gets worse. I tried parseInt(charlife.value) - no luck. I tried other methods but it doesn't work. And i only have this problem with input fields. When the element is just a or another simpler html element - it all works easier. Has to do with how JS parses input fields. Can someone shed some light?
let charlife = document.getElementById('base-life');
let increaseWith = 2;
function increase() {
value = parseInt(charlife.value);
value += increaseWith;
charlife.value = value;
}
<input id="base-life" class="base-stats" type="number" name="base-life" value="20" readonly />
<button onclick="increase()">Increase</button>
Here is the working snippet with some custom code that is according to your specifications
<input id="base-life" class="base-stats" type="number" name="base-life" value="20" readonly />
<button class="add" onclick="let increaseWith = 2;document.getElementById('base-life').value = parseInt(document.getElementById('base-life').value)+increaseWith;">add</button>
I'm trying to change the value of a html input element and I want to see the value change on screen. This seems to be a very simple task but it is not working using javascript (but it work with jQuery).
$("#btn1").click(function () {
$("#test1").val("10");
});
function bt() {
document.getElementById("test1").value = "3333";
document.getElementById("test1").setAttribute("value","4444");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Formula 1:
<input type="text" id="test1" value="1111">
</p>
<p>What the answers to these formulas?</p>
<br>
<button id="btn1">Hint</button>
<button id="btn2" onclick="bt()">Hint2</button>
Any suggestion with the javascript function bt() ?
You can just use the value property of the input element after being selected/referenced in JavaScript.
In the next example, every time you click on the button with change value text the input value will change to New value: followed by a random number.
/** selecting the button and the input **/
const btn = document.getElementById('btn2'),
inp = document.getElementById('test1');
/** adding click listener **/
btn.addEventListener('click', () => inp.value = 'New value: ' + Math.ceil(Math.random() * 100)); /** for demo purposes a random number is generated every time the button is clicked. Change the affected value per your requirements **/
<input type="text" id="test1" value="1111">
<p>What the answers to these formulas?</p>
<br>
<button id="btn1">Hint</button>
<button id="btn2">change value</button>
Learn more on input element in JavaScript.
Hope I pushed you further.
I have a json array as below in a hidden input. I am trying to update charge value using ajax on a button click.
[{"2018-06-19":{"charge":55000,"xcharge":15000}},
{"2018-06-20":{"charge":55000,"xcharge":15000}},
{"2018-06-21":{"charge":55000,"xcharge":15000}},
{"2018-06-22":{"charge":55000,"xcharge":15000}},
{"2018-06-23":{"charge":55000,"xcharge":15000}},
{"2018-06-24":{"charge":55000,"xcharge":15000}}]
My hidden input and Button
<input type="hidden" name="chargeArray" id="chargeArray" value='[{"2018-06-19":{"charge":55000,"xcharge":15000}},{"2018-06-20":{"charge":55000,"xcharge":15000}},{"2018-06-21":{"charge":55000,"xcharge":15000}},{"2018-06-22":{"charge":55000,"xcharge":15000}},{"2018-06-23":{"charge":55000,"xcharge":15000}},{"2018-06-24":{"charge":55000,"xcharge":15000}}]' />
<button class="btn btn-default" type="button" onclick="change_room_charge();"><span class="glyphicon glyphicon-edit"></span></button>
I have tried it with this, but it is failing. charge value is not changing to new value.
function change_room_charge(){
var chargeArray = JSON.parse($('#chargeArray').val());
$.each(chargeArray, function (index, item) {
item[0].charge = item[0].charge.replace(666);
});
$('#chargeArray').val(JSON.stringify(chargeArray));
}
What i want is to change all existing charge values in hidden input to new value.
Whatever you are doing is very strange, but I'm going with it. You have your objects keyed by a date so you need to go get that key first. So in the code below, I get the key by finding all the keys for the item and taking the first one. From there you can set the value to whatever you want and then put it back into the input.
function change_room_charge() {
var chargeArray = JSON.parse($('#chargeArray').val());
$.each(chargeArray, function(index, item) {
var key = Object.keys(item)[0];
item[key].charge = 666;
});
$('#chargeArray').val(JSON.stringify(chargeArray));
console.log($('#chargeArray').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="chargeArray" id="chargeArray" value='[{"2018-06-19":{"charge":55000,"xcharge":15000}},{"2018-06-20":{"charge":55000,"xcharge":15000}},{"2018-06-21":{"charge":55000,"xcharge":15000}},{"2018-06-22":{"charge":55000,"xcharge":15000}},{"2018-06-23":{"charge":55000,"xcharge":15000}},{"2018-06-24":{"charge":55000,"xcharge":15000}}]' />
<button class="btn btn-default" type="button" onclick="change_room_charge();">
<span class="glyphicon glyphicon-edit"></span>
</button>
We need to have a textbox where you enter a number, hit a button, and it increments by 1, while staying in the same text box. Here is the code I have so far:
<form action=#>
<p>
Current Count...<input type="text" id="txtCounter" value="0">
</p>
<p>
<input type="button" value="Increment Count" id="btnIncrement" onclick="btnIncrement_onclick()">
<input type="reset">
</p>
</form>
<noscript>This website requires JavaScript to be enabled.</noscript>
JavaScript:
function btnIncrement_onclick() {
// get textbox and assign to a variable
var countTextbox = document.getElementById("txtCounter");
var txtCounterData = txtCounter.value;
var countTextbox.value = 0++;
}
If someone could explain to me how to do it not just give me the answer. I don't know why I'm having such a hard time with this.
Try the following simple code :
function btnIncrement_onclick()
{
//asign the textbox to variable
var textbox = document.getElementById("txtCounter");
//Get the value of textbox and add 1 then update the textbox
textbox.value = parseInt(textbox.value)+1;
}
<form action=#>
<p>
Current Count...<input type="text" id="txtCounter" value="0">
</p>
<p>
<input type="button" value="Increment Count" id="btnIncrement" onclick="btnIncrement_onclick()">
<input type="reset">
</p>
</form>
<noscript>This website requires JavaScript to be enabled.</noscript>
Hope this helps.
In your HTML:
In your html you had a onclick="btnIncrement_onclick()" and that means every click will triggers your function.
In your JS:
function btnIncrement_onclick() {
// Named as countTextbox you input. sou we can use it later.
var countTextbox = document.getElementById("txtCounter");
// Get the current value attribute of it, initialy 0.
var txtCounterData = txtCounter.value;
// The line above is not being used. but you can check it with a console.log like this:
console.log(txtCounterData);
// Now you are calling again your input and changing his value attribute. this ++ means a increment. so we are increasing +1;
countTextbox.value++;
}
You should read more about increment and operators and DOM (the way whe select the tag by id, and again selected his attribute).
Sorry didn't found a good source in english.
So I have one input field that needs to pop up in another place when the user changes a tab and presses a button,
but I figured tossing the div around would be too much hassle,
so is it instead possible to make two input fields but have them display the same input entered by the user?
Or is there an easier way?
Try this. Of course, make sure it is on DOM .ready().
$('#input1').blur(function() {
$('#input2').val( this.value );
});
Use .blur() to run the code when the user leaves the input1.
Use .val() to set the value of input2 to the this.value of input1.
If you need to work the reverse direction as well, just assign another handler, reversing the inputs.
$('#input2').blur(function() {
$('#input1').val( this.value );
});
EDIT: To deal with multiple inputs, give them all the same class, then use paired IDs.
Like this:
Example: http://jsfiddle.net/m3q4V/
<!-- In tab 1 -->
<input type="text" class="someClass" id="address_1" />
<input type="text" class="someClass" id="city_1" />
<input type="text" class="someClass" id="zip_1" />
<!-- In tab 2 -->
<input type="text" class="someClass" id="address_2" />
<input type="text" class="someClass" id="city_2" />
<input type="text" class="someClass" id="zip_2" />
js:
$('.someClass').blur(function() {
var parts = this.id.split('_'); // separate into parts, like 'address' and '2'
var num = (parts[1] == 2) ? 1 : 2; // invert the number between 1 and 2
// build the selector with 'address' + '_' + '1'
$('#' + parts[0] + '_' + num).val( this.value );
});
See Working Example
If you want to happen that when first text box loses focus, you need to use blur event:
$('#textbox1_id').blur(function(){
$('#textbox2_id').val(this.value);
});