0
私はのユーザーが国を検索でき、その国の都市がページに表示されるサイトを作っています。私は今、各国ごとに1つの都市を表示することができますが、2つ以上の都市がある場合は、都市の1つだけが表示されます。私は、ページに表示されるいくつかのカードを作成するために "+ ="を試しました。それは私のためにいくつかの問題を作り出しました。私は、DOM内の新しいdivに各市のカードを追加するために "appendChild（）"関数を使用しなければならないと思っています。しかし、私は100％このコードを使って、それを行う方法を確信していません。ページに印刷されたいくつかのJSONオブジェクトを取得する
検索フィールドに「USA」と入力した場合、アメリカではLAとNYが都市として表示されます。最初のものが表示されますが、私は両方を表示します。私はdocument.createElement（ 'cityCard'）を使って試してみたところ、カードが表示されているコンテナにcityCardを追加しました。しかし、私が望むように動作させることはできませんでした。文法上の間違いがあったかもしれません。
これはこのタスクのリジッドマインドですか？それとも良い方法ですか？
CSSは気にしないでください。
すべてのコードがどこにあるかにリンクします。
https://jsfiddle.net/uzfb852g/12/
aswellの下のコード（フィドルのようにその同じ）
HTMLコードを追加：
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Martel:400,700,900"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>FINN DITT FERIESTED!</h1>
<form id="inputForm">
<input type="text" id="sokFelt">
<button id="btn">Search</button>
<button id="allBtn">Alle steder</button>
</form>
<div id="break"></div>
<div id="searchWord"></div>
<div id="cardContainer">
<div id="cityCards">
<h2 id="country"></h2>
<h4 id="city"></h4>
<img id="cityImg">
</div>
</div>
<button id="btnTwo"></button>
<script src="content.js"></script>
</body>
</html>
CSSコード：
body{
margin: auto;
width: 100%;
height: 100%;
}
h1{
text-align: center;
margin: 25px;
color: tomato;
font-family: 'Martel', serif;
text-shadow: 1px 2px #333;
font-weight: 900;
}
#inputForm{
text-align: center;
margin: 25px;
}
#break{
width: 80%;
margin: auto;
height: 1px;
text-align: center;
background-color: #333;
}
#btn{
padding: 5px 15px;
}
#sokFelt{
padding: 5px 15px;
}
#searchWord{
font-size: 24px;
margin: 40px;
color: #333;
font-weight: bold;
}
#cardContainer{
width: 100%;
margin: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
#cityCards{
padding: 12px 22px;
background-color: aqua;
border-radius: 5px;
width: 20%;
height: 250px;
}
#cityImg{
width: 100%;
height: 200px;
}
#allBtn{
padding: 5px 15px;
}
JSコード：
var form = document.getElementById('inputForm');
var input = form.querySelector('input');
var country = document.getElementById("country");
var city = document.getElementById("city");
var cityImg = document.getElementById("cityImg");
var searchWord = document.getElementById("searchWord");
/*IMAGES*/
var place = [
{land: 'Norge', by: 'Oslo', img: 'img/Oslo.jpg'},
{land: 'USA', by: 'Los Angeles', img: "img/LA.jpg"},
{land: 'USA', by: 'New York', img: "img/NewYork.jpg"},
{land: 'Tyskland', by: 'Berlin', img: 'img/berlin.jpg'},
{land: 'Frankrike', by: 'Paris', img:'img/berlin.jpg'}
];
form.addEventListener('submit', (e) => {
e.preventDefault();
for(var i = 0; i < place.length; i += 1){
if(input.value === place[i].land) {
searchWord.innerHTML = input.value;
document.createElement('cityCards');
country.innerHTML = place[i].land;
city.innerHTML = place[i].by;
cityImg.src = place[i].img;
}
}
});
document.getElementById("btnTwo").addEventListener("click", function(){
document.createElement("")
});
感謝 –