How to increase and decrease a text value with two buttons - javascript

I'm trying to increase a text value using two buttons, one on each side of the text, which either increase the value by 10 or decrease it by 10, and the value can't go under 10km or over 90km.
Here is the app screen so you can see what I mean:
Update: I've now been given code to work with but it doesn't have the "km" value after the number so it goes 10,20,30 instead of 10km, 20km, 30km. Does anyone know how to adjust this code to do what I want?
<script language='javascript' type='text/javascript'>
$(document).ready(function(){
$("#increment").click(function(){
if($('#number').val() !="90"){
var $n = $("#number");
$n.val(Number($n.val())+10);
}
});
$("#decrement").click(function(){
if($('#number').val() !="10"){
var $n = $("#number");
$n.val(Number($n.val())-10);
}
});
});
</script>
</head>
<style>
.Radius{
font-size:14px;
font-family:"gillsans";
color: #4361AD;
text-align: center;
}
</style>
<body>
<div id="Maincontainer">
<input type="text" value="10" id="number" class="Radius" style="background-color:transparent; border:0px solid white; width:110px; margin-left:15px;"/>
<input type="button" id="increment" value="Increment"/>
<input type="button" id="decrement" value="decrement"/>
</div>
</body>
https://jsfiddle.net/deepanv29/4b7adopb/

<!DOCTYPE>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<div>
<body>
<input type="text" value="10Km" id="number"/>
<input type="hidden" value="10" id="number1"/>
<input type="button" id="increment" value="Increment"/>
<input type="button" id="decrement" value="decrement"/>
</body>
</div>
<script language='javascript' type='text/javascript'>
$(document).ready(function(){
$("#increment").click(function(){
if($('#number1').val() !="90"){
var $n = $("#number1");
$n.val(Number($n.val())+10);
var value = $n.val();
$("#number").val(value +'Km');
}
});
$("#decrement").click(function(){
if($('#number1').val() !="10"){
var $n = $("#number1");
$n.val(Number($n.val())-10);
var value = $n.val();
$("#number").val(value +'Km');
}
});
});
</script>
</body>
</html>
updates Js fiddle demo for the above code

you just need to increment and decrement the value at button click.
int value = 10;
protected void BtnIncre_Click(Object sender, EventArgs e)
{
if (value < 90)
{
value += 10;
Session["Value"] = value;
}
}
protected void BtnDecre_Click(Object sender, EventArgs e)
{
if (value > 10)
{
value -= 10;
Session["Value"] = value;
}
}

<!DOCTYPE>
<html>
<head>
</head>
<body>
<input type="button" id="dec" value="DEC" onclick="dec();">
<input type="text" id="Number_value" value="0" readonly>
<input type="button" id="inc" value="INC" onclick="inc();">
<script language='javascript' type='text/javascript'>
function inc()
{
var val = parseInt(document.getElementById('Number_value').value);
val+=10;
if(val>90) val = 90;
document.getElementById('Number_value').value = val;
}
function dec()
{
var val = parseInt(document.getElementById('Number_value').value);
val-=10;
if(va<10) val = 10;
document.getElementById('Number_value').value = val;
}
</script>
</body>
</html>

Related

Multiply output by inputs

I'm trying to create a list based off of 2 input fields. The first input will be a name and the second an integer.
What I'm trying to achieve is having the name displayed multiplied by the amount of the input integer. I have got the name to display based off the input, but have been unable to have it displayed multiple times based on the input integer.
Here's an example image of what I'm looking to achieve
<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="text" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
</body>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
document.getElementById("name").value = ""; // clear the value
}
</script>
</html>
Fiddle: https://jsfiddle.net/grnct2yz/
<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="number" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
</body>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
for(let i = 0; i < document.getElementById("count").value; i++) {
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
}
document.getElementById("name").value = ""; // clear the value
}
</script>
</html>
I have added a loop and changed the input type to number so we are sure that it's going to insert a number in the loop. Is this what you wanted?
What the code I added does is cycling a number of times equal to the number inputted and then executing the code you wrote.
for loops work this way:
you set an initial statement that is executed at the beginning of the loop, only once (let i = 0 sets a new iterable variable i),
then you set a condition that is checked before every iteration of the loop to make it run (i < document.getElementById("count").value checks that it executes up to and not more than X times, where X is the number inputted),
then you set an operation to be executed at the end of each loop (i++ increments the value of i by one).
Here is another way of doing it:
const name=document.getElementById("name"),
count=document.getElementById("count"),
list=document.getElementById("list");
document.getElementById("add").onclick = function() {
list.insertAdjacentHTML("beforeend",[...Array(+count.value)].map(s=>`<div>${name.value}</div>`).join(""))
name.value = ""; // clear the value
}
<input type="text" value="Michael" id="name" /><br>
<input type="text" value="5" id="count" /><br>
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
Just your Improved code based on your needs we can achieve this in many ways.
<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="text" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
var count = document.getElementById("count").value;
if (parseInt(count) != 'NaN') {
var list = document.getElementById("list");
while (list.firstChild) {
list.removeChild(list.firstChild);
}
count = parseInt(count);
for (var i = 0; i < count; i++) {
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
}
}
}
</script>
</body>
</html>

HTML, how to get always +1 sum

I'm doing a point counter in general and I have no idea how to do it anymore, so I would like to add +1 to the sum on the "=" button and add it only once if someone could help me, I would be grateful
Code: https://pastebin.com/C26VFyev
var result = 0;
function suma() {
var cal1 = parseFloat(document.forms["form1"]["cal1"].value);
var cal2 = parseFloat(document.forms["form1"]["cal2"].value);
var sum = (cal1 + cal2 + 1);
document.forms["form1"]["sum"].value = sum
result = sum;
}
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<form name="form1">
Cal 1:
<input value="0" name="cal1" size="5"><br> Cal2:
<input value="0" name="cal2" size="5"><br>
<input type="button" value="Oblicz" name="add" onClick="suma();"><br> Suma:
<input type="text" name="sum" size="6"><br>
<input type="reset" value="Reset"><br>
</form>
</body>
</html>
Use a variable for what you add to the sum. Initialize it to 1 for the first time, than change it to 0 for future uses.
var result = 0;
var addition = 1;
function suma() {
var cal1 = parseFloat(document.forms["form1"]["cal1"].value);
var cal2 = parseFloat(document.forms["form1"]["cal2"].value);
var sum = (cal1 + cal2 + addition);
if (addition == 1) {
addition = 0;
}
document.forms["form1"]["sum"].value = sum
result = sum;
}
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<form name="form1">
Cal 1:
<input value="0" name="cal1" size="5"><br> Cal2:
<input value="0" name="cal2" size="5"><br>
<input type="button" value="Oblicz" name="add" onClick="suma();"><br> Suma:
<input type="text" name="sum" size="6"><br>
<input type="reset" value="Reset"><br>
</form>
</body>
</html>

Increment and decrement buttons

I am novice in jQuery but trying to learn something very basic. I am just trying to build up auto increment/decrement input fields like this:
<!DOCTYPE html>
<html>
<head>
<link href="stile_prenota.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="riga numero">
<input type="text" name="numero" value="0" readonly="readonly">
<button class="bottone piu">+</button>
<button class="bottone meno">-</button>
</div>
<script>
$(document).ready(function(){
$('.bottone').on("click", function() {
var $button = $(this);
var vecchioVal = $button.parent().find("input").val();
var nuovoVal = parseFloat(vecchioVal);
if ($button.text() == "+") {
nuovoVal += 1;
} else {
if (vecchioVal > 0) {
nuovoVal -= 1;
} else {
nuovoVal = 0;
}
}
$button.parent().find("input").val(nuovoVal);
});
});
</script>
</body>
</html>
Why if i put the div inside a form it doesn't work?
EDIT Thank you very much
Buttons are submit type by default. So when you put it inside the form and click on button your form gets submitted. Changing the type will solve your problem like this
<!DOCTYPE html>
<html>
<head>
<link href="stile_prenota.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<div class="riga numero">
<input type="text" name="numero" value="0" readonly="readonly">
<button type="button" class="bottone piu">+</button>
<button type="button" class="bottone meno">-</button>
</div>
</form>
<script>
$(document).ready(function() {
$('.bottone').on("click", function() {
var $button = $(this);
var vecchioVal = $button.parent().find("input").val();
var nuovoVal = parseFloat(vecchioVal);
if ($button.text() == "+") {
nuovoVal += 1;
} else {
if (vecchioVal > 0) {
nuovoVal -= 1;
} else {
nuovoVal = 0;
}
}
$button.parent().find("input").val(nuovoVal);
});
});
</script>
</body>
</html>
The form submites because buttons are `type="submit" by default and submit the form. So set the type to button so they do not submit
<button type="button" ..>
Buttons are by default submit here is a working version:
$(document).ready(function(){
$('.bottone').on("click", function() {
var $button = $(this);
var vecchioVal = $button.parent().find("input").val();
var nuovoVal = parseFloat(vecchioVal);
if ($button.text() == "+") {
nuovoVal += 1;
} else {
if (vecchioVal > 0) {
nuovoVal -= 1;
} else {
nuovoVal = 0;
}
}
$button.parent().find("input").val(nuovoVal);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="riga numero">
<input type="text" name="numero" value="0" readonly="readonly">
<button type="button" class="bottone piu">+</button>
<button type="button" class="bottone meno">-</button>
</div>
</form>

live update value if checkbox is checked or not

I am trying to update a textbox based on whether or not a checkbox is checked or not. Thanks to this post I got a text box working fine, but I can't get a checkbox to update the value. What am I missing?
<html>
<head>
<title>sum totals</title>
<script type="text/javascript">
function calculate(t){
var j = document.getElementById("output");
var rege = /^[0-9]*$/;
if ( rege.test(t.tons.value) ) {
var treesSaved = t.tons.value * 17;
j.value = treesSaved;
}
else
alert("Error in input");
}
$('input[name="selectedItems1"]').click(function(){
var j = document.getElementById("output");
if (this.checked) {
j.value=j.value+300
}else{
j.value=j.value-300
}
});
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" onkeyup="calculate(this.form)"/>
<br />
<input type="checkbox" name="selectedItems1" value="val1" />I have a car
<br/>
<input type="text" id="output" value="Output" />
</form>
</body>
</html>
Place the <script> tag after <form>
Reason:
When the html page loads, it'll be interpreted line by line. When it come to click(), jQuery will try to find the element input[name="selectedItems1"] which won't be loaded into the DOM at that time. So, jQuery won't attach the click() event handle to that checkbox. That's the reason why your code didn't work.
Try this :
<html>
<head>
<title>sum totals</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script type="text/javascript">
function calculate(){
var j = document.getElementById("output");
var rege = /^[0-9]*$/;
var tons = $('#tons').val();
if ( rege.test(tons) ) {
val = parseInt(tons);
var treesSaved = val * 17;
if($('input[name="selectedItems1"]').is(":checked"))
{
treesSaved = treesSaved +300;
}
else
{
treesSaved = treesSaved -300;
}
if(isNaN(treesSaved))
j.value=0
else
j.value=treesSaved;
}
else
alert("Error in input");
}
$(function(){
$('input[name="selectedItems1"]').change(function(){
calculate();
});
});
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" onkeyup="calculate()"/>
<br />
<input type="checkbox" name="selectedItems1" value="val1" />I have a car
<br/>
<input type="text" id="output" value="Output" />
</form>
</body>
</html>

Create an HTML form with one field and button

I'm new in coding , there is a question that someone gave me and I can't find the right answer , this is the question :
Create an HTML form with one field and button.On button click,get the input,and return the sum of the previous value and the current input value.The value is 0 and input is 5->output is 5,then value is 5,input is 6-> output is 11 and etc.
I tried few things nothing even close ,
if someone can give me the answer Ill be much appreciated , thanks.
There you go, but you should try doing it yourself. it's pretty easy to google things like "on button click" etc.
var total = 0;
$('.js_send').click(function(){
total += parseInt($('.number').val());
$('.total').html(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" value="0" class="number"/>
<input type="button" value="send" class="js_send"/>
<div class="total">0</div>
Here's a JQuery free version
var oldInput = 0,
newInput,
outPut;
document.querySelector("#showSum").onclick = function() {
newInput = parseInt(document.querySelector("#newInput").value),
outPut = newInput + oldInput,
oldInput = outPut,
document.querySelector("#result").innerHTML = outPut;
};
#result {
width: 275px;
height: 21px;
background: #ffb6c1;
}
<input type="number" value="0" id="newInput">
<button id="showSum">Show Results</button>
<br>
<div id="result"></div>
Here is the solution to your problem. Put all below code into a html file and name it as index.html, then run the html page.
<html>
<head>
<title></title>
</head>
<body>
Output : <label id="output">0</label>
<form method="get" action="index.html">
Your Input: <input type="text" id="TxtNum"/>
<input type="hidden" id="lastvalue" name="lastvalue" />
<input type="submit" onclick="return doSum();" value="Sum" />
</form>
<script>
//- get last value from querystring.
var lastvalue = getParameterByName('lastvalue');
if (lastvalue != null) {
document.getElementById("lastvalue").value = lastvalue;
document.getElementById("output").innerHTML = lastvalue;
}
/*
* - function to calculate sum
*/
function doSum() {
var newvalue = 0;
if(document.getElementById("TxtNum").value != '')
newvalue = document.getElementById("TxtNum").value;
var lastvalue = 0;
if(document.getElementById("lastvalue").value != '')
lastvalue = document.getElementById("lastvalue").value;
document.getElementById("lastvalue").value = parseInt(newvalue) + parseInt(lastvalue);
output = parseInt(newvalue) + parseInt(lastvalue);
}
/*
* - function to get querystring parameter by name
*/
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
</script>
</body>
</html>
If you are doing it in server side, You could have a static variable and update it on button click. More like
public static int prevValue;
public int buttonclick(.....){
int sum = textboxValue + prevValue;
prevValue = textboxValue;
return sum;
}
here is your solution
<script type="text/javascript">
var sum=0;
function summ()
{
localStorage.setItem("value",document.getElementById("text").value);
var v=localStorage.getItem("value");
sum=sum+parseInt(v);
alert(sum);
}
</script>
<html>
<input id="text">
<button id="submit" onclick="summ()">sum</button>
</html>
It will be pretty easy.
Created CodePen
http://codepen.io/anon/pen/eJLNXK
function getResult(){
var myinputValue=document.getElementById("myinput").value;
var resultDiv=document.getElementById("result");
if(myinputValue && !isNaN(myinputValue)){
resultDiv.innerHTML=parseInt(myinputValue) + (resultDiv.innerHTML ? parseInt(resultDiv.innerHTML) : 0);
}
}
<input type="text" id="myinput">
<button id="btngetresult" onclick="getResult()">GetResult</button>
<p>
Result:
<div id="result"></div>
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript">
function sum() {
var t1 = parseInt(document.getElementById("t1").value);
var t2 = parseInt(document.getElementById("pre").value);
document.getElementById("result").innerHTML = t1+t2;
document.getElementById("pre").value = t1;
}
</script>
</head>
<body>
<div>
<form method="get" action="">
<input type="text" name="t1" id="t1">
<input type="button" value="get sum" name="but" onclick="sum()">
<input type="hidden" name="pre" id="pre" value="0">
</form>
</div>
<div id="result"></div>
</body>
</html>

Categories

Resources