[JavaScript]3つのボタンをクリックされたらOKアラートを鳴らしたい

Question

タイトルの通り、３つのボタンを設置し、３つすべてクリックされたらOKというアラートを鳴るようにしたいです。
そのために以下のコードを実行しましたが、アラートが鳴りません何が原因なのでしょうか？
よろしくお願いします。

<input type="button" name="sbtn3" id="stop_btn3"/>
<input type="button" name="sbtn2" id="stop_btn2"/>
<input type="button" name="sbtn1" id="stop_btn1"/>

var bool_btn1 = false;
var bool_btn2 = false;
var bool_btn3 = false;

function check_tf(){
  if(change_true1 == true && change_true2 == true && change_true3 == true){
    //リセットのためにfalseを代入
    change_true1 = false;
    change_true2 = false;
    change_true3 = false;
    alert("OK");
  }
}

function change_true1(){
  bool_btn1 = true;
  check_tf();
}
function change_true2(){
  bool_btn2 = true;
  check_tf();
}
function change_true3(){
  bool_btn3 = true;
  check_tf();
}

window.onload = function(){
    document.form1.sbtn1.onclick=change_true1;
    document.form1.sbtn2.onclick=change_true2;
    document.form1.sbtn3.onclick=change_true3;
};

Answer 1

例えばこんな感じでクラスとカスタムデータを利用します

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
const btns=document.querySelectorAll('.stop_btn');
btns.forEach(x=>{
x.addEventListener('click',()=>{
x.dataset["click"]=1;
if([...btns].filter(x=>x.dataset["click"]).length==btns.length){
alert(1);
}
});
});
});
</script>
<input type="button" name="sbtn3" class="stop_btn">
<input type="button" name="sbtn2" class="stop_btn">
<input type="button" name="sbtn1" class="stop_btn">

Answer 2

何が原因なのでしょうか？

変数名、関数名を区別できていないのが原因です。

ご質問の例だとイベントリスナを onclick 属性に代入するなどして、「似た名称の変数、関数の宣言を減らす」という対策があります。

var bool_btn1 = false;
var bool_btn2 = false;
var bool_btn3 = false;

function check_tf(){
  if(bool_btn1 == true &&  bool_btn2 == true &&  bool_btn3 == true){
    //リセットのためにfalseを代入
    //change_btn1 = false;
    bool_btn1 = false;
    //change_btn2 = false;
    bool_btn2 = false;
    //change_btn3 = false;
    bool_btn3 = false;
    alert("OK");
  }
}

window.onload = function(){
  document.form1.sbtn1.onclick = function (){
    bool_btn1 = true;
    check_tf();
  };
  document.form1.sbtn2.onclick = function (){
    bool_btn2 = true;
    check_tf();
  };
  document.form1.sbtn3.onclick = function (){
    bool_btn3 = true;
    check_tf();
  };

};

---

<button> の　イベントリスナを要素に直接定義する方法を発展させて
data-stat 属性にクリックされたかどうかを記憶、判別するアプローチが以下の例

ここでも、名称を工夫しています。

window.addEventListener("DOMContentLoaded", () => {

  const
    buttons = document.querySelectorAll('[id^="stop_btn"]'),
    DATA_NAME = "stat",
    checkAll = () => [...buttons].every( btn => btn.dataset[DATA_NAME]==="true" ),
    resetAll = () => [...buttons].forEach( btn => { delete btn.dataset[DATA_NAME] })
  ;

  [...buttons].forEach( btn => {
    //btn.addEventListener("click", function(evt){
    //  evt.target.dataset[DATA_NAME]="true";
    btn.addEventListener("click", () => {
      btn.dataset[DATA_NAME]="true";
      if( checkAll() ) {
        alert("OK");
        resetAll();
      }
    });
  });

});

• addEventListener()
• Element.dataset(https://developer.mozilla.org/ja/docs/Web/API/HTMLOrForeignElement/dataset)
• querySelectorAll()
• Array.prototype.every()
• Array.prototype.forEach()

Answer 3

変数名にすべきところが関数名になってます。

var bool_btn1 = false;
var bool_btn2 = false;
var bool_btn3 = false;

function check_tf(){
  if(bool_btn1 == true &&  bool_btn2 == true &&  bool_btn3 == true){
    //リセットのためにfalseを代入
    bool_btn1 = false;
    bool_btn2 = false;
    bool_btn3 = false;
    alert("OK");
  }
}

function change_true1(){
  bool_btn1 = true;
  check_tf();
}
function change_true2(){
  bool_btn2 = true;
  check_tf();
}
function change_true3(){
  bool_btn3 = true;
  check_tf();
}

window.onload = function(){
    document.form1.sbtn1.onclick=change_true1;
    document.form1.sbtn2.onclick=change_true2;
    document.form1.sbtn3.onclick=change_true3;
};

Comments

[kanan_py]

ご指摘の通り、変数がごっちゃになってしまっていました。
ありがとうございました

Answer 4

変数が「bool_btn」と「change_true」でごっちゃになっているからでは？

if(change_true1 == true && change_true2 == true && change_true3 == true){

ここは「bool_btn」かと