しふぉんのテックなブログ

女性,35才,飲食業退職,IT転職希望,HTML/CSS, Ruby, Ruby on Rails|techcamp83期卒

Rails/javascript/マルが4つ揃ったらメッセージが出る

動作環境

f:id:shifonnu:20201017003552g:plain
マルが4つ揃ったら「お疲れ様でした!」と下に表示されます。

/app/javascript/checked.js

addEventListener("load",function() {
// ページが読み込まれたら実行する
let ele1_1 = document.getElementById("buttun1ok");
// 1個目のマルのidを取得して定義
let ele1_2 = document.getElementById("buttun1ng");
// 1個目のバツのidを取得して定義 以下全部で4つ分繰り返し
let ele2_1 = document.getElementById("buttun2ok");
let ele2_2 = document.getElementById("buttun2ng");
let ele3_1 = document.getElementById("buttun3ok");
let ele3_2 = document.getElementById("buttun3ng");
let ele4_1 = document.getElementById("buttun4ok");
let ele4_2 = document.getElementById("buttun4ng");

ele1_2.innerText = "×";
// ページを開いた最初にテキスト×が入るように定義 以下全部で4つ分繰り返し
ele2_2.innerText = "×";
ele3_2.innerText = "×";
ele4_2.innerText = "×";

ele1_1.onclick = function(){
// 1個目のマルをクリックしたとき
  ele1_1.innerText = "";
// 1個目のマルのテキストは空になる
  ele1_2.innerText = "×";
// 1個目のバツにテキスト×が入る
};
ele1_2.onclick = function(){
// 1個目のバツをクリックしたとき
  ele1_2.innerText = "";
// 1個目のバツのテキストは空になる
  ele1_1.innerText = "○";
// 1個目のマルにテキスト○が入る 以下全部で4つ分繰り返し
};

ele2_1.onclick = function(){
  ele2_1.innerText = "";
  ele2_2.innerText = "×";
};

ele2_2.onclick = function(){
  ele2_2.innerText = "";
  ele2_1.innerText = "○";
};

ele3_1.onclick = function(){
  ele3_1.innerText = "";
  ele3_2.innerText = "×";
};

ele3_2.onclick = function(){
  ele3_2.innerText = "";
  ele3_1.innerText = "○";
};

ele4_1.onclick = function(){
  ele4_1.innerText = "";
  ele4_2.innerText = "×";
};

ele4_2.onclick = function(){
  ele4_2.innerText = "";
  ele4_1.innerText = "○";
};
});

addEventListener("click",function() {
// クリック動作が起きたら実行する
  let ele1_1 = document.getElementById("buttun1ok").innerText;
// 1個目のマルのidとテキスト内容を取得して定義 以下4つ分繰り返し
  let ele2_1 = document.getElementById("buttun2ok").innerText;
  let ele3_1 = document.getElementById("buttun3ok").innerText;
  let ele4_1 = document.getElementById("buttun4ok").innerText;
  let check_ok = document.getElementById("check_ok");
// 4つマルが揃ったら出るメッセージのidを取得して定義
  
  check_ok.innerText ="";
// 4つマルが揃ったら出るメッセージは最初はテキストが空であることを定義

if (ele1_1 != "" && ele1_1 == ele2_1 && ele3_1 == ele4_1 && ele2_1 == ele3_1 )check_ok.innerText = "お疲れ様でした!";
});
// もし1個目のマルが空ではない、かつ1個目のマルと2個目のマルのテキスト内容が同じ、
//かつ3個目のマルと4個目のマルのテキスト内容が同じ、かつ2個目のマルと3個目のマルの
//テキスト内容が同じ場合は、メッセージにテキスト「お疲れ様でした!」が入る。

/app/views/closes/_main.html.erb

<div class = "check-main">
  <div class = "check-mains">
    <div class = "log-button">
      <% if user_signed_in? %>
        <%= link_to "ログを参照する", close_path(current_user.id) %>
      <%else%>
        <%= link_to "ログを参照する", "#" %>
      <%end%>
    </div>
  </div>

    <div class = "block">
      <h2 class = "marubatubuttonok" id = "buttun1ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun1ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun2ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun2ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun3ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun3ng"></h2>
      <h2 class = "marubatubuttonok" id = "buttun4ok"></h2>
      <h2 class = "marubatubuttonng" id = "buttun4ng"></h2>
    </div>

</div>
<div class = "check-answer">
       <h2 class = "check-ok" id = "check_ok"></h2>
</div>

/app/assets/stylesheets/closes.css (一部抜粋)

.marubatubuttonok{
  font-size: 200px;
  color: red;
  align-items: flex-start;
}
.marubatubuttonng{
  font-size: 200px;
  color: blue;
  align-items: flex-start;
}

.check-ok{
  font-size: 100px;
  color: red;
  vertical-align: top;
}

前回と違う事

  • 前回はdisplayプロパティを使用したが今回はinnerTextプロパティを使用しました。 innerHTMLでも可能かと思います。 元々は何もテキストがない状態で、javascriptでテキストを表示させています。

悩んだ事

  • if (ele1_1 != "" && ele1_1 == ele2_1 && ele3_1 == ele4_1 )check_ok.innerText = "お疲れ様でした!"; 最初これで考えたら1個目と2個目のマルが揃ったらメッセージが出るので悩みました。

f:id:shifonnu:20201016104719p:plain
悩んだ時の画面

ふと そうか!!と思ったのですが、

if (ele1_1 != "" && ele1_1 == ele2_1 && ele3_1 == ele4_1  )check_ok.innerText = "お疲れ様でした!";
//もし1個目のマルは空でなくて、1個目のマルと2個目のマルのテキストは同じ内容
//かつ3個目のマルと4個目のマルのテキストは同じ内容だったら、
//メッセージにテキスト「お疲れ様でした!」を入れる

確かに1個目は空ではない、1個目と2個目は両方マルで同じテキスト内容、3個目と4個目は両方空で同じテキスト内容だからお疲れ様でした!判定になっていたのでした。
最後に && ele2_1 == ele3_1(2個目のマルと3個目のマルは同じテキスト内容)を足したら、思い通りになりました。

次回はログを残せるように考えたいと思います。
最後まで読んでいただきありがとうございます。

https://teratail.com/questions/35022
参考:三目ならべの勝敗判定がうまく動作しません