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.
Related
JavaScript codes and HTML codes
I'm trying to put a generated value of the qr code a input text to be save in my SQLite database can't pust the darn value of the qr code
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.innerHTML = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
With inner HTML it will not going to save your generated QR code to input box. You need to change the innerHTML to value to save the value in input box such that you can use that when form submit as value to save in database.
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.value = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
To save the value in input box should not use "resultDiv.innerHTML = s;"
Rather you should use "resultDiv.value = s" which will save your code to input box which you can use to save in SQLite Database.
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>
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);
});
});
How to print the user input? Everytime I click on the submit button, it just redirects me to a blank page. Here's the code:
<html>
<head>
<title>NameTest</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action="PayslipServlet" method="get">
Last name: <input type="text" name="lname" id="lname"><br/>
First name: <input type="text" name="fname" id="fname"><br/>
Middle name: <input type="text" name="mname" id ="mname"><br/>
Name:<script>document.write(document.getElementById('fname').value+" "+document.getElementById('mname').value+""+document.getElementById('lname').value);</script>
<input type="submit" value="Submit">
</form>
</body>
It's not entirely clear what you want, but try this:
Jsfiddle Demo
<form action="PayslipServlet" method="get">
Last name: <input type="text" name="lname" id="lname"><br/>
First name: <input type="text" name="fname" id="fname"><br/>
Middle name: <input type="text" name="mname" id ="mname"><br/>
Name: <span id="result"></span>
<br>
<input type="button" value="Submit" onClick="pr()">
</form>
<script>
function pr() {
document.getElementById("result").innerHTML = document.getElementById('fname').value + " " + document.getElementById('mname').value + " " + document.getElementById('lname').value;
}
</script>
You should not use submit, if you want to stay on the current page. Client side printing can be easily achieved by using a button with a click listener.
window.writeValues = function(form) {
var fname = form.fname.value;
var mname = form.mname.value;
var lname = form.lname.value;
document.getElementById('fullname').innerHTML = fname + ' ' + mname + ' ' + lname;
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<form action="PayslipServlet" method="get">
Last name: <input type="text" name="lname" id="lname"><br/>
First name: <input type="text" name="fname" id="fname"><br/>
Middle name: <input type="text" name="mname" id="mname"><br/>
Name: <span id="fullname"></span><br />
<input type="button" value="Submit" onClick="writeValues(form)">
</form>
<html>
<head>
<title>NameTest</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action="PayslipServlet" method="get">
<div ng-app="">
Last name: <input type="text" name="lname" ng-model="lname" id="lname"><br/>
First name: <input type="text" name="fname" ng-model="fname" id="fname"><br/>
Middle name: <input type="text" name="mname" ng-model="mname" id ="mname"><br/>
full Name: {{lname}} {{fname}} {{mname}}<br/>
<input type="submit" value="Submit">
</div>
</form>
</body>
print easily with angularjs instead of javascript
First of all, you should't be using a form if you just want to print your user input, as per my understanding of your question I can suggest some code like these, BTW there some really good Javascript libraries that do what you want to do it without any troubles, like knockout.
Here it goes, Click on run Code Snippet, it works here
var el = document.getElementById("showName");
el.addEventListener("click", formatName, false);
function formatName () {
var name = document.getElementById('fname').value;
var mname = document.getElementById('mname').value;
var lastname = document.getElementById('lname').value;
document.getElementById('fullName').innerHTML = name + " " + mname + " " + lastname;
}
<form action="PayslipServlet" method="get">
Last name: <input type="text" name="lname" id="lname"><br/>
First name: <input type="text" name="fname" id="fname"><br/>
Middle name: <input type="text" name="mname" id ="mname"><br/>
Name: <span id="fullName"></span>
<input id="showName" type="button" value="Submit" />
</form>
window.writeValues = function(form) {
var fname = form.fname.value;
var mname = form.mname.value;
var lname = form.lname.value;
document.getElementById('fullname').innerHTML = fname + ' ' + mname + ' ' + lname;
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<form action="PayslipServlet" method="get">
Last name: <input type="text" name="lname" id="lname"><br/>
First name: <input type="text" name="fname" id="fname"><br/>
Middle name: <input type="text" name="mname" id="mname"><br/>
Name: <span id="fullname"></span><br />
<input type="button" value="Submit" onClick="writeValues(form)">
</form>
In this code i try to get the difference between two date and time
ex(09/05/2014 09:10:00 - 09/05/2014 11:18:00 ) it should return 78 minutes with a single function for multiple textboxes but unfortunately this piece of code is not working can some one suggest me the correct code or is there is any alternative way to perform this function , thanks in advance.
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="JS/datejquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("id^='endTime'".change(function(){
var index = $(this).attr('id').replace('endTime','');
alert(index);
var startTime = $('#startTime'+index).val();
var endTime = $(this).val();
$('#result'+index).val(endTime-startTime);
});
} );
</script>
</head>
<body>
<form name="wrs">
<input type="text" name="time1" id= "startTime1" class="num-box type1" />
<input type="text" name="time2" id = "endTime1" class="num-box type2" />
<input type="text" name="result1" class="num-box type5" />
<input type="text" name="startTime2" id= "time3" class="num-box type3" />
<input type="text" name="endTime2" id = "time4" class="num-box type4" />
<input type="text" name="result2" class="num-box type6" />
</form>
</body>
</html>
You missed the brackets.
$("[id^='endTime']").change(function(){
var index = $(this).attr('id').slice(7);
alert(index);
var startTime = $('#startTime'+index).val();
var endTime = $(this).val();
$('#result'+index).val(endTime-startTime);
});