外部javascript函数和html按钮
[英]external javascript function and html button
问题描述
beginner to html, javascript, and stack overflow so take it easy on me. 
html，javascript和堆栈溢出的初学者，所以请放轻松。 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: 我试图让我的html弹出一个显示，它将使用外部js文件的功能进行计算，但是现在我将使其保持简单：
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: 这就是js文件中的所有内容，现在转到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. 多数民众赞成在它的HTML。 it should just display one button on html screen. 它应该只在html屏幕上显示一个按钮。 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: js文件是：
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. 我正在使用chrome以及Internet Explorer对此进行测试。 i dont see what could be wrong about this. 我看不出这有什么问题。 suggestion? 建议？
6 个解决方案
解决方案1
1 2015-06-12 00:20:22
First, change your " document.write " to " return " in your javascript. 首先，在JavaScript中将“ document.write ”更改为“ return ”。 document.write will erase the existing HTML in the document, and won't provide a popup you have asked for. document.write将清除文档中现有的HTML，并且不会提供您要求的弹出窗口。
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/ ) 编辑：以下jsfiddle起作用：（ 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>
解决方案2
0 2015-06-12 00:20:00
Use onclick instead of onsubmit. 使用onclick代替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>
解决方案3
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 first ;： html将显示该按钮，但是document.write将不会被用户看到，因为onsubmit会执行该命令，如果要进行测试，则必须编辑该函数
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: 然后在html提交中使用：
<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 第二：脚本包含仅适用于Internet Explorer 9或更低版本，因此如果您使用的浏览器与该版本不匹配，请更改条件包含
解决方案4
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)'/>
解决方案5
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. 更改为onsubmit到onclick，因为您在那里没有使用过表单。
new javascript code to display popup 新的JavaScript代码以显示弹出窗口
function findA(x, y, z) {
var I = (x*100);
var N = (y/100);
var S = (z+50);
alert(I+N+S);
}
hope this helps 希望这可以帮助
解决方案6
0 2015-06-13 02:35:43
One question, Is the external file main.js? 一个问题， 外部文件是main.js吗？ If so then only IE9 and below will be able to understand the conditional comments <!--[if lt IE 9]> ... <![endif]--> . 如果是这样，则只有IE9及以下版本才能理解条件注释<!--[if lt IE 9]> ... <![endif]--> 。 Place the reference to the main.js outside the conditional comments like 将对main.js的引用放在条件注释之外，例如
<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 有关条件注释的更多详细信息，请参见http://www.quirksmode.org/css/condcom.html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.