Please forgive any potential lapses in protocol and/or formatting. I'm new at this. Clicking on my "submit" button does not call the function cost(). What am I doing wrong?
<html>
<head>
<script type="text/javascript">
function cost() {
mpg = document.getElementById("mpg");
distance = document.getElementById("distance");
gasPrice = document.getElementById("gasPrice");
alert("<p>" + Math.round((distance / mpg) * gasPrice) + "</p>");
}
</script>
<h1>Trip Cost Calculator</h1>
</head>
<p> Enter mpg (miles): </p>
<input type="text" id="mpg">
</input>
</body>
<body>
<p> Enter distance (miles): </p>
<input type="text" id="distance">
</input>
</body>
<body>
<p> Enter gas price (dollars): </p>
<input type="text" id="gasPrice">
</input>
</body>
<body>
</br>
<input type="button" id="submit" value="Submit" onclick="cost()"/>
</body>
You are manipulating objects.Retrieve values using value property like this.
mpg = document.getElementById("mpg").value;
distance = document.getElementById("distance").value;
gasPrice = document.getElementById("gasPrice").value;
You need value of those elements, not the element it self:
<script type="text/javascript">
function cost() {
mpg = document.getElementById("mpg").value;
distance = document.getElementById("distance").value;
gasPrice = document.getElementById("gasPrice").value;
alert(Math.round((distance / mpg) * gasPrice));
}
</script>
And you also need to remove all those extra <body> tags.
Your body tags are incorrect. You also need to close your html tag. Moreover, use the .value property to access the input fields.
<html>
<head>
<script type="text/javascript">
function cost() {
mpg = document.getElementById("mpg").value;
distance = document.getElementById("distance").value;
gasPrice = document.getElementById("gasPrice").value;
alert("<p>" + Math.round((distance / mpg) * gasPrice) + "</p>");
}
</script>
<h1>Trip Cost Calculator</h1>
</head>
<body>
<p> Enter mpg (miles): </p>
<input type="text" id="mpg">
</input>
<p> Enter distance (miles): </p>
<input type="text" id="distance">
</input>
<p> Enter gas price (dollars): </p>
<input type="text" id="gasPrice">
</input>
</br>
<input type="button" id="submit" value="Submit" onclick="cost()"/>
</body>
</html>
Things go wrong on all kinds of levels here, first and for all make sure you have valid html. When working with DOM nodes it's always best to make sure your browser can create a valid dom tree and that works best with valid html. Check http://validator.w3.org
Second, in your cost() function you aren't fetching the values of the input fields but the fields themself. Ofcourse this results in some weird behaviour which might explain you thinking the cost() function isn't executed. It probably is but is throwing errors you don't notice (check the debug/error console of your browser)
I've fixed up your example, check it, learn from it and read up on webstandards :)
http://jsfiddle.net/vyfqC/3/
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function cost() {
mpg = document.getElementById("mpg").value;
distance = document.getElementById("distance").value;
gasPrice = document.getElementById("gasPrice").value;
alert("<p>" + Math.round((distance / mpg) * gasPrice) + "</p>");
}
</script>
<title>Trip cost calculator</title>
</head>
<body>
<h1>Trip Cost Calculator</h1>
<p> Enter mpg (miles): </p>
<input type="text" id="mpg" />
<p> Enter distance (miles): </p>
<input type="text" id="distance" />
<p> Enter gas price (dollars): </p>
<input type="text" id="gasPrice" />
<input type="button" id="submit" value="Submit" onclick="cost()"/>
</body>
Related
I want to user to press submit button so that their name and age is displayed in the input box with name="output"?
I have 3 input boxes, one asking for name and the other for age while the other one provides output. I am trying to use the function output() to display the last input box.
I am confused about where I am going wrong, do I need a .value?
<!doctype html>
<html>
<head>
<style>
.formdiv{
align: center;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function output(){
var name = getElementByName('firstName');
var Age= getElementByName('age');
var out = document.write(name+Age);
document.getElementByName('output') = out;
}
</script>
<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset><center>
<legend> Enter the following Info:</legend>
<br />
<label> Name </label>
<input type="text" name="firstName" placeholder="John" required="required"></input>
<br/>
<br/>
<label>Age </label>
<input type="number" name="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
<button onClick="output()">Submit</button><br/>
<label for="output">Output</label>
<br/>
<input type="textbox" name="output"></input>
</center>
</div>
</body>
</html>
Here's a working version of your code.
There's no method getElementByName (but getElementsByName) - you should use document.getElementById() (Read about it here)
You should use the value of the input element.
<!doctype html>
<html>
<head>
<style>
.formdiv{
align: center;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function output(){
var name = document.getElementById('firstName').value;
var Age= document.getElementById('age').value;
document.getElementById('output').value = name+Age;
}
</script>
<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset><center>
<legend> Enter the following Info:</legend>
<br />
<label> Name </label>
<input type="text" id="firstName" placeholder="John" required="required"></input>
<br/>
<br/>
<label>Age </label>
<input type="number" id="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
<button onClick="output()">Submit</button><br/>
<label for="output">Output</label>
<br/>
<input type="textbox" id="output"></input>
</center>
</div>
</body>
</html>
getElementsByName (note: Elements, not Element) returns a list of Elements, in this case your <input>s. So first of all, you need to select the first (in your case your only one) using getElementsByName(...)[0]. Then you get one Element.
However you do not want to output the entire element (which is an Object, not a String, and converted to a string it likely won't be what you expect), so you need to select the value property of that Element. So yes, you need to add .value, just as you assumed:
function output(){
var name = getElementsByName('firstName')[0].value;
var Age= getElementsByName('age')[0].value;
Then, document.write writes the argument to a new document directly, which results in an emtpy page with nothing else on it but that string. This isn't what you want, so you don't need that. ALl you do want is to assign a new variable called out with that string:
var out = name+Age;
Then to assigning the new value to the output field - you don't want to replace the Element by a string (that wouldn't even work), but it's value, so you need the .value again:
document.getElementsByName('output')[0].value = out;
}
That should do the trick.
(In addition to that, you might want to use name + " " + Age instead of simply name+Age, as otherwise you end up with "John Doe23" instead of "John Doe 23" which you likely want)
There are a few things wrong with your code:
there is no such thing as getElementByName - it is getElementById
changing to the above, you need to add ids to your input elements
you need to use the value of the returned object from getElementById
The above will get your code working, but also, the center tag is obsolete and you shouldn't use it
Inputs are self closing tags so you don't need </input>
<!doctype html>
<html>
<head>
<style>
.formdiv {
align: center;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function output() {
var name = document.getElementById('firstName').value;
var Age = document.getElementById('age').value;
var out = name + Age;
document.getElementById('output').value = out;
}
</script>
<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset>
<center>
<legend>Enter the following Info:</legend>
<br />
<label>Name</label>
<input type="text" name="firstName" id="firstName" placeholder="John" required="required"></input>
<br/>
<br/>
<label>Age</label>
<input type="number" name="age" id="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
<button onClick="output()">Submit</button>
<br/>
<label for="output">Output</label>
<br/>
<input type="textbox" name="output" id="output"></input>
</center>
</div>
</body>
</html>
I'm trying to write a simple program to calculate the area of a triangle but I'm finding it hard to get input from user. I gave the input an id and set the value to the innerhtml of the input but it's giving me a default value of 1.
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Area Of A Triangle</title>
<style type="text/css">
p{
padding:0;
margin:0;
}
</style>
</head>
<body>
<h2>Calculate The Area Of A Triangle</h2>
<p>Enter The Values</p>
<p><input id="firstside" type="text" /></p>
<p><input id="secondside" type="text" /></p>
<p><input id="thirdside" type="text" /></p>
<button id="solve">Submit</button>
<p>Answer Is : <span id="answer"></span></p>
<script type="text/javascript" >
var a; var b; var c; var s; var area;
a= document.getElementById("firstside").value==document.getElementById("firstside").innerHTML;
b= document.getElementById("secondside").value==document.getElementById("secondside").innerHTML;
c= document.getElementById("thirdside").value==document.getElementById("thirdside").innerHTML;
document.getElementById("solve").onclick=function() {
s = (a+b+c);
document.getElementById("answer").innerHTML=s;
}
</script>
</body>
</html>
When you read the innerHTML property, you serialize all the child nodes of the element to HTML and then get that as a string. Setting innerHTML does the same thing in reverse.
An input element doesn't (and can't) have any child nodes (<input>foo</input>) is invalid HTML).
Its current value is reflected through its value property.
Here is Jsbin I've created for you. I hope you would like it
https://jsbin.com/futotexeci/edit?html,output
<div class='col-lg-4'>
Base <input type="number" min='0' id='base' class='form-control' />
<hr>
Altitude <input type="number" min='0' id='altitude' class='form-control' />
<hr>
Area <input type="number" min='0' id='area' class='form-control' disabled />
<hr>
<button class='btn btn-primary' onclick='findArea()'>Calculate</button>
JS
function findArea(){
var base = $('#base').val();
var altitude = $('#altitude').val();
var area = 1/2 * base * altitude;
$('#area').val(area);
}
Stay happy and do some effort :)
I am new to Javascript so sorry in advance if its because of dumb errors.
I need to add "salaire", "pension" and "autre" and show it in an input after I click a button. I am not sure if I used the right tags in my code probably more suitable ones.
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8"/>
<script>
function revenue_mensuel()
{
var salaire = document.getelementsbyname("salaire");
var pension = document.getelementsbyname("pension");
var autre = document.getelementsbyname("autre");
return {salaire+pension+autre}
document.getElementById("revenue").value = revenue_mensuel();
}
</script>
<style>
</style>
</head>
<body>
<h1 vos revenus mensuels </h1>
<br/>
<div>
<form>
salaire mensuel (avant impots):
<input type="number and decimal/floats" name="salaire">
</form>
<br/>
<form>
pension alimentaire recus:
<input type="number and decimal/floats" name="pension">
</form>
<br/>
<form>
autre revenue mensuels:
<input type="number and decimal/floats" name="autre">
</form>
<br/>
<form>
total des revenue mensuel:
<input id="revenue" type="text"/>
<input type="button" onclick='revenue_mensuel()'/>
</form>
</body>
</html>
A list of technical issues
Javascript is case-sensitive so method you want is getElementsByName and not getelementsbyname
the getElementsByName return a list of elements (so you need to specify which in the list) in your case it is the 1st one always. so you need to access it with [0]
then you need to extract the actual value of the input with .value.
you need to convert the string to a number. (adding + at the start, or using parseInt will do the trick)
In the concept
You are calling the revenue_mensuel from inside it self, causing an infinite loop.
you do not need to return anything from the function since you assign the result to the element directly.
Html issues
you have left the h1 open
you do not need a different form for each input element
All changes together give
function revenue_mensuel() {
var salaire = +document.getElementsByName("salaire")[0].value;
var pension = +document.getElementsByName("pension")[0].value;
var autre = +document.getElementsByName("autre")[0].value;
document.getElementById("revenue").value = salaire + pension + autre;
}
<h1> vos revenus mensuels </h1>
<br/>
<div>
<form>
salaire mensuel (avant impots):
<input type="number and decimal/floats" name="salaire">
<br/>pension alimentaire recus:
<input type="number and decimal/floats" name="pension">
<br/>autre revenue mensuels:
<input type="number and decimal/floats" name="autre">
<br/>total des revenue mensuel:
<input id="revenue" type="text" />
<input type="button" onclick='revenue_mensuel()' />
</form>
</div>
You should use
<input type="number" name="...">
there is no such thing as type="number and decimal/floats"
This validator will help you fix your code: http://validator.w3.org/
<title>Javascript</title>
<script>
function buttonreport(id,name,address){
var userid ="Id:"+id;
var username="Name :"+name+"\n";
var useraddress ="Address:"+address+"\n";
alert(userid+username+useraddress);
}
</script>
</head>
<body>
ID:<input type="text" name="id"/><br/>
NAME:<input type="text" name="name"/><br/>
ADDRESS:<input type="text" name="address"/><br/>
<input type="submit" value="Submit" onclick="buttonreport(this.id,this.name,this.address)"/>
</body>
now its working but output shows as id:name:address no entered values are displayed
You spelled alert wrong in your script
I'm not JS expert, but maybe You need <form> tags around submit form. You could also just use getelementbyid.
your alret should be alert. now it works :)
<title>Javascript</title>
<script>
function buttonreport(id,name,address){
var userid ="Id:"+id;
var username="Name :"+name+"\n";
var useraddress ="Address:"+address+"\n";
alert(userid+username+useraddress);
}
</script>
</head>
<body>
ID:<input type="text" name="id"/><br/>
NAME:<input type="text" name="name"/><br/>
ADDRESS:<input type="text" name="address"/><br/>
<input type="submit" value="Submit" onclick="buttonreport(this.id,this.name,this.address)"/>
I am new to Javascript and I will be thankful if someone help me understand what I am doing wrong. I am trying to calculate the surface area of a trapezoid by obtaining values from input fields. When I press the "Calculate S" button I get a "Nan" as an answer.
This is the major part of the HTML code:
<form method="post">
<label for="a">a</label>
<input type="text" id="a"/> <br/>
<label for="b">b</label>
<input type="text" id="b"/> <br/>
<label for="h">h</label>
<input type="text" id="h"/> <br/>
<button onclick="alert(S)">Calculate S</button>
</form>
And this is the script I am using to obtain the values and calculate the surface:
<script type="text/javascript">
var a=parseInt(document.getElementById("a"), 10);
var b=parseInt(document.getElementById("b"), 10);
var h=parseInt(document.getElementById("h"), 10);
var S=parseInt(((a+b)/2)*h, 10);
</script>
Thanks in advance!
You need to get the value out of each input, not just the input, like this:
<script type="text/javascript">
var a=parseInt(document.getElementById("a").value, 10);
var b=parseInt(document.getElementById("b").value, 10);
var h=parseInt(document.getElementById("h").value, 10);
var S=((a+b)/2)*h;
</script>
Use .value property on the input elements to get their contents. then call parseInt on that to get a number.
No need to parseInt the result too.
var S = ((a + b) / 2) * h;
Wrap the code in a callable function if you want it executed on button click (what you have now will execute when the code been parsed by your browser).
Example found here: http://jsfiddle.net/bpwEh/
Updated code:
<head>
<!-- ... -->
<script>
function calc(){
var a=parseInt(document.getElementById("a").value, 10);
var b=parseInt(document.getElementById("b").value, 10);
var h=parseInt(document.getElementById("h").value, 10);
return ((a+b)/2)*h, 10;
}
</script>
</head>
<body>
<form method="post">
<label for="a">a</label>
<input type="text" id="a"/> <br/>
<label for="b">b</label>
<input type="text" id="b"/> <br/>
<label for="h">h</label>
<input type="text" id="h"/> <br/>
<button onclick="alert(calc()); return false;">Calculate S</button>
</form>
</body>