JS~クリックゲーム~

7802 ワード
dom操作 JavaScript プログラミング JavaScript テキストリンク

概要

①初期

上記の画像をゲーム開始とします。

②ゲーム開始

②のようにボタンを押すと、OKが出てくるゲームを作成しました。

なお、1回目のクリックののときにリストが削除するよう実装しました。

①タイトル

1,HTML

index.html
  <div class=header>
    <h1 class="title">ToDo!!</h1>
  </div>

2,CSS

style.css
.title {
  padding-left:60px ;
  cursor: pointer;
 }

 .title2 {
   border-bottom:3px solid greenyellow;
   font-size: 50px;
   color: red;
   transform:rotateZ(20deg);
  }

3,JS

main.js
const title = document.querySelector('.title');
console.log(title);

title.addEventListener('dblclick',()=>{
  title.classList.toggle('title2');
});

ダブルクリックイベント発生で、title2クラスを設定します。ただし、クラスの付け外しを行いたいのでtoggleメソッドを使用します。

②ゲーム

1,HTML

index.html
<button>ボタン</button>
 <ul class="ul">
   <li class="lis" >リスト</li>
 </ul>

2,JS

main.js
let count = 0;
const button = document.querySelector('button');
button.addEventListener('click',() =>{
  count += 1;
  if(count === 1) {
    const ul2 = document.querySelector('.ul');
    const lis =document.querySelector('.lis')
    ul.removeChild(lis);
   }
  const makeLi = document.createElement('li');
  makeLi.textContent = 'ok';
  const ul = document.querySelector('ul');
  ul.appendChild(makeLi);
  makeLi.classList.toggle('list');
});

1,remove.child();
letに0を代入します。
1回目のクリックでHTMLのli要素のリストを削除します。
親要素のulを取得します。削除するクラスlisを取得します。
ul.removeChild(lis)で子ノードを削除します。

2,document.createElement();
新たに、li要素を生成していきます。
document.createElement('li')メソッドで空の要素を生成します。
空の要素にokを中身の要素に追加します。

3,appendchaild();
li要素をulの子ノードとして追加します。