如何通过单击HTML按钮执行JavaScript函数?

时间:2012-11-09 13:29:24

标签: javascript html button variable-assignment

我正在尝试写一小段html代码,给定两个初始金额,试图找到大于或等于第一个完全除以第二个给定金额的数字。代码试图划分数字,如果不成功,则将第一个数字加1并尝试再次划分,等等......

我希望代码返回完全除以第二个数字的值和分区的答案(在它周围出现一些纯文本)。

除此之外,或者至少我想要的是,在点击5个不同按钮中的一个按钮时,对第一个给定的数字执行乘法运算,它被四舍五入到最接近的整数,然后是该函数试图将其分成第二个给定的数字。

如果不向您展示我到目前为止的代码,很难准确解释我想要的内容,所以这里是:


<html>

<head>

<b>Rounded Commodity Pricing:</b><br>

<script language="Javascript">

function finddivid(marketprice,tradevalue) { 

var KWDex = 0.281955
var GBPex = 0.625907
var USDex = 1
var CADex = 0.998727
var EURex = 0.784594

if 
  (currency == "KWD") 
  var currencyMarketprice = Math.ceil(marketprice*KWDex)
else if
  (currency == "GBP")
  var currencyMarketprice = Math.ceil(marketprice*GBPex)
else if 
  (currency == "USD") 
  var currencyMarketprice = Math.ceil(marketprice*USDex)
else if 
  (currency == "CAD") 
  var currencyMarketprice = Math.ceil(marketprice*CADex)
else if 
  (currency == "EUR") 
  var currencyMarketprice = Math.ceil(marketprice*EURex)


if (tradevalue % currencyMarketprice == 0)
  return ("tonnage = " + tradevalue / currencyMarketprice + " mt, and price = " + currencyMarketprice +" " +currency +" per mt");
else
  {for (var counter = currencyMarketprice+1; counter<(currencyMarketprice*2); counter++) {
   if (tradevalue % counter == 0)
     return ("tonnage = " + tradevalue / counter + " mt, and price = " + counter +" " +currency +" per mt");}}};

</script>

</head>

<p>Select currency:
<input type="button" value="KWD" OnClick="var currency = KWD">
<input type="button" value="USD" OnClick="var currency = USD">
<input type="button" value="GBP" OnClick="var currency = GBP">
<input type="button" value="EUR" OnClick="var currency = EUR">
<input type="button" value="CAD" OnClick="var currency = CAD">

<P>Enter today's price of commodity in USD: <input name="mktprc" input type="number"><br><p>
<P>Enter value of trade: <input name="trdval" input type="number">

<input type="button" value="Calculate" OnClick="showMeArea.value=finddivid(mktprc,trdval);">

<p>
<br><br>

<input name="showMeArea" readonly="true" size="30">

</html>

如果您在浏览器中运行此html,您应该看到我想要实现的目标。

这还远未完成,但以下是我需要帮助的主要问题/功能:

  1. 我希望能够点击其中一个“货币”按钮,以便在点击时分配变量“货币”,然后在函数finddivid中使用。
  2. (2。现在这并不重要,但最终,一旦这个工作,我会喜欢它,以便点击其中一个货币按钮,它会改变颜色,或突出显示或某些东西,以便用户知道他们正在使用哪种货币汇率。)

    1. 将数字输入两个框后,我想点击'Calculate'并将其在函数中写入的内容返回到代码末尾的'showMeArea'只读框中。
    2. 我知道我可能会遗漏很多东西而且我可能距离成功还有几英里但我对编程非常陌生(4天前开始!)所以我希望能提供任何类似的帮助。

      先感谢您的意见。

1 个答案:

答案 0 :(得分:3)

第一个请求要求您将货币放入实际脚本中,我建议使用setter函数:

<script language="Javascript">

var currency;   // you might want to set this at a default just in case

function setCurrency(val) { currency = val; }    // Setter function

function finddivid(marketprice,tradevalue) { 

然后在按钮点击中调用它:

<input type="button" value="KWD" onClick="setCurrency('KWD');">

至于第二个请求,我会说你的概念已经足够好了,但你没有完全正确的方法。首先,您的输入需要一个id属性:

<input name="mktprc" id="mktprc" input type="number">
<input name="trdval" id="trdval" input type="number">

name属性用于发布值,javascript使用id属性查找页面中的元素。使用jQuery可以轻松地检索这些元素,但我将同时展示jQuery和标准的JavaScript方法:

jQuery的:

<input type="button" value="Calculate" OnClick="$('#showMeArea').val(finddivid($('#mktprc'),$(#'trdval')));">

$('#id')选择一个元素。方法.val()设置值 关于jQuery纯粹主义者的注意事项:是的,有更好/更复杂的方法可以通过jQuery实现这一点,但这个答案针对的是我对OP的JavaScript功能的看法。

标准Javascript:

<input type="button" value="Calculate" OnClick="document.getElementById('showMeArea').value = finddivid(document.getElementById('mktprc'),document.getElementById('trdval'));">