如何调用通过单击 HTML 按钮将文本输入只读文本框的函数？答案

【问题标题】：How do I call a function that enters text into a read-only text-box by clicking an HTML button?如何调用通过单击 HTML 按钮将文本输入只读文本框的函数？
【发布时间】：2012-11-13 11:06:54
【问题描述】：

我正在尝试编写一小段 html 代码，给定两个初始数量，尝试找到大于或等于第一个完全除第二个给定数量的数字。代码尝试对数字进行除法，如果不成功，将第一个数字加 1 并再次尝试除法，等等...

我希望代码返回完全除第二个数字的值和除法的答案（周围出现一些纯文本）。

添加到此，或者至少我希望有，是在单击 5 个不同按钮中的一个时，对第一个给定数字执行乘法运算，它被四舍五入到最接近的整数，然后该函数试图将其除以第二个给定的数字。

如果不向您展示我目前的代码，很难准确地解释我想要什么，所以这里是：

<html>

<head>

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

</head>

<script language="Javascript">

var currency;

function setCurrency(val) {
 var currency = val;
}

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="setCurrency('KWD')">
<input type="button" value="USD" OnClick="setCurrency('USD')">
<input type="button" value="GBP" OnClick="setCurrency('GBP')">
<input type="button" value="EUR" OnClick="setCurrency('EUR')">
<input type="button" value="CAD" OnClick="setCurrency('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="document.getElementById('showMeArea').value=finddivid(document.getElementById('mktprc'),document.getElementById('trdval')));">

<p>
<br><br>

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

</html>

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

我已经尝试了一段时间来让它工作，但我不知道是函数中的错误还是我试图将函数“finddivid”的“返回”到文本中的方式框'showMeArea'...

以下是我需要帮助的主要问题/功能：

我希望能够单击“货币”按钮之一，以便在单击时分配变量“货币”，然后在函数 finddivid 中使用。

(2. 这现在不那么重要，但最终，一旦它起作用，我希望它在单击其中一个货币按钮时改变颜色，或突出显示或其他东西，以便用户知道他们使用的货币汇率。）

在两个框中输入数字后，我想单击“计算”，然后让它将我在函数中编写的内容返回到代码末尾的“showMeArea”只读框中。

我知道我可能遗漏了很多东西，而且我可能距离成功还有很长的路要走，但我对编程很陌生（几天前才开始！）所以希望能提供任何形式的帮助。

提前感谢您的 cmets。

【问题讨论】：

HTML 需要修改，你有很多标签需要关闭，例如输入应该以 '/>' 结尾
@Naryl 严格来说，因为他们没有指定文档类型，所以你不能做出这样的假设。在 HTML 4.01 规范中，实际上禁止输入结束标记：w3.org/TR/REC-html40/interact/forms.html#h-17.4
嗯，非常真实，谢谢你的信息，我会记住这一点！

标签： javascript html button onclick getelementbyid

【解决方案1】：

您的标记和 javascript 有很多问题。您有未闭合的段落标签，您将货币的范围设置为全局，然后在您想要设置它时定义一个具有相同名称的局部变量（这就是为什么货币永远不会被全局设置），您使用的是 if/ else 语句在哪里更合适 switch/case ......可能还有很多，你学的越多，你就会发现的越多。说了这么多，因为它困扰了我，这是您的代码的修改版本，它似乎可以满足您的需求：

<html>
<head>

<title>Rounded Commodity Pricing</title>
<script type="text/javascript">

    var currency;
    function setCurrency(val) {
        currency = val;
    }

    function finddivid(marketprice, tradevalue) {
        var KWDex = 0.281955
        var GBPex = 0.625907
        var USDex = 1
        var CADex = 0.998727
        var EURex = 0.784594

        var currencyMarketprice;
        switch (currency) {
            case "KWD":
                currencyMarketprice = Math.ceil(marketprice * KWDex);
                break;
            case "GBP":
                currencyMarketprice = Math.ceil(marketprice * GBPex);
                break;
            case "USD":
                currencyMarketprice = Math.ceil(marketprice * USDex);
                break;
            case "CAD":
                currencyMarketprice = Math.ceil(marketprice * CADex);
                break;
            case "EUR":
                currencyMarketprice = Math.ceil(marketprice * EURex);
                break;

        }

        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");
            } 
        }
    }

    function calculate() {
        var mktprc = document.getElementById('mktprc');
        var trdval = document.getElementById('trdval');
        document.getElementById('showMeArea').value = finddivid(mktprc.value, trdval.value);
    }

</script>
</head>

<p>
    Select currency:
    <input type="button" value="KWD" onclick="setCurrency('KWD')">
    <input type="button" value="USD" onclick="setCurrency('USD')">
    <input type="button" value="GBP" onclick="setCurrency('GBP')">
    <input type="button" value="EUR" onclick="setCurrency('EUR')">
    <input type="button" value="CAD" onclick="setCurrency('CAD')">
</p>

<p>Enter today's price of commodity in USD: <input id="mktprc" input type="number"><p>
<p>Enter value of trade: <input id="trdval" input type="number"></p>
<p><input type="button" value="Calculate" OnClick="calculate();"></p>

<p>
    <input id="showMeArea" readonly="true" size="100">
</p>

</html>

【讨论】：

哇——非常感谢！真的很感动。这正是我对编写代码越来越感兴趣的原因。在我非常有限的阅读中，我还没有看到像 switch/case 这样的东西，所以不知道要使用它！这非常有帮助。再次感谢。