Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
252 views
in Technique[技术] by (71.8m points)

javascript - 使用HTML按钮调用JavaScript函数(Using an HTML button to call a JavaScript function)

I am trying to use an HTML button to call a JavaScript function.(我正在尝试使用HTML按钮来调用JavaScript函数。)

Here's the code:(这是代码:) <input type="button" value="Capacity Chart" onclick="CapacityChart();"> It doesn't seem to work correctly though.(但它似乎无法正常工作。) Is there a better way to do this?(有一个更好的方法吗?) Here is the link: http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html click on the capacity tab in the bottom left section.(这是链接: http//projectpath.ideapeoplesite.com/bendel/toolscalculators.html点击左下方的容量选项卡。) The button should generate an alert if the values are not changed and should produce a chart if you enter values.(如果值未更改,则按钮应生成警报,如果输入值,则应生成图表。)   ask by fmz translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

There are a few ways to handle events with HTML/DOM.(有几种方法可以使用HTML / DOM处理事件。)

There's no real right or wrong way but different ways are useful in different situations.(没有真正的正确或错误的方式,但不同的方式在不同的情况下是有用的。) 1: There's defining it in the HTML:(1:在HTML中定义它:) <input id="clickMe" type="button" value="clickme" onclick="doFunction();" /> 2: There's adding it to the DOM property for the event in Javascript:(2:在Javascript中将事件添加到DOM属性中:) //- Using a function pointer: document.getElementById("clickMe").onclick = doFunction; //- Using an anonymous function: document.getElementById("clickMe").onclick = function () { alert('hello!'); }; 3: And there's attaching a function to the event handler using Javascript:(3:并且使用Javascript将事件附加到事件处理程序:) var el = document.getElementById("clickMe"); if (el.addEventListener) el.addEventListener("click", doFunction, false); else if (el.attachEvent) el.attachEvent('onclick', doFunction); Both the second and third methods allow for inline/anonymous functions and both must be declared after the element has been parsed from the document.(第二种和第三种方法都允许内联/匿名函数,并且必须在从文档中解析元素之后声明这两种函数。) The first method isn't valid XHTML because the onclick attribute isn't in the XHTML specification.(第一种方法不是有效的XHTML,因为onclick属性不在XHTML规范中。) The 1st and 2nd methods are mutually exclusive, meaning using one (the 2nd) will override the other (the 1st).(第1和第2种方法是互斥的,意味着使用一个(第二个)将覆盖另一个(第一个)。) The 3rd method will allow you to attach as many functions as you like to the same event handler, even if the 1st or 2nd method has been used too.(第3种方法允许您将同样多的函数附加到同一个事件处理程序,即使已经使用了第1或第2种方法。) Most likely, the problem lies somewhere in your CapacityChart() function.(最有可能的是,问题出在CapacityChart()函数中。) After visiting your link and running your script, the CapacityChart() function runs and the two popups are opened (one is closed as per the script).(访问链接并运行脚本后,运行CapacityChart()函数并打开两个弹出窗口(根据脚本关闭一个)。) Where you have the following line:(你有以下几行:) CapacityWindow.document.write(s); Try the following instead:(请尝试以下方法:) CapacityWindow.document.open("text/html"); CapacityWindow.document.write(s); CapacityWindow.document.close(); EDIT(编辑)
When I saw your code I thought you were writing it specifically for IE.(当我看到你的代码时,我以为你是专门为IE编写的。) As others have mentioned you will need to replace references to document.all with document.getElementById .(正如其他人所提到的,你需要用document.getElementById替换对document.all引用。) However, you will still have the task of fixing the script after this so I would recommend getting it working in at least IE first as any mistakes you make changing the code to work cross browser could cause even more confusion.(但是,在此之后您仍然需要修复脚本,所以我建议首先让它在IE中工作,因为任何错误都会导致更改代码以跨浏览器工作可能会导致更多混乱。) Once it's working in IE it will be easier to tell if it's working in other browsers whilst you're updating the code.(一旦它在IE中工作,当你更新代码时,更容易判断它是否在其他浏览器中工作。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...