jsで質問です。ボタンが二つ存在し、両方のボタンがクリックされたことをチェックしたいのですが、どの

締切済

質問者：piraniaman
質問日時：2022/11/22 10:30
回答数：4件

jsで質問です。
ボタンが二つ存在し、両方のボタンがクリックされたことをチェックしたいのですが、どのような判定をしたら良いでしょうか。

<input type="button"value="ボタン"onclick="event()"id="test1">
<input type="button"value="ボタン"onclick="event()"id="test2">

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： fujillin
回答日時：2022/11/22 19:12

No3です。

＞合っている前提でお願いします。
でも、そのままにしておくとエラーになるので、いずれにしろ動きませんよ。
ですので、No3の回答は、スクリプトからこれを修正するという処理を含んだ回答です。
（そちらが原因で「動かない」と悩まれても馬鹿々々しいので・・）

＞今、記述していただいたものはonclick先に書けば良いのでしょうか。
<script></script>タグを設け、その中に記述しておけば動作するはずです。

HTMLを修正しても良ければ、こんな感じでもいけると思います。
（ちなみに、No1様のご回答とは具体的な方法は異なります。
　他にも、いろいろなやり方が考えられるでしょう。）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script>
const ids = ['test1', 'test2'];
const chk = ids.map(d => false);
document.addEventListener('click', e => {
const i = ids.indexOf(e.target.id);
if (i < 0 ) return; else chk[i] = true;
if(chk.indexOf(false) < 0) alert('全部押された');
});
</script>
</head>
<body>

<input type="button" value="ボタン" id="test1">
<input type="button" value="ボタン" id="test2">

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

説明下手ですみません。
記載していただいた、inputタグにonclick属性を付与し、その呼び先で判定可能性なのでしょうか。

通報する

お礼日時：2022/11/22 21:52

No.3

回答者： fujillin
回答日時：2022/11/22 16:58

こんにちは

＞どのような判定をしたら良いでしょうか。
ボタンを識別して、押されたボタンを記憶しておいて、両方（全部）押されたかをチェックすれば良いのではないでしょうか？

一方で、ご提示のHTML記述のままだと「event is not a function」のエラーが発生しますね。
（予約語ではないようですし、普通に関数定義や呼出しも可能ですが、onclik属性に設定すると上記のエラーになるようです）

ですので、以下では、上書きして消しています。

window.addEventListener('DOMContentLoaded', () => {
const
ids = ['test1', 'test2'],
handler = e => {
chk[ids.indexOf(e.target.id)] = true;
if(chk.indexOf(false) < 0) alert('全部押された');
},
chk = ids.map(d => !(document.getElementById(d).onclick = handler));
});

- 0
- 件

通報する

この回答へのお礼

提示しているhtmlは手書きで抜粋している部分もありますので、合っている前提でお願いします。

今、記述していただいたものはonclick先に書けば良いのでしょうか。

通報する

お礼日時：2022/11/22 17:28

No.2

回答者： Ogre7077
回答日時：2022/11/22 14:35

> pushedどうかの取得方法はどのようにするのでしょうか。

"data-" で始まる属性は、開発者が自由に定義できるカスタムデータ属性ですので、勝手に名前を決めて勝手に運用を決めちゃいましょう
https://developer.mozilla.org/ja/docs/Web/HTML/G …

読み書きは通常の属性と同じなので get/setAttribute でも可能ですが、専用の API が用意されているので活用しましょう
https://developer.mozilla.org/ja/docs/Web/API/HT …

カスタムデータ属性に対応しているフレームワークも多いので、お使いの環境について確認するとよいでしょう
例)
https://api.jquery.com/data/

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
data属性だと理解しました。
ボタンをクリックする、しないに関係なくpushedと取得出来てしまいます。

var element = document.getElementById('test1');
↓下記に格納されている文言はボタンの押下に関係なくpushedと取得される
element.dataset.userFlag

通報する

お礼日時：2022/11/22 17:40

No.1