Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
The problem is that the javascript will not run when i press the button on the form. i have no idea why its really annoying me, i am trying to make this add items via different text boxes then fining the average.
<script type="text/javascript">
function getmark() {
var g1 = document.getElementById('g1').value;
var g2 = document.getElementById('g2').value;
var g3 = document.getElementById('g3').value;
var newtotal = total /3;
var total = q1+q2+q3;
alert(total);
}
</script>
it just doesn't seem to work for the life of me.
This is form im using to run it.
<form name = "gradecalc">
<p>Grade 1: Earned Points <input id='g1' type = "text"/> Out of:<input type = "text" value="9" readonly="readonly"/></p>
<p>Grade 2: Earned Points <input id='g2' type = "text"/> Out of:<input type = "text" value="9" readonly="readonly"/></p>
<p>Grade 3: Earned Points <input id='g3' type = "text"/> Out of:<input type = "text" value="9" readonly="readonly"/></p>
<p>Grade 6: Earned Points <input id='g6' type = "text"/> Out of:<input type = "text" value="9"
<input id='entry_avg' onclick = "getmark()" type="button" value="Get Mark"/>
<input name = "clear" type = "reset" value = "Clear Form"/>
</form>
What was the problem?
You had an unclosed tag and invalid Javascript
How do I fix the problem?
Use this HTML:
<form name="gradecalc">
<p>Grade 1: Earned Points
<input id='g1' type="text" />Out of:
<input type="text" value="9" readonly="readonly" />
</p>
<p>Grade 2: Earned Points
<input id='g2' type="text" />Out of:
<input type="text" value="9" readonly="readonly" />
</p>
<p>Grade 3: Earned Points
<input id='g3' type="text" />Out of:
<input type="text" value="9" readonly="readonly" />
</p>
<p>Grade 6: Earned Points
<input id='g6' type="text" />Out of:
<input type="text" value="9"/> <input id='entry_avg' onclick="getmark()" type="button" value="Get Mark" />
</p>
<input name="clear" type="reset" value="Clear Form" />
</form>
And this javascript:
document.getElementById('entry_avg').addEventListener('click', function() { getmark(); });
function getmark() {
var g1 = document.getElementById('g1').value;
var g2 = document.getElementById('g2').value;
var g3 = document.getElementById('g3').value;
var total = parseInt(g1) + parseInt(g2) + parseInt(g3);
var newtotal = total / 3;
alert(total);
}
DEMO
Related
This question already has answers here:
How to use document.getElementByName and getElementByTag?
(6 answers)
Closed 5 years ago.
I am writing a simple online order form for widgets which is supposed to take the order of 3 widgets, add them together and give a total number and a cost. However, when the button is clicked to go into the function, nothing happens. I am not sure whether the fault is in getting the data into the function or getting it out of the function.
function cal() {
var wid1 = document.getElementById("widg1").value;
var wid2 = document.getElementById("widg2").value;
var wid3 = document.getElementById("widg3").value;
var tot = (wid1 + wid2 + wid3);
var dollars = ((wid1 * 12.45) + (wid2 * 15.34) + (wid3 * 28.99));
document.getElementByName("total").value = tot;
document.getElementByName("money").value = dollars;
}
<form name="widgets">
widget model 37AX-L:<br>
<input type="text" id="widg1" name="37AX-L" value=0><br> widget model 42XR-J:<br>
<input type="text" id="widg2" name="42XR-J" value=0><br> widget model 93ZZ-A:<br>
<input type="text" id="widg3" name="93ZZ-A" value=0><br>
<br>
<input type="button" name="B1" value="Calculate" onclick="cal()"><br>
</form>
<input type="text" name="total" id="total"> total widgets <br>
<input type="text" name="money" id="money"> total dollars
You omitted s in Elements.
document.getElementsByName("total")[0].value=tot not document.getElementByName("total")
<form name="widgets">
widget model 37AX-L:<br>
<input type="text" id="widg1" name="37AX-L" value=0><br>
widget model 42XR-J:<br>
<input type="text" id="widg2" name="42XR-J" value=0><br>
widget model 93ZZ-A:<br>
<input type="text" id="widg3" name="93ZZ-A" value=0><br>
<br>
<input type="button" name="B1" value="Calculate" onclick="cal()"><br>
</form>
<input type="text" name="total" id="total"> total widgets <br>
<input type="text" name="money" id="money"> total dollars
<script>
function cal(){
var wid1 = document.getElementById("widg1").value;
var wid2 = document.getElementById("widg2").value;
var wid3 = document.getElementById("widg3").value;
var tot = (wid1+wid2+wid3);
var dollars = ((wid1*12.45)+(wid2*15.34)+(wid3*28.99));
document.getElementsByName("total")[0].value=tot;
document.getElementsByName("money")[0].value=dollars;
}
</script>
new guy here. I have a feeling this is an extremely basic question but I can't get this Jquery code to write the output of the function to html and have it show up. I believe it's an issue with the script but unsure if I am doing something wrong with html as well.
The goal of this function is to create a calculator that gives future investment value based on what the user inputs. When I click submit, It used to change all of the html to show just 'NaN' but now when I click the submit button, it clears the input boxes but does not give me any number or any answer even though I believe I've set it to display the number to
HTML
<body>
<div id = "futurevalue">
<form>
<input type="radio" name="formula" value="future_investment" checked>Future Investment<br>
<label for="princeple">Enter the princeple amount invested:</label>
<input id="princeple" type="number" name="princeple" step="0.01"><br>
<label for="time">Enter how long the investment will be for (in years):</label>
<input id='time' type='number' name='time'><br>
<label for='rate'>Enter the expected interest rate:</label>
<input id='rate' type="number" name='rate'><br>
<input id='submit' type='submit' name='submit'>
</form>
<p>Total:</p>
<p id='result'></p>
</div>
jQuery
$('#submit').click(function(){
$('#result').html(function(){
return toString(output,10);
});
});
var princeple = parseInt($('#princeple'),10);
var time = parseInt($('#time'),10);
var rate = parseInt($('#rate'),10);
var output = (princeple * time + rate);
Here is your fix:
$('#submit').click(function(){
var princeple = parseInt($('#princeple').val());
var time = parseInt($('#time').val());
var rate = parseFloat($('#rate').val()/100);
var output = ((princeple * rate) * time);
$('#result').html(output);
//prevent from page reload
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "futurevalue">
<form>
<input type="radio" name="formula" value="future_investment" checked>Future Investment<br>
<label for="princeple">Enter the princeple amount invested:</label>
<input id="princeple" type="number" name="princeple" step="0.01"><br>
<label for="time">Enter how long the investment will be for (in years):</label>
<input id='time' type='number' name='time'><br>
<label for='rate'>Enter the expected interest rate:</label>
<input id='rate' type="number" name='rate'><br>
<input id='submit' type='submit' name='submit'>
</form>
<p>Total:</p>
<p id='result'></p>
</div>
You have to calculate the value inside the click event and assign to the result. The formula for calculating interest is also incorrect.
Try the following code, basically you need:
Calculate your variables inside cb click and than output the resut in your div #result. Use .val to get values for your inputs and event.preventDefault() to avoid form submit (which is the browser default behavior).
$('#submit').click(function(event) {
var princeple = parseInt($('#princeple').val(), 10);
var time = parseInt($('#time').val(), 10);
var rate = parseInt($('#rate').val(), 10);
var output = (princeple * time + rate);
$('#result').html(output);
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="futurevalue">
<form>
<input type="radio" name="formula" value="future_investment" checked>Future Investment<br>
<label for="princeple">Enter the princeple amount invested:</label>
<input id="princeple" type="number" name="princeple" step="0.01"><br>
<label for="time">Enter how long the investment will be for (in years):</label>
<input id='time' type='number' name='time'><br>
<label for='rate'>Enter the expected interest rate:</label>
<input id='rate' type="number" name='rate'><br>
<input id='submit' type='submit' name='submit'>
</form>
<p>Total:</p>
<p id='result'></p>
</div>
I am enrolled in an online class and I keep reading the section of my book for js inclusion and I can't figure this out. Could someone please explain to me what I am doing wrong. Im trying to call the function to take in the weight and display the calculations back in the form text boxes. I cant find anything on the internet like this or explains how it works. Why can't this just be like C++ :(
<!DOCTYPE html>
<html>
<script>
function Weight()
{
var mercury = earth*(.378);
var venus = earth*(.907);
var mars = earth*(.377);
var jupiter = earth*(2.364);
var saturn = earth*(.916);
var uranus = earth*(.889);
var neptune = earth*(1.125);
var pluto = earth*(.067);
var sun = earth*(27.072);
var moon = earth*(.166);
}
</script>
<body>
<form action="javascript:Weight(earth);">
Enter Your Weight on Earth:<br>
<input type="text" name="earth">
<br><br>
Mercury:<br>
<input type="text" name="mercury">
<br>
Venus:<br>
<input type="text" name="venus">
<br>
Mars:<br>
<input type="text" name="mars">
<br>
Jupiter:<br>
<input type="text" name="jupiter">
<br>
Saturn:<br>
<input type="text" name="saturn">
<br>
Uranus:<br>
<input type="text" name="uranus">
<br>
Neptune:<br>
<input type="text" name="neptune">
<br>
Pluto:<br>
<input type="text" name="pluto">
<br>
Sun:<br>
<input type="text" name="sun">
<br>
Moon:<br>
<input type="text" name="moon">
<br>
<input type="submit" value="Calculate">
</form>
</body>
</html>
Here is a working demo:
Created an array planetArray containing the planets information
Added an attribute id to the submit input
Attached click event to submitButton. In the function get the earth input value and iterate over planetArray and calculate the weight value respectively on planets
var planetsArray = [{name: "mercury",weight: 0.378}, {name: "venus",weight: 0.907}, {name: "mars",weight: 0.377}, {name: "jupiter",weight: 2.364}, {name: "saturn",weight: 0.916}, {name: "uranus",weight: 0.889}, {name: "neptune",weight: 1.125}, {name: "pluto",weight: 0.067}, {name: "sun",weight:27.072}, {name: "moon",weight: 0.166}],
submitButton = document.getElementById('submit');
// Attach click event
submitButton.onclick = function (e) {
e.preventDefault();
var earth = document.getElementsByName('earth')[0];
planetsArray.forEach(function (p) {
var elem = document.getElementsByName(p.name)[0],
weight = p.weight * +earth.value;
elem.value = weight.toFixed(2);
});
};
<form action="javascript:Weight(earth);">
Enter Your Weight on Earth:<br>
<input type="text" name="earth">
<br><br>
Mercury:<br>
<input type="text" name="mercury">
<br>
Venus:<br>
<input type="text" name="venus">
<br>
Mars:<br>
<input type="text" name="mars">
<br>
Jupiter:<br>
<input type="text" name="jupiter">
<br>
Saturn:<br>
<input type="text" name="saturn">
<br>
Uranus:<br>
<input type="text" name="uranus">
<br>
Neptune:<br>
<input type="text" name="neptune">
<br>
Pluto:<br>
<input type="text" name="pluto">
<br>
Sun:<br>
<input type="text" name="sun">
<br>
Moon:<br>
<input type="text" name="moon">
<br>
<input type="submit" value="Calculate" id="submit">
</form>
Hello javascript doesn't work in that way as you think.I can't teach you the whole thing here ,there are lot of information/articles in internet you may search them ,but I can suggest you a solution of what you wanted to do .Check the below code hope it helps
var earth=document.getElementById("earth");
var mercury=document.getElementById("mercury");
var venus=document.getElementById("venus");
var mars=document.getElementById("mars");
document.getElementById("button").onclick = function (e) {
e.preventDefault();
mercury.value=(earth.value) *(.378);
venus.value=(earth.value) *(.907);
mars.value=(earth.value) *(.377);
};
<form name ="my">
Enter Your Weight on Earth:<br>
<input type="text" id="earth" name="earth">
<br><br>
Mercury:<br>
<input type="text" id="mercury" name="mercury">
<br>
Venus:<br>
<input type="text" id="venus" name="venus">
<br>
Mars:<br>
<input type="text" id="mars" name="mars">
<br>
<input type="submit" id="button" value="Calculate">
</form>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Sorry, I am reallllly new to Javascript/HTML. Okay so I am writing a program that shows the user a form. On that form they enter the price of an object they bought and click the shipping they want (standard or expedited). Then they click calculate and then it will show the S&H price, tax, and the total of the order. So the problem I am having is being able to communicate between the javascript code and the html form. We are also using very bacis techniques so I do not know how to do anything advanced. the code is here:
<head>
<title> </title>
<script type="text/javascript">
<!--
//this will prompt the user to enter the price(s) of their item(s) and add them together to get a 'total' of what they have input so far.
function calc()
{
var iPrice = document.getElementById("iPrice").value;
iPrice=parseInt(iPrice);
if(iPrice <=0)
alert("Please enter a number greater than 0");
var shipMeth=document.getElementById("shipMethS").checked;
var shippingPrice;
if(shipMeth)
{
if(iPrice<0 && iPrice <25)
shippingCost =4.50;
else if(iPrice <50)
shippingCost=7;
else
shippingCost=10.25;
}
else
{
if(iPrice<0 && iPrice <25)
shippingCost =9.50;
else if(iPrice <50)
shippingCost=12;
else
shippingCost=15.25;
}
shippingCost=parseFloat(shippingCost);
var tax = iPrice*.06;
tax=parseFloat(tax);
var totalPrice=iPrice+shippingCost+tax;
document.getElementById("totalPrice").value=totalPrice;
}
-->
</script>
<body>
<form>
<p><label> Price: $
<input name="iPrice"id="iPrice"type="text"size="25"/>
</label>
</p>
<p>Shipping Method (Please only select one)</p>
<p><Label>Standard
<input name="CB"type="checkbox"value="Standard"id="shipMethS"/>
</label>
<label>Expedited
<input name="CB"type="checkbox"value="Expedited"id="shipMethE"/>
</label>
</p>
<p><label>S&H Charges:
<input name="S&H Charges" type="text" size="25" readOnly />
</label>
</p>
<p><label>Tax (#6.00%):
<input name="taxCharges" type="text" size="25" readOnly />
</label>
</p>
<p><label>Total Price:
<input name="totalPrice" type="text" size="25" value="totalPrice" readOnly />
</label>
</p>
<p>
<input type="button"value="Calculate"onClick="calc()"/>
<input type="reset"value="Clear"/>
</p>
</form>
<input name="totalPrice" type="text" size="25" value="totalPrice" readOnly />
needs to be
<input id="totalPrice" name="totalPrice" type="text" size="25" value="totalPrice" readOnly />
if you want to use "getElementById"
document.getElementById("totalPrice").value=totalPrice;
Then add the other fields at the end of the function:
document.getElementById("taxCharges").value=tax;
document.getElementById("shCharges").value=shippingCost;
You definitely don't need the comment tag in the script, but it shouldn't hurt anything. It looks like you could use more validation to make sure that there is a number in the input.
You are missing many things to make this works if this you are saying this the whole thing, see all of the changes I have done to it.
<html>
<head>
<title> </title>
<script type="text/javascript">
<!--
//this will prompt the user to enter the price(s) of their item(s) and add them together to get a 'total' of what they have input so far.
-->
function calc()
{
var iPrice = document.getElementById("iPrice").value;
iPrice=parseInt(iPrice);
if(iPrice <=0)
alert("Please enter a number greater than 0");
var shipMeth=document.getElementById("shipMethS").checked;
var shippingPrice;
if(shipMeth)
{
if(iPrice<0 && iPrice <25)
shippingCost =4.50;
else if(iPrice <50)
shippingCost=7;
else
shippingCost=10.25;
}
else
{
if(iPrice<0 && iPrice <25)
shippingCost =9.50;
else if(iPrice <50)
shippingCost=12;
else
shippingCost=15.25;
}
shippingCost=parseFloat(shippingCost);
var tax = iPrice*.06;
tax=parseFloat(tax);
var totalPrice=iPrice+shippingCost+tax;
document.getElementById("totalPrice").value=totalPrice;
}
</script>
</head>
<body>
<form>
<p><label> Price: $
<input name="iPrice" id="iPrice" type="text" size="25"/>
</label>
</p>
<p>Shipping Method (Please only select one)</p>
<p><Label>Standard
<input name="CB" type="checkbox" value="Standard" id="shipMethS"/>
</label>
<label>Expedited
<input name="CB" type="checkbox" value="Expedited" id="shipMethE"/>
</label>
</p>
<p><label>S&H Charges:
<input name="S&H Charges" type="text" size="25" readOnly />
</label>
</p>
<p><label>Tax (#6.00%):
<input name="taxCharges" type="text" size="25" readOnly />
</label>
</p>
<p><label>Total Price:
<input id="totalPrice" type="text" size="25" value="totalPrice" readOnly />
</label>
</p>
<p>
<input type="button" value="Calculate" onClick="calc()"/>
<input type="reset" value="Clear"/>
</p>
</body>
</html>
I am trying to create a simple calculator that takes a number from 1 text box and after hitting a submit button it takes the number and multiplies it by 92 then puts it in a read only box.
This is what I have so far:
<form name="1star">
<input type="text" name="input"/>
<input type="button" value="Enter" OnClick="1star.output.value == 1star.input.value * 92"/>
<br/>
<input type="text" name="output" readonly="readonly" />
</form>
This is not working and I could use some help. I know its easy but I am very new to js and I'm not understanding why this isn't working.
<form name="onestar">
<input type="text" name="input"/>
<input type="button" value="Enter" OnClick="onestar.output.value = onestar.input.value * 92"/>
<br/>
<input type="text" name="output" readonly="readonly" />
</form>
An identifier cannot start with a digit in JavaScript, so 1star is an error. Also, you wanted = (assignment), not == (comparison).
That said, there are a number of outdated or beginner practices above. If I was writing it, I would separate the script from the markup, and I'd use document.getElementById to fetch the element rather than relying on implicit variables defined by name. I would also explicitly parse the string into a number. But for now no need to worry about it too much. Even though the code seems much more complicated at first glance, it's all things that will make your life easier later, with bigger programs.
var input = document.getElementById('input');
var output = document.getElementById('output');
var button = document.getElementById('button');
button.addEventListener('click', function(evt) {
var value = parseInt(input.value, 10);
if (!isNaN(value)) {
output.value = value * 92;
}
});
<form>
<input type="text" id="input"/>
<input type="button" id="button" value="Enter"/>
<br/>
<input type="text" id="output" readonly="readonly" />
</form>