external javascript function and html button
Question
beginner to html, javascript, and stack overflow so take it easy on me. i am trying to get my html to pop up a display that will use the function of the external js file to do calculations, but for now i will keep it simple:
function findA(x, y, z) {
var I = (x*100);
var N = (y/100);
var S = (z+50);
document.write(x,y,z);
}
that is all there is in the js file, now on to the html:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src="scripts/main.js"></script>
<![endif]-->
</head>
<body>
<article>
<form>
<fieldset id="button">
<input type="submit" id= "submit" value= "Calculate" onsubmit='findA(1,5,8)'>
</fieldset>
</form>
</article>
</body>
thats it for the html. it should just display one button on html screen. not sure what to do afterwords so any help will be greatly appreciated!
EDIT: *
my new code is this:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src="scripts/main.js"></script>
<![endif]-->
</head>
<body>
<article>
<form>
<fieldset id="button">
<input type="button" id= "submit" value= "Calculate" onclick='alert(monthly(1,5,8))'>
</fieldset>
</form>
</article>
</body>
and the js file is:
function monthly(x, y, z) {
var I = (x*100);
var N = (y/100);
var S = (z+50);
var A = ("I: " + I + "N: " + N + " S: " + S);
return A;
}
yet nothing happens when i click calculate. i am using chrome to test this as well as Internet Explorer. i dont see what could be wrong about this. suggestion?
6 answers
solution1
1 2015-06-12 00:20:22
First, change your " document.write " to " return " in your javascript. document.write will erase the existing HTML in the document, and won't provide a popup you have asked for.
For the rest, there are a few approaches, but I'd offer that the simplest suggestion would be to take this line:
<input type="submit" id= "submit" value= "Calculate" onsubmit='findA(1,5,8)'>
and change it to (updated):
<input type="button" id= "submit" value= "Calculate" onclick='alert(monthly(1,5,8))'>
EDIT: The following jsfiddle works: ( https://jsfiddle.net/7stL2cmL/12/ )
<!DOCTYPE html>
<body>
<head>
<script type="text/javascript">
function monthly(x, y, z) {
var I = (x * 100);
var N = (y / 100);
var S = (z + 50);
var A = ("I: " + I + "N: " + N + " S: " + S);
return A;
}
</script>
</head>
<article>
<form>
<fieldset id="button">
<input type="button" id="submit" value="Calculate" onclick='alert(" dddd"+monthly(1,5,8))'>
</fieldset>
</form>
</article>
</body>
solution2
0 2015-06-12 00:20:00
Use onclick instead of onsubmit.
function findA(x, y, z) { var I = (x*100); var N = (y/100); var S = (z+50); document.write(x,y,z); }
<fieldset id="button"> <input type="submit" id= "submit" value= "Calculate" onclick='findA(1,5,8)'> </fieldset>
solution3
0 2015-06-12 00:24:07
first;: the html will show the button, but the document.write will never be seen by the user befouse is executed onsubmit , if you wan to test you must edit the function like this
function findA(x, y, z) {
var I = (x*100);
var N = (y/100);
var S = (z+50);
document.write(x,y,z);
return false;
}
and then in the html submit use:
<input type="submit" id= "submit" value= "Calculate" onsubmit='return findA(1,5,8)'>
second: the script include it will work only for internet explorer 9 or less so if you are testing with a browser that doesn't match that version change the conditional include
solution4
0 2015-06-12 00:26:02
Nobody seems to notice, but your input element should have closed:
<input type="submit" id= "submit" value= "Calculate" onsubmit='findA(1,5,8)'>
Like this:
<input type="submit" id= "submit" value= "Calculate" onsubmit='findA(1,5,8)'/>
solution5
0 2015-06-12 00:27:52
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src="scripts/main.js"></script>
<![endif]-->
</head>
<body>
<article>
<form>
<fieldset id="button">
<input type="submit" id= "submit" value= "Calculate" onclick='findA(1,5,8)'>
</fieldset>
</form>
</article>
</body>
change to onsubmit to onclick as you haven't used a form there.
new javascript code to display popup
function findA(x, y, z) {
var I = (x*100);
var N = (y/100);
var S = (z+50);
alert(I+N+S);
}
hope this helps
solution6
0 2015-06-13 02:35:43
One question, Is the external file main.js? If so then only IE9 and below will be able to understand the conditional comments <!--[if lt IE 9]> ... <![endif]--> . Place the reference to the main.js outside the conditional comments like
<head>
<meta charset="utf-8" />
<script src="scripts/main.js"></script>
</head>
For more details about conditional comments you can refer http://www.quirksmode.org/css/condcom.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.