<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>3-11_object</title>
<link href="../../_common/images/favicon.ico" rel="shortcut icon">
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
<link href="../../_common/css/style.css" rel="stylesheet">
<style>
table {
border-collapse: collapse;
}
td {
padding: 4px 8px;
border: 1px solid #23628f;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>アイテムの価格と在庫を表示する</h1>
<h2>HTMLに出力する</h2>
</div><!-- /.container -->
</header>
<main>
<div class="container">
<section>
<table>
<tr>
<td id="title"></td>
<td id="price"></td>
<td id="stock"></td>
</tr>
</table>
</section>
</div><!-- /.container -->
</main>
<footer>
<div class="container">
<p>JavaScript Samples</p>
</div><!-- /.container -->
</footer>
<script>
'use strict';
let jsbook = {title:'JavaScript入門', price:2500, stock:3};
document.getElementById('title').textContent = jsbook.title;
document.getElementById('price').textContent = jsbook.price + '円';
document.getElementById('stock').textContent = jsbook.stock;
</script>
</body>
</html>
KAOKA Daisuke