How do I execute a JavaScript function from clicking an HTML button? - Stack Overflow

I am trying to write a short piece of html code that, given two initial amounts, attempts to find the n

I am trying to write a short piece of html code that, given two initial amounts, attempts to find the number greater than or equal to the first that wholly divides the second given amount. The code tries to divide the numbers, and if it is unsuccessful, adds 1 to the first number and tries to divide again, etc...

I want the code to return the value that does wholly divide the second number AND the answer to the division (with some plain text appearing around it).

Added to this, or at least I'd like there to be, is that upon clicking one of 5 different buttons a multiplication operation is performed on the first given number, it is rounded up to the nearest whole number, and THEN the function attempts to divide this into the second given number.

It's difficult to explain exactly what I want without showing you the code I have so far, so here it is:


<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 modity 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>

If you run this html in your browser you should see what I am trying to achieve.

It is far from plete but here are the main problems/features that I need help with:

  1. I would like to be able to click on one of the 'currency' buttons so that upon clicking, the variable 'currency' is assigned and then used in the function finddivid.

(2. This isn't as important right now, but eventually, once this is working, I'd like it so that upon clicking one of the currency buttons, it changes colour, or is highlighted or something so that the user knows which currency rate they are using.)

  1. Upon entering the numbers into the two boxes I would like to click 'Calculate' and have it return what I've written in the function into the 'showMeArea' read-only box at the end of the code.

I know I'm probably missing loads of stuff and I might be miles away from success but I am very new to programming (started 4 days ago!) so would like any like of help that can be offered.

Thanks in advance of your ments.

I am trying to write a short piece of html code that, given two initial amounts, attempts to find the number greater than or equal to the first that wholly divides the second given amount. The code tries to divide the numbers, and if it is unsuccessful, adds 1 to the first number and tries to divide again, etc...

I want the code to return the value that does wholly divide the second number AND the answer to the division (with some plain text appearing around it).

Added to this, or at least I'd like there to be, is that upon clicking one of 5 different buttons a multiplication operation is performed on the first given number, it is rounded up to the nearest whole number, and THEN the function attempts to divide this into the second given number.

It's difficult to explain exactly what I want without showing you the code I have so far, so here it is:


<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 modity 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>

If you run this html in your browser you should see what I am trying to achieve.

It is far from plete but here are the main problems/features that I need help with:

  1. I would like to be able to click on one of the 'currency' buttons so that upon clicking, the variable 'currency' is assigned and then used in the function finddivid.

(2. This isn't as important right now, but eventually, once this is working, I'd like it so that upon clicking one of the currency buttons, it changes colour, or is highlighted or something so that the user knows which currency rate they are using.)

  1. Upon entering the numbers into the two boxes I would like to click 'Calculate' and have it return what I've written in the function into the 'showMeArea' read-only box at the end of the code.

I know I'm probably missing loads of stuff and I might be miles away from success but I am very new to programming (started 4 days ago!) so would like any like of help that can be offered.

Thanks in advance of your ments.

Share Improve this question edited Nov 9, 2012 at 13:35 user1812259 asked Nov 9, 2012 at 13:29 user1812259user1812259 411 silver badge5 bronze badges 4
  • there is no such thing like "html code" – Marcin Orlowski Commented Nov 9, 2012 at 13:36
  • @WebnetMobile. Sure there is. What do you mean? – Šime Vidas Commented Nov 9, 2012 at 13:43
  • this is markup, not code – Marcin Orlowski Commented Nov 9, 2012 at 13:45
  • 2 @WebnetMobile. Markup is code, too. – Šime Vidas Commented Nov 9, 2012 at 13:56
Add a ment  | 

1 Answer 1

Reset to default 3

The first request requires that you put the currency into the actual script, and I would remend using a setter function:

<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) { 

Then call it in your button click:

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

As for the second request, I'd say you have the concept down well enough, but you don't have the method exactly right. First your inputs will need an id attribute:

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

The name attribute is used for posting values, the id attribute is used by javascript to find elements within a page. Using jQuery would make retrieving these elements easy, but I'll show both the jQuery and the standard JavaScript method of doing this:

jQuery:

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

The $('#id') selects an element. The method .val() sets the value.
Note for the jQuery purists: Yes, there are much better/sophisticated ways to acplish this with jQuery, but this answer is targeted to my perception of OP's JavaScript capability.

Standard Javascript:

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

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745135125a4613162.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信