获取输入以运行程序并在网页上显示输出

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

这是一个有效的例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我做了一些改动让它发挥作用。

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

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

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

希望这有帮助！

Answer 2

我想补充一些N.Ivanov的回应。您输入的命令 getElementsByName 错误。 其次，最好使用 getElementById ，因为在同一页面上可以有多个同名的表单。第三个也是最后一个问题是你调用了onclick事件，该事件使用其中的参数调用js函数，因此js无法使用这些参数进行调用。

另外，如果您不熟悉脚本语言，我会推荐jQuery。

e.g。在jQuery中获取输入字段的值：

var value = $('#a').val();