A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
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>
No.3
- 回答日時:
こんにちは
>どのような判定をしたら良いでしょうか。
ボタンを識別して、押されたボタンを記憶しておいて、両方(全部)押されたかをチェックすれば良いのではないでしょうか?
一方で、ご提示の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));
});
提示しているhtmlは手書きで抜粋している部分もありますので、合っている前提でお願いします。
今、記述していただいたものはonclick先に書けば良いのでしょうか。
No.2
- 回答日時:
> 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/
回答ありがとうございます。
data属性だと理解しました。
ボタンをクリックする、しないに関係なくpushedと取得出来てしまいます。
var element = document.getElementById('test1');
↓下記に格納されている文言はボタンの押下に関係なくpushedと取得される
element.dataset.userFlag
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
submitがおされた同時に JavaSc...
-
<form action="#">の意味とは?
-
onClick="this.form.submit
-
送信フォームで送信ボタンをお...
-
onclickで2個指定するには?
-
ボタン無しでフォーム内容送信
-
onclickをEnterキーでも行いたい
-
リセットボタンのイメージ化
-
return trueとreturn falseの用...
-
プルダウン選択を変更すると、...
-
slickのレスポンシブ > center...
-
FormのonsubmitでJavaスクリプ...
-
onchangeイベントを強制的に発...
-
select要素のvalueを配列で取得...
-
Selectボックスの幅を自動で広...
-
HTMLファイル同士での値渡し
-
ラジオボタンの値でリンク先を...
-
ラジオボタンとプルダウンを連...
-
Selectの中身をfor文で入れる
-
JQuery selectが反映されない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フォーム内で記入したクエリ送...
-
ボタン2回押しを無効にしたい
-
confirmのOK・キャンセルを押し...
-
onclickで2個指定するには?
-
onClick="this.form.submit
-
VBSでブラウザ上のテキストボッ...
-
ボタンを押すとチェックボック...
-
submitするとなぜか2度実行する
-
confirm()で表示したダイアログ...
-
送信フォームで送信ボタンをお...
-
JavaScriptにおいてPOSTで送信...
-
jsで質問です。 ボタンが二つ存...
-
ボタン無しでフォーム内容送信
-
onclickをEnterキーでも行いたい
-
sessionの値でボタンを活性・非...
-
HTAで、こんなボタンが作りたい。
-
VBScript
-
textボックスに入力されたアド...
-
Javascriptで二重送信を防止し...
-
印刷プレビュー後のウィンドウ...
おすすめ情報