JSONファイルからjavaScriptを使用してデータをロードしようとしています。星の形でhotel2show.ratingを表す必要があります。jsonを使わずにjsonファイルのデータを表示する純粋なJavaScript
ここにあります私JavaScriptが
function getHotels(i){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
hotel=JSON.parse(xhr.responseText);
var hotel2show = hotel.hotels[i];
document.getElementById("img-container").innerHTML =
"<img src='"+hotel2show.imgUrl+"'>"+
"<p id='name'><strong>"+ hotel2show.name +"</strong></p>" +"<br/>" + "<p id='rating'><strong>"+ hotel2show.rating +"</strong></p>" +"<br/>" + "<br/>" +"<p id='price'><strong>"+ '£' +hotel2show.price +
"</strong></p>" + "<p id='text'><strong>"+ 'Total hotel stay' +"</strong></p>";
} else {
alert("Ha existido un error con el servidor");
}
}
};
xhr.open("GET",'hotels.json', true);
xhr.send();
、ここでは私のhtml
<div class="container">
<div id="lista">
<ul>
<button onclick="getHotels(0)">Hotel Sunny Palms</button>
<button onclick="getHotels(1)">Hotel Snowy Mountains</button>
<button onclick="getHotels(2)">Hotel Windy Sails</button>
<button onclick="getHotels(3)">Hotel Middle Of Nowhere</button>
</ul>
</div>
<div class="banner-section" id="img-container">
</div>
と私のhotels.jsonある
"hotels": [
{
"name": "Hotel Sunny Palms",
"imgUrl": "imgs/sunny.jpg",
"rating": 5,
"price": 108.00
},
{
"name": "Hotel Snowy Mountains",
"imgUrl": "imgs/snowy.jpg",
"rating": 4,
"price": 120.00
},
{
"name": "Hotel Windy Sails",
"imgUrl": "imgs/windy.jpg",
"rating": 3,
"price": 110.00
},
{
"name": "Hotel Middle of Nowhere",
"imgUrl": "imgs/nowhere.jpg",
"rating": 4,
"price": 199.00
}
]
お手数ですが
* "jqueryなし!のみjavascript" * jQueryは単なるライブラリであり、言語ではありません。あなたはそれを使用するときにもJavaScriptを使用しています。 「jQuery(または別のライブラリ)がないと、「DOM APIを使用しています」という意味です。 –
私は知っていますが、jqueryではなく、ブートストラップではなく、ライブラリを使用するべきではありません。唯一のJavaScriptとCSS –
質問のタイトルに「JavaScriptのみ」という意味は無意味です –