1
他のフィールドの中でもアーティスト名をHTMLページ内に表示しようとしています。投稿されたコードからわかるように、画像はすでにページに表示されているため、問題の原因がわかりません。JSONレコードをHTMLに挿入
window.addEventListener("load", function() {
document.getElementById('searchform').addEventListener('submit', search);
})
//load V&A museum objects
function search(evt) {
evt.preventDefault();
var query = document.getElementById('query').value.trim();
var url = "http://www.vam.ac.uk/api/json/museumobject/search?images=1&q=" + encodeURIComponent(query);
console.log(url);
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var i, item, img_id, img_url, img, artist,
target = document.getElementById("result"),
json = JSON.parse(xhr.responseText);
console.log(json);
for (i = 0; i < json.records.length; i++) {
item = json.records[i];
console.log("artist = " + item.fields.artist);
img_id = item.fields.primary_image_id;
img_url = "http://media.vam.ac.uk/media/thira/collection_images/" +
img_id.substr(0, 6) +
"/" +
img_id +
"_jpg_o.jpg";
img = document.createElement("img");
img.setAttribute("src", img_url,);
target.appendChild(img);
artist = item.fields.artist;
artist = document.createElement("h1");
artist.setAttribute("h1", artist);
artist = document.createElement("br");
target.appendChild(artist);
}
}
});
xhr.open('GET', url, true); //true for asynchronous
xhr.send();
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="va.css">
<title>Victoria & Albert Museum API TEST</title>
<script src="va.js"></script>
</head>
<body>
<!--<button id="button">Search</button>
<br><br>
<h1>Museum Objects</h1>
<div id="objects"></div>-->
<form id="searchform" class="form">
<input type="text" id="query">
<input type="submit" id="button">
</form>
<div id="result" class="objects">
<!-- <div id="artists"><h1>Artists</h1></div> -->
</div>
</body>
</html>結果は、アーティスト名が続きVAのAPIから引かれている画像です。イメージは表示されますが、アーティストはコンソールにのみ印刷されます。
あなたは "artist"を上書きし続け、最後にはブレーク要素です。 – McLemore
上記のコメントに沿って、おそらく 'artist = 'ではなく' artist + = 'を探しているでしょう。 '+ ='を使用すると、変数に上書きするのではなく、変数に追加されます。 –
私はアーティストを+ =推奨に変更しようとしましたが、まだ何も得られません。私はなぜ「複雑な」画像コードが機能するのか分かりませんが、基本的なテキストは理解できません。 – Mattaeos