Question

我正在研究货币换算器，这是一个学校项目，我已经完成作业并完成了工作。

<HTML>

  <HEAD>
    <TITLE>Currency Converter Protype1</TITLE>
  </HEAD>

  <BODY>

    <SECTION>
      <P>Enter Amount:
        <INPUT type="number" ID="Val" list="CommonVal">
        <Datalist ID="CommonVal">
			    <option value=1>1</option>
				<option value=10>10</option>
				<option value=100>100</option>
				<option value=500>500</option>	
			</Datalist>
        <Select id="Select">
				<Option Value=1 name=1 >AUS</Option>
        <Option Value=82 name="Japanese Yen">Yen</Option>
				<Option Value=5 name="Chinese Yaun">Yaun</Option>
				<Option Value=10000 name="Indonesian Rupiah">Rupiah</Option>
			</Select>
        <Button ID="Submit" onclick="Process()">Click Me</Button>
      </P>
    </SECTION>

    <SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
      function Process() { // Module 2
        var val = document.getElementById("Val").value;
        var Select = document.getElementById("Select").value * 1;
        var country = ["Australia", "Japanese Yen", "Chinese Yuan", "Indonesian Rupiah"];
        var rate = [1, 82, 5, 100000];
        var text = "";
        
        var i;
        for (i = 0; i < country.length; i++) {
           text += country[i] + ": $ " + (((val*1)/Select)*rate[i]).toFixed(2) + "<br>";
          }
          document.getElementById("Country1").innerHTML = text;

        }
        //(val/select)*() "Australia", "Japanese Yen", "Chinese Yen", "Indonesian Rupiah"

    </SCRIPT>
    <p id="Country1"></p>

  </BODY>

</HTML>

而且我已经提前完成了，但是我想做得更好。因此，我想到了更多的工作。现在，我希望我的代码接受一个输入框的值，并在另一个输入框显示它。但是问题是我无法设置输入常量。例如，将country1设置为某个数值。但是我不知道该怎么做。

<HTML>

<HEAD>
  <TITLE>Currency Converter Protype1</TITLE>
</HEAD>

<BODY>

  <SECTION>
    <P>Enter Amount:<br> Australia:
      <INPUT type="number" name="country1" ID="Val" list="CommonVal" oninput="Process()"><br> Japanese Yen:
      <INPUT type="number" name="country2" ID="Val" list="CommonVal" oninput="Process()"><br> Chinese Yaun:
      <INPUT type="number" name="country3" ID="Val" list="CommonVal" oninput="Process()"><br> Indonesian Rupiah:
      <INPUT type="number" name="country4" ID="Val" list="CommonVal" oninput="Process()"><br>
      <Datalist ID="CommonVal">
			    <option value=1>1</option>
				<option value=10>10</option>
				<option value=100>100</option>
				<option value=500>500</option>	
		</Datalist>
    </P>
  </SECTION>

  <SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
    var

    function Process() { // Module 2
      var val = document.getElementById("Val").value;
      var Select = document.getElementById("Select").value * 1;
      var country = {
        "Australia": 1,
        "Japanese Yen": 82,
        "Chinese Yuan": 5,
        "Indonesian Rupiah": 10000
      };
      var text = "";
      var i;
      var b;

      for (var i in country) {
        text += i + ": " + (((val * 1) / Select) * country[i]).toFixed(2) + "<br />";
      }
      document.getElementById("Country1").innerHTML = text


    }
  </SCRIPT>
  <p id="Country1"></p>

</BODY>

</HTML>

输入国家或地区中的任何值时，结果应显示这些值。有人告诉我要在输入框中打印出一个值，document.getElementById（）。value =…;可以使用。

Answer 1

更新的HTML消除了重复的ID属性

<SECTION>
    <P>Enter Amount:<br> Australia:
        <INPUT type="number" name="country1" ID="country1" list="CommonVal" oninput="Process()"><br> Japanese Yen:
        <INPUT type="number" name="country2" ID="country2" list="CommonVal" oninput="Process()"><br> Chinese Yaun:
        <INPUT type="number" name="country3" ID="country3" list="CommonVal" oninput="Process()"><br> Indonesian Rupiah:
        <INPUT type="number" name="country4" ID="country4" list="CommonVal" oninput="Process()"><br>
        <Datalist ID="CommonVal">
            <option value=1>1</option>
            <option value=10>10</option>
            <option value=100>100</option>
            <option value=500>500</option>  
        </Datalist>
    </P>
    <div id="Country1"></div>
</SECTION>

我没有研究您要进行的计算。因此，您可能需要对此进行调整。

我什至没有尝试选择datalist元素，因为我认为不需要从中获取值。输入元素使用数据列表中的值来填充输入元素的值。

我使用event.value来获取所使用的输入元素的值。然后，我清除所有其他输入，以便用户可以清楚地看到他们选择的货币值。然后，我调整了计算循环，以使用输入元素中的值和分配给国家/地区的值。这样，当您从输入中选择一个值时，div元素将显示计算出的值。

function Process() {
        var val = event.target.value; // get the current input's value
       // clear out all the other input elements
        document.querySelectorAll('input').forEach(function(input, index){
            input.value = '';
        });
       // reassign the value to the input so the user can see what they selected
        event.target.value = val;
        var country = {
            "Australia": 1,
            "Japanese Yen": 82,
            "Chinese Yuan": 5,
            "Indonesian Rupiah": 10000
        };
        var text = "";
        var i;
        var b;
        for (var i in country) {
            // just multiply the selected value times the value for the country 
            text += i + ": " + (val * country[i]).toFixed(2) + "<br />";
        }
        // display the results in a div element on the page
        document.getElementById("Country1").innerHTML = text
    }

[更新-将计算值分配给输入]

在输入中显示计算出的货币值的一种方法是将每个国家/地区的输入ID更改为可以在Process函数中轻松查询的值。

var country = {
            "Australia": 1,
            "Japanese Yen": 82,
            "Chinese Yuan": 5,
            "Indonesian Rupiah": 10000
        };

我使用上面对象中的值手动配置了这些ID。

<SECTION>
    <P>Enter Amount:<br> Australia:
        <INPUT type="number" name="country1" ID="country1" list="CommonVal" onkeyup="Process();"><br> Japanese Yen:
        <INPUT type="number" name="country2" ID="country82" list="CommonVal" onkeyup="Process();"><br> Chinese Yaun:
        <INPUT type="number" name="country3" ID="country5" list="CommonVal" onkeyup="Process();"><br> Indonesian Rupiah:
        <INPUT type="number" name="country4" ID="country10000" list="CommonVal" onkeyup="Process();"><br>
        <Datalist ID="CommonVal">
            <option value=1>1</option>
            <option value=10>10</option>
            <option value=100>100</option>
            <option value=500>500</option>  
        </Datalist>
    </P>
    <div id="Country1"></div>
</SECTION>

现在，当其中之一更改时，我将更新Process函数以使用这些新ID更新输入值。注意，我还必须忽略Delete键。否则，用户将无法清除该字段并选择其他值。您可能想要研究一种更优雅的解决方案，但这在本示例中已完成。

请务必注意，无论您从哪个输入中选择一个值，当前的计算都好像是从“澳大利亚”输入框中选择的一样。我没有做出任何努力来纠正此问题，因为这样做的目的是帮助您了解如何将值分配给此示例希望完成的输入。

function Process() {
        var keyCode = event.which ? event.which : event.keyCode;
        if (typeof(keyCode) !== undefined) {
            if (keyCode==8) { // ignore delete key
                return false;
            }
        }
        var val = event.target.value;
        var country = {
            "Australia": 1,
            "Japanese Yen": 82,
            "Chinese Yuan": 5,
            "Indonesian Rupiah": 10000
        };
        var text = "";
        var i;
        var b;
        for (var i in country) {
            var currency = (val * country[i]).toFixed(2);
            // select the input by it's ID, I used the country object to build the selector
            var input = document.querySelector('#country' + country[i]);
            input.value = currency; // assign the calculated value to the input
        }
    }

进行两个输入时如何处理函数，以及如何为输入设置常量

1 个答案: