This is my code and in it I am using two <textbox> and two <button> tags. The goal is that I want to increment the value in a <textbox> after clicking on its respective buttons:
<!DOCTYPE html>
<html>
<head>
<title> My first increment </title>
</head>
<body>
<input type="text" name="TextBox" id="TextBox1" value="0" />
<input type="Button" id='AddButton1' value="+" />
<input type="text" name="TextBox" id="TextBox2" value="0" />
<input type="Button" id='AddButton2' value="+" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
var i = 1;
$('#AddButton'+i).click( function() {
var counter = $('#TextBox'+i).val();
counter++ ;
$('#TextBox'+i).val(counter);
});
i++;
});
</script>
</body>
My problem is that I am not able to increment the value in a loop.
For a single <textbox> the inner value is being incremented, but when I use i++ the behavior is not repeated.
The thing is, you're not really doing anything to find the Id. You can't just increment nothing. This is how I'd do it:
<!DOCTYPE html>
<html>
<head>
<title> My first increment </title>
</head>
<body>
<input type="text" name="TextBox" id="TextBox1" value="0" />
<input type="Button" id='AddButton1' value="+" />
<input type="text" name="TextBox" id="TextBox2" value="0" />
<input type="Button" id='AddButton2' value="+" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$('#AddButton1, #AddButton2').click( function(){
var id = $(this).attr('id').replace(/AddButton/, '');
var num = parseInt($('#TextBox' + id).val());
num++;
$('#TextBox' + id).val(num);
});
});
</script>
</body>
Try this code:
$(document).ready(function(){
$('[id^="AddButton"]').click(function() {
var counter = $(this).prev().val();
counter++ ;
$(this).prev().val(counter);
});
});
Related
Hey guys i put an alert box in to see if the code worked but when I ran it the code did not work. I tried debugging it and I think the issue is on document.getelementbyid (ofbat) but not sure exactly what is wrong there.
Also once the code works how do i add inner html to it so the answer comes out on the same screen? I emphasized the part where i thought the code was not working.
<html !doctype>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Lab7 Baseball Form</title>
<script type="text/javascript">
function calculation() {
var batterName = parseFloat(document.getElementById('battername').value);
*var atBat = parseFloat(document.getElementById)('ofbat').value);*
var ofSingles = parseFloat(document.getElementById)('ofsingles').value);
var ofDoubles = parseFloat(document.getElementById)('ofdoubles').value);
var ofTriples = parseFloat(document.getElementById)('oftriples').value);
var ofHome = parseFloat(document.getElementById)('ofhome').value);
var totalBases = ofSingles *1 + ofDoubles * 2 + ofTriples * 3 + ofHome *4;
var slugPercent =totalBases/ atBat;
alert batterName + slugPercent;
}
</script>
</head>
<body>
<h1>Slugging Percentage Calculator</h1>
<form>
<p>Batter's Name:</p>
<input type="text" id="battername" /><br />
<p>Enter number of At Bats:</p>
<input type="text" id="ofbat" /><br />
<p>Enter number of Singles:</p>
<input type="text" id="ofsingles" /><br />
<p>Enter number of Doubles:</p>
<input type="text" id="ofdoubles" /><br />
<p>Enter number of Triples:</p>
<input type="text" id="oftriples" /><br />
<p>Enter number of Home Runs:</p>
<input type="text" id="ofhome" /><br />
<input type="button" value="Whats his slugging percentage?" onclick="calculation()">
</form>
</body>
</html>
You have syntax errors:
document.getElementById)('ofbat'): ) after Id. Same with all next lines.
alert is also a function so it should be called as alert(argument)
I think I found all syntax errors, if not let me know:
<html !doctype>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Lab7 Baseball Form</title>
<script type="text/javascript">
function calculation() {
var batterName = parseFloat(document.getElementById('battername').value);
var atBat = parseFloat(document.getElementById('ofbat').value);
var ofSingles = parseFloat(document.getElementById('ofsingles').value);
var ofDoubles = parseFloat(document.getElementById('ofdoubles').value);
var ofTriples = parseFloat(document.getElementById('oftriples').value);
var ofHome = parseFloat(document.getElementById('ofhome').value);
var totalBases = ofSingles * 1 + ofDoubles * 2 + ofTriples * 3 + ofHome * 4;
var slugPercent = totalBases / atBat;
alert(batterName + slugPercent);
}
</script>
</head>
<body>
<h1>Slugging Percentage Calculator</h1>
<form>
<p>Batter's Name:</p>
<input type="text" id="battername" /><br />
<p>Enter number of At Bats:</p>
<input type="text" id="ofbat" /><br />
<p>Enter number of Singles:</p>
<input type="text" id="ofsingles" /><br />
<p>Enter number of Doubles:</p>
<input type="text" id="ofdoubles" /><br />
<p>Enter number of Triples:</p>
<input type="text" id="oftriples" /><br />
<p>Enter number of Home Runs:</p>
<input type="text" id="ofhome" /><br />
<input type="button" value="Whats his slugging percentage?" onclick="calculation()">
</form>
</body>
</html>
UPD: edited code some number of times because found one more syntax error. If you haven't seen this line, please check the code again.
For school I need to make a currency converter.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>Lab 10</title>
<script src="lab10script.js"></script>
</head>
<body>
<form name="form">
<input type="text" name="bedrag" placeholder="Vul bedrag in" />
<select id="list">
<option>dollar/euro</option>
<option>euro/dollar</option>
<option>ruble/euro</option>
<option>euro/ruble</option>
</select>
<<button type="button" onclick="myFunction()">Exchange</button>
</form>
</body>
</html>
function myFunction() {
var bedrag = document.getElementById("bedrag");
var x = document.getElementById("list").selectedIndex;
if (x == 0) { return (document.write("<br>test" + bedrag)); }
else { return (document.write("<br>test" + bedrag)); }
}
My problem is when I do a number like 8, it says "null", I'm learning JavaScript, so can anyone help me?
<input type="text" name="bedrag" placeholder="Vul bedrag in" />
Change to this line and try again:
<input type="text" id="bedrag" placeholder="Vul bedrag in" />
<input type="text" name="bedrag" placeholder="Vul bedrag in" />
Change to this line and try again:
<input type="text" id="bedrag" placeholder="Vul bedrag in" />
You can use console.log(bedrag) to see if the value is captured properly.
Replace the name attribute on the input with id as in
<input type="text" name="bedrag" placeholder="Vul bedrag in" />
Should become
<input type="text" id="bedrag" placeholder="Vul bedrag in" />
I am not sure but from the question and code it seems you are only trying to display the value entered. In that case try the code below:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>Lab 10</title>
<script src="lab10script.js"></script>
</head>
<body>
<form name="form">
<input type="text" id="bedrag" placeholder="Vul bedrag in" />
<select id="list">
<option>dollar/euro</option>
<option>euro/dollar</option>
<option>ruble/euro</option>
<option>euro/ruble</option>
</select>
<button type="button" onclick="myFunction()">Exchange</button>
</form>
<script>
function myFunction() {
var bedrag = document.getElementById("bedrag").value;
var x = document.getElementById("list").selectedIndex;
if (x == 0) {
//log the value to console and verify the value
console.log("<br>test" + bedrag);
}
else {
console.log("<br>test" + bedrag);
}
}
</script>
</body>
</html>
use this line in the script,
var bedrag = document.getElementById("bedrag").value;
instead of,
var bedrag = document.getElementById("bedrag");
and add id="bedrag" in input, because you are accessing an element by id
function myFunction() {
var bedrag = document.getElementById("bedrag").value;
var x = document.getElementById("list").selectedIndex;
if (x == 0) { return (document.write("<br>test" + bedrag)); }
else { return (document.write("<br>test" + bedrag)); }
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>Lab 10</title>
<script src="lab10script.js"></script>
</head>
<body>
<form name="form">
<input type="text" name="bedrag" id="bedrag" placeholder="Vul bedrag in" />
<select id="list">
<option>dollar/euro</option>
<option>euro/dollar</option>
<option>ruble/euro</option>
<option>euro/ruble</option>
</select>
<button type="button" onclick="myFunction()">Exchange</button>
</form>
</body>
</html>
I am absolutely new to javascript. I am trying to create my first html page and add some javascript on my html tags. I want to have two boxes where I can input any number and click on Show me! in order to get the result. I wrote the code below but is doesn't do anything:
<!DOCTYPE html>
<html>
<head>
<title>Interactive JS homework</title>
<style>
</style>
<script>
function calculate(){
var a = parseFloat(document.getElementById("a").value);
var b = parseFloat(document.getElementById("b").value);
document.getElementById("result") == a+b;
}
</script>
</head>
<body>
<form>
<p>
<input type="text" id="a" oninput="calculate();">
<input type="text" id="b" oninput="calculate();">
<input type="button" id="showme" value="Show me!" onclick="calculate();">
<input type="text" id="result">
</p>
</form>
</body>
Any help with where I am wrong?
Many thanks in advance!
You have to use the value property of the element. Please notice the changes in the operator used, it should be assignment (=) not compariosn (==).
document.getElementById("result").value = a+b;
I will also suggest you to assign 0 when there is no value in the element. This will prevent showing unexpected NaN as result if any of the element's value is empty.
<!DOCTYPE html>
<html>
<head>
<title>Interactive JS homework</title>
<style>
</style>
<script>
function calculate(){
var val1 = document.getElementById("a").value.trim();
var val2 = document.getElementById("b").value.trim();
var a = parseFloat(val1 == ""? 0 : val1);
var b = parseFloat(val2 == ""? 0 : val2);
document.getElementById("result").value = a+b;
}
</script>
</head>
<body>
<form>
<p>
<input type="text" id="a" oninput="calculate();">
<input type="text" id="b" oninput="calculate();">
<input type="button" id="showme" value="Show me!" onclick="calculate();">
<input type="text" id="result">
</p>
</form>
</body>
Well, it seems you merely forgot a little thing.
When reading the values of the a and b text boxes, you correctly used .value after retrieving the elements to access their value, but when you tried to set the value of result text box, you instead just compared it to the value of a+b. The == operator is for comparison, not setting a value.
Just as well, you will need to set the .value of the result text box, instead of the text box itself.
<!DOCTYPE html>
<html>
<head>
<title>Interactive JS homework</title>
<style>
</style>
<script>
function calculate(){
var a = parseFloat(document.getElementById("a").value);
var b = parseFloat(document.getElementById("b").value);
document.getElementById("result").value = a+b;
}
</script>
</head>
<body>
<form>
<p>
<input type="text" id="a" oninput="calculate();">
<input type="text" id="b" oninput="calculate();">
<input type="button" id="showme" value="Show me!" onclick="calculate();">
<input type="text" id="result">
</p>
</form>
</body>
<!DOCTYPE html>
<html>
<head>
<title>Function</title>
<script type="text/javascript">
function sum(x,y) {
var z = x+y;
document.write("Sum is"+z);
}
</script>
</head>
<body>
<form>
<input type="" id="t1" name=""/>
<input type="" id="t2" name=""/>
<input type="button" onclick="sum(t1.value,t2.value)" value="Click me"/>
</form>
</body>
</html>
Hi Guys, I am a beginner with JavaScript and I'm facing this little problem. If I enter 5 and 5 the result is 55. But I want to sum up these values.
As #TonyDong said, uses parseInt to convert the string to int if desired input is integer.
To make your function works better, you need to validate the inputs first before sum.
Below is one example:
make the type of two inputs are 'number'
checkValidity() for the form or two inputs in function=sum. if validated, sum the values, if not, return error.
<!DOCTYPE html>
<html>
<head>
<title>Function</title>
<script type="text/javascript">
function sum(x,y)
{
if(document.getElementById("submit").checkValidity()) {
var z = parseInt(x)+parseInt(y);
document.write("Sum is "+z);
}
else {
document.write("Input value must be Int!");
}
}
</script>
</head>
<body>
<form id="submit">
<input id="t1" name="" type="number"/>
<input id="t2" name="" type="number"/>
<input type="button" onclick="sum(t1.value,t2.value)" value="Click me"/>
</form>
</body>
</html>
You should covert x and y to integers first, like parseInt(x) and parseInt(y) while doing the summation.
Then, instead of document.write, you can use console.log.
<!DOCTYPE html>
<html>
<head>
<title>Function</title>
<script type="text/javascript">
function sum(x,y) {
var z = parseInt(x)+parseInt(y);
console.log("Sum is",z);
}
</script>
</head>
<body>
<form>
<input type="" id="t1" name=""/>
<input type="" id="t2" name=""/>
<input type="button" onclick="sum(t1.value,t2.value)" value="Click me"/>
</form>
</body>
</html>
Hi I want to get the innerHTML of a div that contains input elements with input values.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="test">
<input type="text" id="in" />
</div>
<p id="pid">
un texte.<input type="text" id="in" />
</p>
<input type="submit" id="in" onclick="afficher();" />
<script>
function afficher()
{
var t=document.getElementById("test");
alert(t.innerHTML);
var x = document.getElementById("pid");
alert(x.innerHTML);
}
</script>
</body>
</html>
I want to get the inserted text in the inputs elements.
A piece of code can do the magic.
onblur='javascript:this.setAttribute("value",this.value)' value=""
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="test">
<input type="text" id="in" onblur='javascript:this.setAttribute("value",this.value)' />
</div>
<p id="pid">
un texte.<input type="text" id="in" onblur='javascript:this.setAttribute("value",this.value)' value=""/>
</p>
<input type="submit" id="in" onclick="afficher();" />
<script>
function afficher()
{
var t=document.getElementById("test");
alert(t.innerHTML);
var x = document.getElementById("pid");
alert(x.innerHTML);
}
</script>
</body>
</html>
function afficher()
{
var t=document.getElementById('test').querySelectorAll("input");
console.log(t[0].value);
var t=document.getElementById('pid').querySelectorAll("input");
console.log(t[0].value);
}
<div id="test">
<input type="text"/>
</div>
<p id="pid">
un texte.<input type="text" />
</p>
<input type="submit" id="in" onclick="afficher();" />
Get div/p element using getElementById then use querySelectorAll to get input element. To get the value use input.value