見出し画像

メモ帳(セレクト式)

セレクトボックスで選択できる

簡易的なメモ帳を作成しました。


HTMLコード

  <fieldset>
   <legend>好きな食べ物</legend>
   <select>
     <option>焼肉</option>
     <option>寿司</option>
     <option>てんぷら</option>
   </select>
 
   <button>追加</button>
 </fieldset>

 <ul>
 </ul>


JSコード

  document.querySelector('button').addEventListener('click', () => {
   const li = document.createElement("li");
   const eat = document.querySelector("select");
   li.textContent = eat.value;
   document.querySelector("ul").appendChild(li);
 });


選択したものが、下に追加されていきます!

無題



この記事が気に入ったらサポートをしてみませんか?