2012-06-09 258 views
0

如何从1个按钮触发2个动作?我们如何制作一个按钮/或链接,它可以/滚动到元素“#result”并触发函数“calculateThis”(从表单继续数据)HTML/Javascript:从1个按钮触发2个不同动作

如何将这些按钮组合成1按钮/链接?

<a href="#result">Submit</a> 

<button class="button" onclick="calculateThis(this.form); return false;">Submit</button> 

//修订 下面是完整的代码

<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 />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<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> 

回答

1

你应该能够做同样的类似按钮,即

<a href="#result" onClick="calculateThis(this.form); return false;">Submit</a> 

这不工作?

+0

它确实让我们去了元素#result,但它没有处理函数“calculateThis”:( – vinc

+0

删除了'return false;' – robertc

0

JaggenSWE的答案几乎存在,但不会返回false,因为这会抑制链接后的默认行为。

<a href="#result" onClick="calculateThis(this.form);">Submit</a> 

虽然我不会建议使用内联事件处理程序。

编辑

这工作。 http://jsbin.com/uwatab/3/

总是希望将onsubmit处理程序附加到表单上,而不是按钮onclick。通过这种方式,在表单中按回车仍然会执行您的JavaScript。

+0

它确实让我们去了元素#result,但它并没有处理函数“calculateThis”:( – vinc

+0

在javascript控制台中的任何错误? – ddlshack

+0

不,它没有说有任何错误瓦特/ javascript:/ – vinc