javascript - 如何从选择器到 json 文档进行选择？-6ren

javascript - 如何从选择器到 json 文档进行选择？

转载作者：行者123 更新时间：2023-12-02 21:12:16

如何才能在下拉菜单中选择一个国家/地区并获取该国家/地区的数据？国家/地区代码:

Netherlands 169

Germany 120

France 116

Spain 225

Italy 137

Russia 187

South-Korea 143

USA 201

(在获取函数中，荷兰的国家代码为 169，德国等国家代码应为 120)

window.onload = function() {
	getCovidStats();
}

function getCovidStats() {
	fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/169')
	.then(function(resp) { return resp.json() })
	.then(function(data) {
		let population = data.location.country_population;
		let update = data.location.last_updated;
		let confirmedCases = data.location.latest.confirmed;
		let deaths = data.location.latest.deaths;

		document.getElementById('population').innerHTML = population.toLocaleString('en');
		document.getElementById('update').innerHTML = update.substr(0, 10);
		document.getElementById('cases').innerHTML = confirmedCases.toLocaleString('en');
		document.getElementById('deaths').innerHTML = deaths.toLocaleString('en');
		document.getElementById('percent').innerHTML = ((Number(deaths)/Number(confirmedCases))*100).toLocaleString("en", {minimumFractionDigits: 2, maximumFractionDigits: 2}) + "%";




	})
	.catch(function() {
		console.log("error");
	})
	setTimeout(getCovidStats, 43200000) // update every 12 hours
}

* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	width: 100%;
}
h1, h2 {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	text-align: center;
	padding-bottom: 20px;
	font-size: 250%;
}

.title {
	background: linear-gradient(to right, #feb47b, #ff7e5f);
	padding: 20px;
}

.subtitle {
	padding: 20px;
	font-size: 150%;
}

div {
	padding: 20px;
}

.stats-container {
	text-align: center;
	float: right;
	display: inline-block;
}
.location-container {
	display: inline-block;
}
.data-container {
	border: 2px solid #feb47b;
	margin-right: 30%;
	margin-left: 30%;

}
h4 {
	font-size: 85%;
 	color: gray;
 	font-family: 'Roboto', sans-serif;
 	font-weight: 300;
 	text-align: center;
 	padding-top: 20px;
 	padding-left: 20px;
 	padding-right: 20px;
 	padding-bottom: 5px;
}
.footer {
	font-family: 'Roboto', sans-serif;
	bottom: 0;
	font-size: 75%;
	padding: 5px;
}

<!DOCTYPE html>
<html>
<head>
	<title>Name</title>

	<link rel="shortcut icon" href="masker-emoji.png">
	<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script type="text/javascript" src="app.js"></script>

</head>
<body>
	<h1 class="title">Coronavirus Stats.</h1>
	<h2 class="subtitle">Subtitle</h2>
	<div class="data-container">
		<div class="stats-container">
			<h4>Tested positive</h4>
			<h1 id="cases"></h1>
			<h4>Deaths</h4>
			<h1 id="deaths"></h1>
			<h4>Death percentage</h4>
			<h1 id="percent"></h1>
		</div>
		<div class="location-container">
			<h4>Land</h4>
			<h1 id="country"><label for="Country">Country:</label>
				<select id="cars">
				  <option value="Netherlands">Netherlands</option>
				  <option value="Germany">Germany</option>
				  <option value="France">France</option>
				  <option value="Spain">Spain</option>
				  <option value="Italy">Italy</option>
				  <option value="Russia">Russia</option>
				  <option value="South-Korea">South-Korea</option>
				  <option value="USA">USA</option>
				</select></h1>
			<h4>Population</h4>
			<h1 id="population"></h1>
			<h4>Last update on</h4>
			<h1 id="update"></h1>
		</div>
	</div>
	<h1 class="footer">Footer</h1>
</body>
</html>

最佳答案

像这样

在选择时使用 addEventListener 并将值更改为数字。

我添加了“请选择”

并将 ID 从 cars 更改为 <select id="countrySel">

window.addEventListener("load",function() {
  document.getElementById("countrySel").addEventListener("change",getCovidStats);
  document.getElementById("countrySel").value="169";
  getCovidStats()
})

function getCovidStats() {
  const cc = document.getElementById("countrySel").value;
  if (cc==="") return;
  
  fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/'+cc)
    .then(function(resp) {
      return resp.json()
    })
    .then(function(data) {
      let population = data.location.country_population;
      let update = data.location.last_updated;
      let confirmedCases = data.location.latest.confirmed;
      let deaths = data.location.latest.deaths;

      document.getElementById('population').innerHTML = population.toLocaleString('en');
      document.getElementById('update').innerHTML = update.substr(0, 10);
      document.getElementById('cases').innerHTML = confirmedCases.toLocaleString('en');
      document.getElementById('deaths').innerHTML = deaths.toLocaleString('en');
      document.getElementById('percent').innerHTML = ((Number(deaths) / Number(confirmedCases)) * 100).toLocaleString("en", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }) + "%";
    })
    .catch(function() {
      console.log("error");
    })
    setInterval(getCovidStats, 43200000) // update every 12 hours
}

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
}

h1,
h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  text-align: center;
  padding-bottom: 20px;
  font-size: 250%;
}

.title {
  background: linear-gradient(to right, #feb47b, #ff7e5f);
  padding: 20px;
}

.subtitle {
  padding: 20px;
  font-size: 150%;
}

div {
  padding: 20px;
}

.stats-container {
  text-align: center;
  float: right;
  display: inline-block;
}

.location-container {
  display: inline-block;
}

.data-container {
  border: 2px solid #feb47b;
  margin-right: 30%;
  margin-left: 30%;
}

h4 {
  font-size: 85%;
  color: gray;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  text-align: center;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 5px;
}

.footer {
  font-family: 'Roboto', sans-serif;
  bottom: 0;
  font-size: 75%;
  padding: 5px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Name</title>

  <link rel="shortcut icon" href="masker-emoji.png">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script type="text/javascript" src="app.js"></script>

</head>

<body>
  <h1 class="title">Coronavirus Stats.</h1>
  <h2 class="subtitle">Subtitle</h2>
  <div class="data-container">
    <div class="stats-container">
      <h4>Tested positive</h4>
      <h1 id="cases"></h1>
      <h4>Deaths</h4>
      <h1 id="deaths"></h1>
      <h4>Death percentage</h4>
      <h1 id="percent"></h1>
    </div>
    <div class="location-container">
      <h4>Country</h4>
      <h1 id="country"><label for="countrySel">Country:</label>
        <select id="countrySel">
          <option value="">Please select</option>
          <option value="169">Netherlands</option>
          <option value="120">Germany</option>
          <option value="116">France</option>
          <option value="225">Spain</option>
          <option value="137">Italy</option>
          <option value="187">Russia</option>
          <option value="143">South-Korea</option>
          <option value="201">USA</option>
        </select>
      </h1>
      <h4>Population</h4>
      <h1 id="population"></h1>
      <h4>Last update on</h4>
      <h1 id="update"></h1>
    </div>
  </div>
  <h1 class="footer">Footer</h1>
</body>

</html>

关于javascript - 如何从选择器到 json 文档进行选择？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61058618/

文章推荐： javascript - 根据不匹配某些值返回 JSON

文章推荐： javascript - ListFooterComponent 无法正常工作？

C# Dll注入(inject)器，VB.Net Dll注入(inject)器
我之前让 dll 注入(inject)器变得简单，但我有 Windows 7，我用 C# 和 C++ 做了它，它工作得很好!但是现在当我在 Windows 8 中尝试相同的代码时，它似乎没有以正确的方
javascript - Polymer 1.0 尝试制作一种类似于核心 split 器的 split 器，可以称为铁 split 器
我正在尝试制作一个名为 core-splitter 的元素，该元素在 1.0 中已弃用，因为它在我们的项目中起着关键作用。如果您不知道 core-splitter 的作用，我可以提供一个简短的描述。
scrapy - 在scrapy的同一进程中运行多个蜘蛛后如何停止 react 器？
我有几个不同的蜘蛛，想一次运行所有它们。基于 this和 this ，我可以在同一个进程中运行多个蜘蛛。但是，我不知道如何设计一个信号系统来在所有蜘蛛都完成后停止 react 器。我试过了: cra
twisted - 在某个条件下停止扭曲 react 器
有没有办法在达到特定条件时停止扭曲 react 器。例如，如果一个变量被设置为某个值，那么 react 器应该停止吗？最佳答案理想情况下，您不会将变量设置为一个值并停止 react 器，而是调用
javascript - 我如何定义我的应用程序的注入(inject)器
https://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.js 上面的链接定义了外部js文件，我不知道Angular-1.0.0rc9.js的注入(in
angularjs - 如何为我的应用程序检索注入(inject)器？
我正在尝试运行一个函数并将服务注入(inject)其中。我认为这可以使用 $injector 轻松完成.所以我尝试了以下(简化示例): angular.injector().invoke( [ "$q
gwt - 使用多个抽象模块实例化一个注入(inject)器
在 google Guice 中，我可以使用函数 createInjector 创建基于多个模块的注入(inject)器。因为我使用 GWT.create 在 GoogleGin 中实例化注入(in
c# - 属性的自定义配置绑定(bind)器
我在 ASP.NET Core 1.1 解决方案中使用配置绑定(bind)。基本上，我在“ConfigureServices Startup”部分中有一些用于绑定(bind)的简单代码，如下所示: s
java - Spring初始化绑定(bind)器
我在 Spring MVC 中设置 initBinder 时遇到一些问题。我有一个 ModelAttribute，它有一个有时会显示的字段。 public class Model { privat
jquery post表单数据和MVC模型绑定(bind)器
我正在尝试通过jquery post发布knockoutjs View 模型 var $form = $('#barcodeTemplate form'); var data = ko.toJS(vm
c# - 具有多态对象集合的复杂模型的自定义模型绑定(bind)器
如何为包含多态对象集合的复杂模型编写自定义模型绑定(bind)程序？我有下一个模型结构: public class CustomAttributeValueViewModel { publi
c# - 使用多个构造函数注册开放泛型的简单注入(inject)器
您好，我正在尝试实现我在 this article 中找到的扩展方法对于简单的注入(inject)器，因为它不支持开箱即用的特定构造函数的注册。根据这篇文章，我需要用一个假的委托(delegate)
c# - 注册动态类型的简单注入(inject)器
你好，我想自动注册我的依赖项。我现在拥有的是: public interface IRepository where T : class public interface IFolderReposi
javascript - 带有位置服务的angularjs注入(inject)器
我正在使用 Jasmine 测试一些 Angular.js 代码。为此，我需要一个 Angular 注入(inject)器: var injector = angular.injector(['ng'
C 代码 reshape 器
我正在使用 Matlab 代码生成器。不可能包含代码风格指南。这就是为什么我正在寻找一个工具来“ reshape ”、重命名和重新格式化生成的代码，根据我的: 功能横幅约定文件横幅约定命名约定等
c++ - 与模板模板类一起使用的自定义模板参数绑定(bind)器
这个问题在这里已经有了答案: Where and why do I have to put the "template" and "typename" keywords? (8 个答案) 关闭 8
c++ - 开源dll注入(inject)器
我开发了一种工具，可以更改某些程序的外观。为此，我需要在某些进程中注入(inject)一个 dll。现在我基本上使用这个 approach .问题通常是人们无法注入(inject) dll，因为他们
java - 是否有使用方面和注释的数据绑定(bind)器？
我想使用 swing、spring 和 hibernate 编写一个 java 应用程序。我想使用数据绑定(bind)器用 bean 的值填充 gui，并且我还希望它反射(reflect) gui
python - 当两个蜘蛛都完成时如何停止 react 器
我有这段代码，当两个蜘蛛完成后，程序仍在运行。 #!C:\Python27\python.exe from twisted.internet import reactor from scrapy.cr
java - 我如何才能限定我不使用的 Autowiring 器 "own"
要点是 Spring Batch (v2) 测试框架具有带有 @Autowired 注释的 JobLauncherTestUtils.setJob。我们的测试套件有多个 Job 类提供者。因为这个类不

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何从选择器到 json 文档进行选择？