获取输入值并将其与 JavaScript 的变量一起使用答案

【问题标题】：Get input value and use it with variable with JavaScript获取输入值并将其与 JavaScript 的变量一起使用
【发布时间】：2016-02-03 19:14:33
【问题描述】：

我有一个 id="to" 为空的输入字段，当用户输入内容并按下提交时，它应该更改下面脚本中的位置属性。但是，什么都没有发生。

oldvalue = document.getElementById("to").value;
var newvalue;
var inputBox = document.getElementById("to");
inputBox.onchange = function(){
    newvalue = document.getElementById("to").value;
    oldvalue = newvalue;
};

$(document).ready(function() {
  $.simpleWeather({
    location: oldvalue,
    unit: 'c',
    success: function(weather) {
      html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';
      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});

HTML 输入

<div class="input-group add-on">
<input type="text" class="form-control" placeholder="to: " id="to">                
<button id='tobtn' class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>               
</div>

【问题讨论】：

提交后页面是否重新加载？
为什么你认为它应该改变位置？在onchange 之后不会调用该函数。您只需设置一个新的oldvalue。
@mpavlovic89 因此页面重新加载，您的页面重置为初始状态。难怪什么都没发生。
我不确定我是否在关注你。我知道有问题，但我看不到解决方案。
有没有办法让它这样工作？我的意思是，类似的方式？

标签： javascript jquery input weather-api

【解决方案1】：

你可以试试这样的：

JavaScript：

oldvalue = document.getElementById("to").value;
var newvalue;
var inputBox = document.getElementById("to");
inputBox.onchange = function(){
    newvalue = document.getElementById("to").value;
    oldvalue = newvalue;
};

var loadWeather = function(location) {
    $.simpleWeather({
       location: location,
       unit: 'c',
       success: function(weather) {
           html = '<h2><i class="icon-'+weather.code+'"></i>  '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
           html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
           html += '<li class="currently">'+weather.currently+'</li>';
           $("#weather").html(html);
       },
       error: function(error) {
           $("#weather").html('<p>'+error+'</p>');
       }
   });
}

var refreshWeather = function(){
    loadWeather(oldvalue);
}

$(document).ready(function() {
   loadWeather(oldvalue);
});

HTML：

<div class="input-group add-on">
    <input type="text" class="form-control" placeholder="to: " id="to">                
    <button id='tobtn' class="btn btn-default" type="button" onclick="refreshWeather();"><i class="glyphicon glyphicon-search"></i></button>               
</div>

我将提交按钮更改为普通按钮，因为我认为在此示例中您不需要调用服务器。

【讨论】：

【解决方案2】：

我相信您的问题是您的 HTML 按钮设置为键入“提交”。当用户按下按钮而不是向服务器端组件提交数据时，您似乎想要在客户端（使用 JavaScript）做事情。

尝试将类型设置为“按钮”。将单击事件绑定到按钮并在事件处理程序中调用 $.simpleWeather。这应该可以解决您的问题。

编辑：要将 javascript 绑定到您的按钮，您可以做的一件事是：

<button onclick="refreshWeather()">Submit</button>

然后只需将您的 $.simpleWeather 代码放入该名称的函数中

【讨论】：