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

时间:2017-01-08 12:54:49

标签: javascript

我有以下代码,我在调用yahoo api servicecall并将这些值放在文本框中。但我无法在文本框中输入值。以下是我的代码

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

在上面的代码中我不会得到任何错误,但我无法在文本框中输入值。我知道我遗漏了一些基本的东西。对此有任何帮助。

3 个答案:

答案 0 :(得分:0)

这是一个非常简单(和简单)的两个函数重写

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

现在应该可以使用,而不需要更改getRate

我说这很简单,因为你应该能够“缓存”结果,而不必在每次更改时调用汇率,但是你应该知道如何用这个最小的处理这种异步JSONP数据变化

答案 1 :(得分:0)

这不会返回单个元素,它将返回一个包含一个元素的数组。

document.getElementsByName('dollar')

然而,你可以抓住第一个元素

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

现在你有了文本框,你可以把你想要的值放在它上面

dollarTextbox.value = '0';

雅虎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;
}

答案 2 :(得分:0)

您可以使用ajax调用从yahoo服务器获取日期。

&#13;
&#13;
    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;
      });
    }
&#13;
 <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>
&#13;
&#13;
&#13;