Question

你应该输入像11362这样的拉链，并获得“Little Neck”＃39;根据城市名称。＆＃39; Little Neck＆＃39;在CodePen窗口出现一个充满希望的时刻并消失。为什么呢？

我想我没有在我的代码中做任何事。但我以某种方式键入API网址错误。我不知道。信息就在那里。请求是成功的，部分是成功的。

代码：

＆＃13;

var button=document.getElementById('submit');
var zipcode;

/*takes what the user enters*/
button.addEventListener('click',getValue);
function getValue(){
  zipcode=document.getElementById('zipcode').value;
  getCity();
}
//API request to Google Geocode 
function getCity(){
  var req=new XMLHttpRequest;
  req.onreadystatechange=function(){
    if(this.readyState==4&&this.status==200){
      var myData=JSON.parse(this.responseText);
      var myCity=myData.results[0].address_components[1].short_name;
      document.getElementById('city').innerHTML=myCity;
    }//if function end
  }//onreadystate function end
  req.open('GET','https://maps.googleapis.com/maps/api/geocode/json?address='+zipcode, true);
  req.send();
}

＆＃13;

<form>
  <input type=text placeholder='zipcode' id='zipcode'></input>
  <input type='submit' id='submit'></input>
</form>

<ol>
  <li>City Name: <span id='city'></span></li><br>
  
  <li>Temperature(C/F): <span id='temp'></span></li>
  <li>Icon: <span id='icon'></span></li>
  <li>Weather: <span id='weather'></span></li><br>
  <li>Wind: <span id='wind'></span></li>
  <li>Sunrise: <span id='sunrise'></span></li> 
  <li>Weather: <span id='sunset'></span></li>
</ol>

＆＃13;

编辑：在这里，您点击提交，它会变为空白。

Answer 1

表单提交正在尝试向表单操作发出请求，在这种情况下，没有操作，因此表单只会重新加载页面。

这就是它消失的原因

您需要添加：

e.preventDefault();

在单击事件侦听器中，您必须阻止默认行为才能执行侦听器中的代码。

function getValue(e){
  e.preventDefault();
  zipcode=document.getElementById('zipcode').value;
  getCity();
}

var button=document.getElementById('submit');
var zipcode;

/*takes what the user enters*/
button.addEventListener('click',getValue);
function getValue(event){
event.preventDefault();
  zipcode=document.getElementById('zipcode').value;
  getCity();
}
//API request to Google Geocode 
function getCity(){
  var req=new XMLHttpRequest;
  req.onreadystatechange=function(){
    if(this.readyState==4&&this.status==200){
      var myData=JSON.parse(this.responseText);
      var myCity=myData.results[0].address_components[1].short_name;
      document.getElementById('city').innerHTML=myCity;
    }//if function end
  }//onreadystate function end
  req.open('GET','https://maps.googleapis.com/maps/api/geocode/json?address='+zipcode, true);
  req.send();
}

<form>
  <input type=text placeholder='zipcode' id='zipcode'></input>
  <input type='submit' id='submit'></input>
</form>

<ol>
  <li>City Name: <span id='city'></span></li><br>
  
  <li>Temperature(C/F): <span id='temp'></span></li>
  <li>Icon: <span id='icon'></span></li>
  <li>Weather: <span id='weather'></span></li><br>
  <li>Wind: <span id='wind'></span></li>
  <li>Sunrise: <span id='sunrise'></span></li> 
  <li>Weather: <span id='sunset'></span></li>
</ol>

Answer 2

阻止提交按钮的默认行为

function getValue(e){
  e.preventDefault();
  zipcode=document.getElementById('zipcode').value;
  getCity();
}

<强> P.S。

button.addEventListener('click',getValue);此处，getValue是button事件click被触发时调用的函数的引用（引用不应采用params;把它想象成函数声明的指针）。 button为click后，会将事件对象默认传递给您的点击处理程序getValue。定义此函数时，您可以访问事件对象作为参数。您可以为其指定任何别名，但最常见的是e和event

function getValue(yourEventAlias) {...}然后如果您想阻止提交按钮的默认行为，请将yourEventAlias.preventDefault();添加到您的函数正文中。

API返回信息在CodePen上显示1秒后消失。为什么？

2 个答案: