javascript - API返回的信息在CodePen上出现1秒后消失。为什么？

Question

您应该输入 11362 这样的邮政编码，并在城市名称下找到“Little Neck”。 “Little Neck”在 CodePen 窗口中短暂出现，然后消失。为什么？

我认为我没有在代码中进行任何中间操作。但我不知何故输入了错误的 API url。我不知道。信息就在那里。请求成功，部分成功。

My project.

代码:

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

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