JavaScriptのopenBDでISBNから検索をして書籍の情報を表示

<div class="isbnblock">
  <p class="isbncomment">ISBNを入力してください。</p>
  <input id="isbn" type="text" name="isbn" value="" autofocus> <button id="getBookInfo" class="btn btn-default">書籍情報を取得</button>
</div>
<div id="bookInfo">
  <div class="bookImageBlock">
    <div class="bookImageInner">
      <img src="" id="thumbnail">
    </div>
  </div>
  <p>書籍名：<span id="booktitle"></span></p>
  <p>出版社：<span id="publisher"></span></p>
  <p>巻：<span id="volume"></span></p>
  <p>シリーズ：<span id="series"></span></p>
  <p>作者：<span id="author"></span></p>
  <p>出版日：<span id="pubdate"></span></p>
  <p>詳細：<span id="description"></span></p>
</div>

document.getElementById('getBookInfo').addEventListener('click', () => {
  // isbnに入力された値を取得
  var userInput = document.getElementById('isbn').value;
  var query = userInput.split(' ').join('+');
  // APIを取得
  const url = "https://api.openbd.jp/v1/get?isbn=" + query + "&pretty";

// json
fetch(url).then(
  response => {
    return response.json();
  }).then(data => {
for (let i = 0; i < data.length; i++) {
  // サムネイル
  const bookImg = document.getElementById('thumbnail');
  const bookImgSrc = data[0].summary.cover;
  console.log(bookImgSrc);
  bookImg.setAttribute('src', bookImgSrc);
  //書籍名
  document.getElementById('booktitle').innerHTML = data[0].summary.title;
  //出版社
  document.getElementById('publisher').innerHTML = data[0].summary.publisher;
  //巻
  document.getElementById('volume').innerHTML = data[0].summary.volume;
  //シリーズ
  document.getElementById('series').innerHTML = data[0].summary.series;
  //作者
  document.getElementById('author').innerHTML = data[0].summary.author;
  //出版日
  document.getElementById('pubdate').innerHTML = data[0].summary.pubdate;
  //詳細
  document.getElementById('description').innerHTML = data[0].onix.CollateralDetail.TextContent[0].Text;
}
// 情報エリアの表示
  document.getElementById('bookInfo').classList.add('show');

}).catch(err => {
  console.log('Error: ' + err)
})

});

/* ISBNのブロック */
.isbnblock {
    display: block;
    text-align: center;
}
p.isbncomment {
    background: #eff1f5;
    text-align: center;
    color: #707070;
    padding: 7px 35px 8px;
    border-radius: 9999px;
    display: inline-block;
    margin: 0 0 25px;
    position: relative;
}
/* 下に三角 */
p.isbncomment:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #eff1f5;
    z-index: 1;
}
/* ISBNの入力フィールド */
input#isbn {
    border: solid 2px #707070;
    margin-bottom: 18px;
    text-align: center;
}
/* 検索実行前 */
div#bookInfo {
  display: none;
  overflow:hidden;
  opacity: 0;
  animation: show 0.6s linear 0s;
}
/* 検索実行後 */
div#bookInfo.show {
    height: auto;
    display: block;
    opacity: 1;
    margin-top: 30px;
    padding: 35px 35px 30px;
    background: #FFF;
    border-radius: 3px;
}
/* 以下から各情報 */
.bookImageBlock {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    border-bottom: dotted 2px #eee;
    padding-bottom: 30px;
    position: relative;
}
.bookImageInner {
    display: inline-block;
    margin: 0 auto;
    position: relative;
    box-shadow: -6px 6px 10px -2px #001b4440, 0 0 3px #8f9aaf1a;
    border-radius: 3px;
    transition: 0.3s ease-in-out;
}
.bookImageInner:after {
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    border-radius: 5px;
    background: linear-gradient(-90deg,#fff0,#ffffff1a 80%,#ffffff4d 95%,#fff6 96.5%,#cbcbcb14 98%,#6a6a6a1a);
    border-radius: 3px;
}
div#bookInfo p span {
    display: block;
    background: #fafafa;
    padding: 15px 30px;
    font-weight: 600;
}

/* ほんわり表示されるアニメーション */
@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}