模写コーディングで詰まったこと

HTML/CSS JavaScript

前書き

neat02です。
模写コーディングで、個人的に気になった点について執筆出来ればと思います。

環境

VSCode

リンクの制約

HTMLを書いていると必ず出てくるのがリンクです。リンクは基本、url だったり、画像を載せる際にパスを記載する際に使います。 今回とある予約フォームを模写しました。 私が実装したのは、カレンダーの日時をボタンで選択すると、

  1. 予約フォームに日時が自動で入力
  2. フォームの欄まで、スクロール

という2つです。　　 しかし、リンクは1つまでしか挿入できないため、以下のように書くとエラーになります。

      #例
      <a.href=#  ,a href="./sample.html#book_time"></a>

そのため、JavaScriptでスクロールを実装しました。

  function buttonClick() {
    target = document.getElementById("booktime");
    target.innerHTML = "2023-06-12 10:00";
    target.style.color = "#333";
    window.scrollBy({
    top: window.innerHeight,
    behavior: 'smooth'
    });
    return false;
}

こうすることで、ボタンを押した際にフォーム欄に時間が入力され、フォームまでスクロールすることができました。 まだ知識が定着していないので、書籍やMdnで学習していきます！！