blocks|key|1376710|text|我想说，最好是以一种不引人注目的方式添加javascript……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1376711|如果使用jQuery，您可以执行以下操作：|1376712|<script>
++$(document).ready(function(){
++++$('#MyButton').click(function(){
+++++++CapacityChart();
++++});
++});
</script>

<input+type="button"+value="Capacity+Chart"+id="MyButton"+>|code-block|syntax|javascript|1376713|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I would say it would be better to add the javascript in an un-obtrusive manner...

if using jQuery you could do something like:

<pre><code>&lt;script&gt;
 $(document).ready(function(){
 $('#MyButton').click(function(){
 CapacityChart();
 });
 });
&lt;/script&gt;

&lt;input type="button" value="Capacity Chart" id="MyButton" &gt;
</code></pre>

blocks|key|1376846|text|您的HTML和从按钮调用函数的方式看起来都是正确的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1376847|问题似乎出在CapacityCount函数中。在Firefox3.5的控制台中，我在bendelcorp.js的第759行得到了这个错误："document.all+is+undefined“。|offset|length|style|CODE|1376848|编辑：|1376849|看起来document.all是IE独有的东西，是一种访问DOM的非标准方式。如果你使用document.getElementById()，它应该可以工作。示例:用document.getElementById("RUnits").value代替document.all.Capacity.RUnits.value|1376850|entityMap^0|0|6|D|0|0|3|C|18|P|2A|13|3F|Y|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@$D|T|E|U|F|G]|$D|V|E|W|F|G]|$D|X|E|Y|F|G]|$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|M|$]]

Your HTML and the way you call the function from the button look correct.

The problem appears to be in the <code>CapacityCount</code> function. I'm getting this error in my console on Firefox 3.5: "document.all is undefined" on line 759 of bendelcorp.js.

Edit:

Looks like <code>document.all</code> is an IE-only thing and is a nonstandard way of accessing the DOM. If you use <code>document.getElementById()</code>, it should probably work. Example: <code>document.getElementById("RUnits").value</code> instead of <code>document.all.Capacity.RUnits.value</code>

blocks|key|1376740|text|这看起来是正确的。我猜你是用不同的名字或者在按钮不可见的上下文中定义了你的函数。请添加一些代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1376741|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

This looks correct. I guess you defined your function either with a different name or in a context which isn't visible to the button. Please add some code

blocks|key|1376786|text|你有一个主要的问题是，你使用浏览器嗅探没有很好的理由：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1376787|if(navigator.appName+==+'Netscape')
++++{
++++++vesdiameter++=+document.forms['Volume'].elements['VesDiameter'].value;
++++++//+more+stuff+snipped
++++}
++++else
++++{
++++++vesdiameter++=+eval(document.all.Volume.VesDiameter.value);
++++++//+more+stuff+snipped
++++}|code-block|syntax|javascript|1376788|我用的是Chrome，所以navigator.appName不会是Netscape。Chrome支持document.all吗？也许吧，但话又说回来，也许不是。那么其他浏览器呢？|offset|length|style|CODE|1376789|从1996年起，Netscape分支上的代码版本应该可以在任何浏览器上运行，直到1996年的Netscape+Navigator2，所以你应该坚持使用它……除非它不能工作(或者不能保证能工作)，因为您没有在input元素上指定name属性，所以它们不会作为命名元素添加到表单的elements数组中：|1376790|<input+type="text"+id="VesDiameter"+value="0"+size="10"+onKeyUp="CalcVolume();">|1376791|或者给它们一个名称并使用elements数组，或者(更好的)使用|1376792|var+vesdiameter+=+document.getElementById("VesDiameter").value;|1376793|它可以在所有现代浏览器上工作--不需要分支。为了安全起见，将对浏览器版本大于或等于4的嗅探替换为对getElementById支持的检查：|1376794|if+(document.getElementById)+{+//+NB:+no+brackets;+we're+testing+for+existence+of+the+method,+not+executing+it
++++//+do+stuff...
}|1376795|您可能还想验证您的输入；例如|1376796|var+vesdiameter+=+parseFloat(document.getElementById("VesDiameter").value);
if+(isNaN(vesdiameter))+{
++++alert("Diameter+should+be+numeric");
++++return;
}|1376797|会有帮助的。|1376798|entityMap^0|0|0|D|H|X|8|1E|C|0|8|8|2V|5|35|4|3U|8|0|0|C|8|0|0|1D|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|18|8|@$I|19|J|1A|K|L]|$I|1B|J|1C|K|L]|$I|1D|J|1E|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1F|8|@$I|1G|J|1H|K|L]|$I|1I|J|1J|K|L]|$I|1K|J|1L|K|L]|$I|1M|J|1N|K|L]]|9|@]|A|$]]|$1|O|3|P|5|D|7|1O|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|1P|8|@$I|1Q|J|1R|K|L]]|9|@]|A|$]]|$1|S|3|T|5|D|7|1S|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1T|8|@$I|1U|J|1V|K|L]]|9|@]|A|$]]|$1|W|3|X|5|D|7|1W|8|@]|9|@]|A|$E|F]]|$1|Y|3|Z|5|6|7|1X|8|@]|9|@]|A|$]]|$1|10|3|11|5|D|7|1Y|8|@]|9|@]|A|$E|F]]|$1|12|3|13|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|15|$]]

One major problem you have is that you're using browser sniffing for no good reason:

<pre><code>if(navigator.appName == 'Netscape')
 {
 vesdiameter = document.forms['Volume'].elements['VesDiameter'].value;
 // more stuff snipped
 }
 else
 {
 vesdiameter = eval(document.all.Volume.VesDiameter.value);
 // more stuff snipped
 }
</code></pre>

I'm on Chrome, so <code>navigator.appName</code> won't be <code>Netscape</code>. Does Chrome support <code>document.all</code>? Maybe, but then again maybe not. And what about other browsers?

The version of the code on the <code>Netscape</code> branch should work on any browser right the way back to Netscape Navigator 2 from 1996, so you should probably just stick with that... except that it won't work (or isn't guaranteed to work) because you haven't specified a <code>name</code> attribute on the <code>input</code> elements, so they won't be added to the form's <code>elements</code> array as named elements:

<pre><code>&lt;input type="text" id="VesDiameter" value="0" size="10" onKeyUp="CalcVolume();"&gt;
</code></pre>

Either give them a name and use the <code>elements</code> array, or (better) use

<pre><code>var vesdiameter = document.getElementById("VesDiameter").value;
</code></pre>

which will work on all modern browsers - no branching necessary. Just to be on the safe side, replace that sniffing for a browser version greater than or equal to 4 with a check for <code>getElementById</code> support:

<pre><code>if (document.getElementById) { // NB: no brackets; we're testing for existence of the method, not executing it
 // do stuff...
}
</code></pre>

You probably want to validate your input as well; something like

<pre><code>var vesdiameter = parseFloat(document.getElementById("VesDiameter").value);
if (isNaN(vesdiameter)) {
 alert("Diameter should be numeric");
 return;
}
</code></pre>

would help.

blocks|key|1161757|text|您的代码在以下行失败：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1161758|var+RUnits+=+Math.abs(document.all.Capacity.RUnits.value);|code-block|syntax|javascript|1161759|我试着用firebug遍历它，但失败了。这应该可以帮助您找出问题所在。|1161760|您引用了jquery。你也可以在所有这些函数中使用它。它将极大地清理你的代码。|1161761|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Your code is failing on this line: 

<pre><code>var RUnits = Math.abs(document.all.Capacity.RUnits.value);
</code></pre>

i tried stepping though it with firebug and it fails there. that should help you figure out the problem.

you have jquery referenced. you might as well use it in all these functions. it'll clean up your code significantly.

blocks|key|1161791|text|我有一个智能的函数回调按钮代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1161792| 
<p+id="demo"><h2>Intelligent+Button:</h2>Note:+Try+pressing+a+key+after+clicking. 
<button+id="button"+shiftKey="getElementById('button').innerHTML=('You're+pressing+shift,+aren't+you?')"+onscroll="getElementById('button').innerHTML=('Don't+Leave+me!')"+onkeydown="getElementById('button').innerHTML=('Why+are+you+pressing+keys?')"+onmouseout="getElementById('button').innerHTML=('Whatever,+it+is+gone..+maybe')"+onmouseover="getElementById('button').innerHTML=('Something+Is+Hovering+Over+Me..+again')"+onclick="getElementById('button').innerHTML=('I+was+clicked,+I+think')">Ahhhh</button>|code-block|syntax|javascript|1161793|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I have an intelligent function-call-backing button code:

<pre><code>&lt;br&gt;
&lt;p id="demo"&gt;&lt;/p&gt;&lt;h2&gt;Intelligent Button:&lt;/h2&gt;&lt;i&gt;Note: Try pressing a key after clicking.&lt;/i&gt;&lt;br&gt;
&lt;button id="button" shiftKey="getElementById('button').innerHTML=('You're pressing shift, aren't you?')" onscroll="getElementById('button').innerHTML=('Don't Leave me!')" onkeydown="getElementById('button').innerHTML=('Why are you pressing keys?')" onmouseout="getElementById('button').innerHTML=('Whatever, it is gone.. maybe')" onmouseover="getElementById('button').innerHTML=('Something Is Hovering Over Me.. again')" onclick="getElementById('button').innerHTML=('I was clicked, I think')"&gt;Ahhhh&lt;/button&gt;
</code></pre>

blocks|key|1377003|text|答案很简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1377004|+++onclick="functionName(ID.value);|code-block|syntax|javascript|1377005|其中ID是输入字段的ID。|1377006|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

SIMPLE ANSWER: 

<pre><code> onclick="functionName(ID.value);
</code></pre>

Where ID is the ID of the input field.

blocks|key|1161507|text|愚蠢的方式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1161508|onclick="javascript:CapacityChart();"|code-block|syntax|javascript|1161509|您应该阅读有关离散javascript的内容，并使用框架绑定方法将回调绑定到dom事件。|1161510|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

silly way:

<pre><code>onclick="javascript:CapacityChart();"
</code></pre>

You should read about discrete javascript, and use a frameworks bind method to bind callbacks to dom events.

I am trying to use an HTML button to call a JavaScript function.

Here's the code:

<pre><code>&lt;input type="button" value="Capacity Chart" onclick="CapacityChart();"&gt;
</code></pre>

It doesn't seem to work correctly though. Is there a better way to do this?

Here is the link:<a href="http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html" rel="noreferrer">http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html</a> click on the capacity tab in the bottom left section. The button should generate an alert if the values are not changed and should produce a chart if you enter values.

Using an HTML button to call a JavaScript function

jQuery

我正在尝试使用HTML键来调用JavaScript函数。代码如下：<input type="button" value="Capacity Chart" onclick="CapacityChart();">不过，它似乎不能正常工作。有没有更好的方法来做这件事？链接如下：单击左下角的capacity选项卡。如果值未更改，则该按钮应生成警报；如果您输入值，则该按钮应生成图表。

问使用HTML键调用JavaScript函数
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML键调用JavaScript函数EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML键调用JavaScript函数
EN