代码的目标是从数组中获取用户输入的国家/地区，即 Item[4]，将国家/地区附加到 url，然后使用请求从该 url 获取图像。我假设我需要使用 img src 在我的网站上显示图像。我做错了什么吗？我什么也没看到。另外，我正在尝试使用 javascript 来完成此任务。谢谢！API： https: //www.countryflags.iopersonInfo.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Person Information Page </title> <style> h2{ text-align: center; } label { display: inline-block; width: 150px; text-align: left; } </style> </head> <body> <p style="text-decoration: underline;"><a href=http://127.0.0.1:5000/> Back to home </a></p> <h2 id="displayName" ></h2> <div class="block"> <label>Born on: </label> <p id="birthdate"></p> </div> <div class="block"> <label>Born in the country: </label> <p id="country"></p> </div> <div class="block"> <label>Some facts about country: </label> <img id="countryFlag" src = country_flag; /> </div> </body> </html>
1 回答
慕桂英3389331
TA贡献2036条经验 获得超8个赞
试试这个：
personInfo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Person Information Page </title>
<style>
h2{
text-align: center;
}
label {
display: inline-block;
width: 150px;
text-align: left;
}
</style>
</head>
<body>
<p style="text-decoration: underline;"><a href=http://127.0.0.1:5000/> Back to home </a></p>
<h2 id="displayName" ></h2>
<div class="block">
<label>Born on: </label>
<p id="birthdate"></p>
</div>
<div class="block">
<label>Born in the country: </label>
<p id="country"></p>
</div>
<div class="block">
<label>Some facts about country: </label>
<img id="countryFlag" src = country_flag; />
</div>
<script>
var personInfoList = JSON.parse(sessionStorage.getItem("newList1"));
for(let item of personInfoList) {
document.getElementById("displayName").innerHTML = item[0] + " " + item[1];
document.getElementById("birthdate").innerHTML = item[2];
document.getElementById("country").innerHTML = item[3];
country_flag = `https://www.countryflags.io/${item[3]}/shiny/64.png`;
document.getElementById("countryFlag").src = country_flag;
}
</script>
</body>
</html>
添加名称.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Add Name Page </title>
<style>
body {
text-align: center;
}
form {
position:relative;
top:20px;
display: inline-block;
}
label {
display: inline-block;
width: 150px;
text-align: left;
}
p {
position: relative;
top: -43px;
left: 410px;
}
</style>
{% extends "navigation.html" %}
{% block content %}
</head>
<body>
<form action="home.html" >
<div class="block">
<label>First name: </label>
<input type='text' input name='firstname' id='firstname'>
</div>
<div class="block">
<label>Last name: </label>
<input type='text' input name='lastname' id='lastname'>
</div>
<div class="block">
<label>Birthday: </label>
<input type='text' input name='birthday' id='birthday' placeholder="mm/dd/yyyy">
</div>
<div class="block">
<label>Country of Origin: </label>
<input type='text' input name='countryOfOrigin' id='countryOfOrigin'>
</div>
<p>
<input type="button" id="add" value="Submit" onclick= "passVal(); window.location.href = '/';">
</p>
</form>
<script>
function passVal() {
var prevValue = localStorage.getItem("newList1");
var newList = []
if(prevValue) {
newList = JSON.parse(prevValue);
}
var newFirstName = document.getElementById("firstname").value;
var newLastName = document.getElementById("lastname").value;
var newBirthday = document.getElementById("birthday").value;
var newCOO = document.getElementById("countryOfOrigin").value;
newList.push([newFirstName, newLastName, newBirthday, newCOO]);
sessionStorage.setItem("newList1", JSON.stringify(newList)); }
</script>
</body>
{% endblock %}
在 add_name.html 中，我更改了“var newList;” 到“var newList = []”。
在 personInfo.html 中，不需要获取图像，只需将图像路径分配给 src 即可。
- 1 回答
- 0 关注
- 34 浏览
添加回答
举报
0/150
提交
取消