[英]HTML/Javascript: Trigger 2 different action from 1 button
How can we trigger 2 action from 1 button? 我们如何通过1个按钮触发2个动作? How do we make a button/or links which can go/scroll to element "#result" and trigger the function "calculateThis" (proceed data from a form) 我们如何制作一个按钮/一个链接,该按钮可以/滚动到元素“ #result”并触发函数“ calculateThis”(从表单中获取数据)
How do I mix the these into 1 button/link? 如何将这些混合到1个按钮/链接中?
<a href="#result">Submit</a>
and 和
<button class="button" onclick="calculateThis(this.form); return false;">Submit</button>
// UPDATED Here is the complete code //更新这是完整的代码
<script type="text/javascript">
function calculateThis(form) {
var userweight=parseInt(form.weight.value, 10);
var caffeineamount=parseInt(form.caffein.value, 10);
var caffeinetimes=parseInt(form.caffeintimes.value, 10);
var totalcaffeine=caffeineamount*caffeinetimes;
console.log(totalcaffeine)
// Calculate max caffeine per person
var maxcaffeine=userweight*10;
// Calculate remaining after 24 hours
// Half life = 6 hours
var totalcaffeineafter=totalcaffeine*(1/16);
// Calculating how many hours until the caffeine completely digested
var totaldigest=totalcaffeine;
var digesttime=0;
while (totaldigest>0.05) {
totaldigest=totaldigest*(1/2);
digesttime++;
}
digesttime=digesttime*6;
// Calculating when the user will probably die of overdose
var countcaffeine=0;
var overdosetime=1;
while (countcaffeine<maxcaffeine){
countcaffeine=countcaffeine+totalcaffeine;
overdosetime++;
}
// Show total amount of caffeine
document.getElementById("showtotalkafein").innerHTML=totalcaffeine;
// Show amount of caffeine after 1 day
document.getElementById("showtotalkafeinsetelah").innerHTML=totalcaffeineafter;
// Show digest time
document.getElementById("showwaktudigest").innerHTML=digesttime;
// Show overdose
document.getElementById("showberapakali").innerHTML=overdosetime;
return false;
}
</script>
<form class="form">
Weight<br />
<input type="text" name="weight" class="required" value="" /><p />
Amount of caffein in coffee<br />
<input type="text" name="caffein" class="required" value="" /><p />
How many times drinking coffeein a day<br />
<input type="text" name="caffeintimes" class="required" value="" /><p />
<a href="#result" onClick="calculateThis(this.form); return false;">Submit</a>
</form>
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<h1 id="result">Result</h1>
<p id="showtotalkafein">Show Caffein Total Here</p>
<p id="showtotalkafeinsetelah">Show Caffeine Amount After 24 hours</p>
<p id="showwaktudigest">Show Digest Time Here</p>
<p id="showberapakali">Show Overdose Time Here</p>
You should be able to do the same as in the button, ie 您应该能够执行与按钮中相同的操作,即
<a href="#result" onClick="calculateThis(this.form); return false;">Submit</a>
Doesn't this work? 这不行吗?
JaggenSWE's answer is almost there, but don't return false since this suppresses default behaviour, which is to follow the link. JaggenSWE的答案几乎存在,但不要返回false,因为这会抑制默认行为,即遵循链接。
<a href="#result" onClick="calculateThis(this.form);">Submit</a>
I wouldn't advise using inline event handlers though. 我不建议使用内联事件处理程序。
Edit 编辑
This works. 这可行。 http://jsbin.com/uwatab/3/ http://jsbin.com/uwatab/3/
Its always preferable to attach an onsubmit handler to a form, rather than button onclick. 将onsubmit处理程序附加到表单而不是按钮onclick总是比较可取的。 This way, pressing enter in your form still executes your javascript. 这样,在表单中按Enter键仍会执行JavaScript。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.