无法在javascript中将值设置为文本框

Question

I have below code where i am calling yahoo api servicecall and putting those value in text box. 我在下面的代码中调用yahoo api servicecall并将这些值放在文本框中。 But i am not able to put fetched value in textbox. 但是我无法将获取的值放在文本框中。 Below is my code 下面是我的代码

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<form name="converter">
<table border="0">
<tr>
<td><p class= "text_color">INR:</p> </td><td><input type="text" name="euro" onChange="euroConverter()" /></td>
</tr>
<tr>
<td><p class= "text_color">US Dollar: </p></td><td><input type="text" name="dollar" onChange="dollarConverter()" /></td>
</tr>
<tr>
<td colspan="4" align="center"><input type="button" value="Convert!" /></td>
</tr>
</table>
</form>
<script language="JavaScript">
  function getRate(from, to) {
    var script = document.createElement('script');
    script.setAttribute('src', "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D"+from+to+"%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json&callback=parseExchangeRate");
    document.body.appendChild(script);
  }

  function parseExchangeRate(data) {
    var name = data.query.results.row.name;
    var rate = parseFloat(data.query.results.row.rate, 10);
  }

function euroConverter(){
document.getElementsByName('dollar').value = document.getElementsByName('euro').value * getRate("INR", "USD");
}
</script>

</body>
</html>

In above code i wont get any error but i am not able to put fetched value in textbox.I know i am missing some basic thing.Any help on this. 在上面的代码中，我不会收到任何错误，但我无法将获取的值放在文本框中。我知道我缺少一些基本的东西。对此有任何帮助。

Answer 1

here's an extremely simple (and simplistic) rewrite of two of your functions 这是对两个函数的极其简单（且简化）的重写

function parseExchangeRate(data) {
    var name = data.query.results.row.name;
    var rate = parseFloat(data.query.results.row.rate, 10);
    document.getElementsByName('dollar').value = document.getElementsByName('euro').value * rate;
}

function euroConverter() {
    getRate("INR", "USD");
}

This should now work, with no change to getRate required 现在应该可以正常工作，无需更改getRate

I say it's simplistic, because you should be able to "cache" the result and not have to call for the exchange rate on every change, but you should get the idea of how to deal with such asynchronous JSONP data with this minimal change 我说这很简单，因为您应该能够“缓存”结果，而不必每次更改都要求汇率，但是您应该了解如何用这种最小的更改来处理此类异步JSONP数据

Answer 2

This is not going to return a single element, it will return an array with one element. 这不会返回单个元素，它将返回一个包含一个元素的数组。

document.getElementsByName('dollar')

You can however grab the first element 但是，您可以抓住第一个要素

var dollarTextbox = document.getElementsByName('dollar')[0];

Now that you have the textbox you can put the value you want on it 现在您有了文本框，可以在其中输入所需的值

dollarTextbox.value = '0';

The Yahoo api is going to call your function parseExchangeRate it is inside this function that you need to assign the value Yahoo api将调用您的函数parseExchangeRate它位于该函数内部，您需要为其分配值

function parseExchangeRate(data) {
  var name = data.query.results.row.name;
  var rate = parseFloat(data.query.results.row.rate, 10);

  var dollarTextbox = document.getElementsByName('dollar')[0];
  var euroTextbox = document.getElementsByName('euro')[0];

  dollarTextbox.value = euroTextbox.value * rate;
}

Answer 3

You can use ajax calls to fetch the date from the yahoo servers. 您可以使用ajax调用从yahoo服务器获取日期。

  function getRate(from, to, callback) { var url = "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D" + from + to + "%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json" callAjax(url, callback); } function parseExchangeRate(data) { var name = data.query.results.row.name; var rate = parseFloat(data.query.results.row.rate, 10); } function callAjax(url, callback) { var xmlhttp; // compatible with IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { callback(xmlhttp.responseText); } } xmlhttp.open("GET", url, true); xmlhttp.send(); } function euroConverter() { getRate("INR", "USD", function(data) { var dataObj = JSON.parse(data); var name = dataObj.query.results.row.name; var rate = parseFloat(dataObj.query.results.row.rate, 10); document.getElementsByName('dollar')[0].value = document.getElementsByName('euro')[0].value * rate; }); } function dollarConverter() { getRate("USD", "INR", function(data) { var dataObj = JSON.parse(data); var name = dataObj.query.results.row.name; var rate = parseFloat(dataObj.query.results.row.rate, 10); document.getElementsByName('euro')[0].value = document.getElementsByName('dollar')[0].value * rate; }); }

  <p id="demo"></p> <form name="converter"> <table border="0"> <tr> <td> <p class="text_color">INR:</p> </td> <td> <input type="text" name="euro" onChange="euroConverter()" /> </td> </tr> <tr> <td> <p class="text_color">US Dollar: </p> </td> <td> <input type="text" name="dollar" onChange="dollarConverter()" /> </td> </tr> <tr> <td colspan="4" align="center"> <input type="button" value="Convert!" /> </td> </tr> </table> </form>

无法在javascript中将值设置为文本框

问题描述

3 个解决方案

解决方案1
0 2017-01-08 13:18:37

解决方案2
0 2017-01-08 13:20:21

解决方案3
0 2017-01-08 13:37:33

无法在javascript中将值设置为文本框

问题描述

3 个解决方案

解决方案1 0 2017-01-08 13:18:37

解决方案2 0 2017-01-08 13:20:21

解决方案3 0 2017-01-08 13:37:33

解决方案1
0 2017-01-08 13:18:37

解决方案2
0 2017-01-08 13:20:21

解决方案3
0 2017-01-08 13:37:33