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

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

Rails/javascript/マルバツの表示を切り替える 

動作環境

単純にマルとバツを切り替える方法です。

f:id:shifonnu:20201012212630g:plain
バツを押したらマルがうつります。マルを押したらバツがうつります。

/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');

const ok1_1 = ele1_1.style.display;
// 1個目のマルを表示する事を定義

const ng1_1 = ele1_2.style.display;
// 1個目のバツを表示する事を定義 以下全部で4つ分繰り返し

const ok2_1 = ele2_1.style.display;
const ng2_1 = ele2_2.style.display;
const ok3_1 = ele3_1.style.display;
const ng3_1 = ele3_2.style.display;
const ok4_1 = ele4_1.style.display;
const ng4_1 = ele4_2.style.display;

ele1_1.style.display = 'none';
// ページを開いた最初にマルボタンは見えないように定義 以下全部で4つ分繰り返し
ele2_1.style.display = 'none';
ele3_1.style.display = 'none';
ele4_1.style.display = 'none';

ele1_1.onclick = function(){
// 1個目のマルをクリックしたとき
  ele1_1.style.display = 'none';
// 1個目のマルは消える
  ele1_2.style.display = ng1_1;
// 1個目のバツを表示させる 
}
ele1_2.onclick = function(){
// 1個目のバツをクリックしたとき
  ele1_2.style.display = 'none';
// 1個目のバツは消える
  ele1_1.style.display = ok1_1;
// 1個目のマルを表示させる 以下全部で4つ分繰り返し
}

ele2_1.onclick = function(){
  ele2_1.style.display = 'none';
  ele2_2.style.display = ng2_1;
}

ele2_2.onclick = function(){
  ele2_2.style.display = 'none';
  ele2_1.style.display = ok2_1;
}

ele3_1.onclick = function(){
  ele3_1.style.display = 'none';
  ele3_2.style.display = ng3_1;
}

ele3_2.onclick = function(){
  ele3_2.style.display = 'none';
  ele3_1.style.display = ok3_1;
}

ele4_1.onclick = function(){
  ele4_1.style.display = 'none';
  ele4_2.style.display = ng4_1;
}

ele4_2.onclick = function(){
  ele4_2.style.display = 'none';
  ele4_1.style.display = ok4_1;
}
})

/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">
</div>

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

.block{
  display: flex;
  justify-content: space-evenly;
}
.marubatubuttonok{
  font-size: 200px;
  color: red;
}
.marubatubuttonng{
  font-size: 200px;
  color: blue;
}

visibilityプロパティも試してみましたが、2箇所別れてマルバツが出てきました。
displayプロパティの方がやりたい表示に近かったです。

閉店しましたと出てくる処理もしたいので
次はマルが揃った事を判断できる文を考えます。

最後まで読んで頂いてありがとうございます。

https://techacademy.jp/magazine/24738
参考:JavaScriptで要素の表示・非表示を切り替える方法を現役エンジニアが解説【初心者向け】