javascript - 接受输入来运行程序并在网页上显示输出

Question

我想从网页获取输入以在 js 上运行函数并将其显示回网页。由于某种原因，如果我从网页获取输入，则该函数不会执行/发布，但如果我在 js 代码本身中给出值，则显示效果很好。请帮忙。

输出未按预期输出。我希望“国家/地区名称”和“费率检查”字段成为我的函数的值，并将结果显示在费率标签之后

HTML

<form>
    Country Name: <input type="text" name="A"> <br>
    Rate Check: &nbsp; &nbsp; &nbsp;    <input type="text" name="B"> <br>
    Rate : <label id="Rate"> </label> <br>
</form> <br>
<button onclick="LookUp(CountryName, prop)">Generate Rate</button>

Javascript

//设置

var CountrySet = [
    {
        "CountryName" : "Egypt",
        "ExchangeRate" : "25",
        "PrimRate" : "8.5",
        "SecRate" : "3.9",
        "TertRate" : "10.1"
    },
    {
        "CountryName" : "Finland",
        "ExchangeRate" : "45",
        "PrimRate" : "3",
        "SecRate" : "10.7",
        "TertRate" : "7.5"
    },
    {
        "CountryName" : "China",
        "ExchangeRate" : "35",
        "PrimRate" : "3.4",
        "SecRate" : "9.2",
        "TertRate" : "9.6"
    },
    {
        "CountryName" : "Germany",
        "ExchangeRate" : "30",
        "PrimRate" : "4.3",
        "SecRate" : "8.3",
        "TertRate" : "11.6"
    },
    {
        "CountryName" : "Afghanistan",
        "ExchangeRate" : "40",
        "PrimRate" : "5.6",
        "SecRate" : "5.3",
        "TertRate" : "10.5"
    },
    {
        "CountryName" : "UK",
        "ExchangeRate" : "55",
        "PrimRate" : "6.7",
        "SecRate" : "4.7",
        "TertRate" : "8.2"
    },
    {
        "CountryName" : "Russia",
        "ExchangeRate" : "50",
        "PrimRate" : "9.8",
        "SecRate" : "3.1",
        "TertRate" : "6.2"
    },
];
CountryName = document.getElementByName('A').value
prop = document.getElementByName('B').value

function LookUp(CountryName, prop) {
    for(var i = 0; i < CountrySet.length; i++){
        if (CountrySet[i].CountryName === CountryName) {
            if(CountrySet[i].hasOwnProperty(prop)) {
                var ans = CountrySet[i][prop];
                document.getElementById("Rate").innerHTML = ans;

            }
            else {
                document.getElementById("Rate").innerHTML ="No Such Property";
            }
        }
    }

}

Answer 1

这是一个工作示例:

var CountrySet = [{
    "CountryName": "Egypt",
    "ExchangeRate": "25",
    "PrimRate": "8.5",
    "SecRate": "3.9",
    "TertRate": "10.1"
  },
  {
    "CountryName": "Finland",
    "ExchangeRate": "45",
    "PrimRate": "3",
    "SecRate": "10.7",
    "TertRate": "7.5"
  },
  {
    "CountryName": "China",
    "ExchangeRate": "35",
    "PrimRate": "3.4",
    "SecRate": "9.2",
    "TertRate": "9.6"
  },
  {
    "CountryName": "Germany",
    "ExchangeRate": "30",
    "PrimRate": "4.3",
    "SecRate": "8.3",
    "TertRate": "11.6"
  },
  {
    "CountryName": "Afghanistan",
    "ExchangeRate": "40",
    "PrimRate": "5.6",
    "SecRate": "5.3",
    "TertRate": "10.5"
  },
  {
    "CountryName": "UK",
    "ExchangeRate": "55",
    "PrimRate": "6.7",
    "SecRate": "4.7",
    "TertRate": "8.2"
  },
  {
    "CountryName": "Russia",
    "ExchangeRate": "50",
    "PrimRate": "9.8",
    "SecRate": "3.1",
    "TertRate": "6.2"
  },
];


function LookUp() {
  CountryName = document.getElementById('A').value;
  prop = document.getElementById('B').value;
  for (var i = 0; i < CountrySet.length; i++) {
    if (CountrySet[i].CountryName === CountryName) {
      if (CountrySet[i].hasOwnProperty(prop)) {
        var ans = CountrySet[i][prop];
        document.getElementById("Rate").innerHTML = ans;

      } else {
        document.getElementById("Rate").innerHTML = "No Such Property";
      }
    }
  }
}

<form>
  Country Name: <input type="text" id="A"> <br> Rate Check: &nbsp; &nbsp; &nbsp; <input type="text" id="B"> <br> Rate : <label id="Rate"> </label> <br>
</form> <br>
<button onclick="LookUp()">Generate Rate</button>

我做了一些更改才能使其正常工作。

第一个更改是将 document.getElementByName 更改为 getElementById 并向文本字段添加 ID。

第二是删除函数的参数，因为您使用它们的方式不正确

第三步是移动函数中的实际变量，以便您可以在用户提交表单后获取它们

希望这有帮助!