今、ボタンを押すと数字が1つ上がるというものを作っています。
4つのボタンを使用するとき、buttonのままでtypeを入れるとボタンがどこクリック1つの所でカウントアップされてしまいます。
そこで、buttonaやbuttonbにするとクリックしたら別で反応するようにはなったのですが、今度はボタン部分がテキスト?になってしまい、文字が打ち込めるようになってしまいました。
どうしたら別々のボタン機能になりますか?
<p>
<input type="buttona" value="赤いやつ" onclick="cherryCountUp();">
<span id="cherryCountUp">0</span>
</p>
<script type="text/javascript">
//オブジェクト(要素、エレメント)
var btn = document.querySelector('input[type="buttona"]'); //ボタン
var cherryCountUp = document.querySelector('#cherryCountUp');//出力先
//変数
var ccup = 0; //カウンター
//ボタンクリックでカウントアップ関数
btn.onclick = function () {
ccup = ccup + 1; //カウンター値に1を加算
cherryCountUp.textContent = ccup; //加算結果の表示
}
</script>
<p>
<input type="buttonb" value="緑のやつ" onclick="suikaCountUp();">
<span id="suikaCountUp">0</span>
</p>
<script type="text/javascript">
var btn = document.querySelector('input[type="buttonb"]');
var suikaCountUp = document.querySelector('#suikaCountUp');
var suikaup = 0;
btn.onclick = function () {
suikaup = suikaup + 1;
suikaCountUp.textContent = suikaup;
}
</script>
<p>
<input type="buttonc" value="その他①" onclick="sonotaCountUp();">
<span id="sonotaCountUp">0</span>
</p>
<script type="text/javascript">
var btn = document.querySelector('input[type="buttonc"]');
var sonotaCountUp = document.querySelector('#sonotaCountUp');
var sonotaup = 0;
btn.onclick = function () {
sonotaup = sonotaup + 1;
sonotaCountUp.textContent = sonotaup;
}
</script>
<p>
<input type="buttond" value="その他②" onclick="sonota2CountUp();">
<span id="sonota2CountUp">0</span>
</p>
<script type="text/javascript">
var btn = document.querySelector('input[type="buttond"]');
var sonota2CountUp = document.querySelector('#sonota2CountUp');
var sonota2up = 0;
btn.onclick = function () {
sonota2up = sonota2up + 1;
sonota2CountUp.textContent = sonota2up;
}
</script>
長くてすみません。
ご意見、アドバイスをよろしくお願いします。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
おなじidを複数の要素に振ってはいけません
ボタンの隣の要素を加算するだけならこんな感じで
<script>
document.addEventListener('click', function(e){
var t=e.target;
if(t.nodeName=="INPUT" && t.type=="button"){
var num=parseInt(t.nextElementSibling.textContent);
t.nextElementSibling.textContent=num+1;
}
});
</script>
<p>
<input type="button" value="赤いやつ">
<span>0</span>
</p>
<p>
<input type="button" value="緑のやつ">
<span>0</span>
</p>
<p>
<input type="button" value="その他①">
<span>0</span>
</p>
<p>
<input type="button" value="その他②">
<span>0</span>
</p>
No.3
- 回答日時:
クリックイベントは、ボタン毎ではなく全体まとめて定義し、スクリプトを一つにまとめましょう。
ボタン要素やカウント要素に名前を付けて、汎用性を高めましょう。
名前は制限の厳しい ID でけではなく name や class を使う方法もあります。
<p><button type=button name=target value=cherry>赤いやつ</button> <span class=target-cherry>0</span></p>
<p><button type=button name=target value=suica >緑のやつ</button> <span class=target-suica >0</span></p>
<p><button type=button name=target value=grape >紫のやつ</button> <span class=target-grape >0</span></p>
<p><button type=button name=target value=orange>黄のやつ</button> <span class=target-orange>0</span></p>
<script>
document.addEventListener('click', function(ev){
var t = ev.target;
if (!t || t.tagName != 'BUTTON' || t.name != 'target') return;
var targets = document.querySelectorAll('span.target-' + t.value);
for (var i=0; i<targets.length; i++) {
var n = parseInt(targets[i].textContent, 10);
targets[i].textContent = n+1;
}
}, false);
</script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
追加ボタンを押した際に ok ボ...
-
Firefoxでwindow.openerが動作...
-
onclickが動作しない
-
リンクの追加
-
JSのボタンを複数う使うには
-
開いた子ウィンドウにあるボタ...
-
onchangeイベントを強制的に発...
-
ボタンをクリックするとテキス...
-
オークションサイト一括検索サ...
-
オンクリックで現在時刻の取得→...
-
VB.NETで<Input>タグ、<text...
-
onClickがinput type="image"だ...
-
formのfileの値をhiddenでも持...
-
return trueとreturn falseの用...
-
チェックボックスのON/OFFでVal...
-
<form action="#">の意味とは?
-
jQuery セレクトボックスで選択...
-
フォームが空欄の時にフォーム...
-
【jQuery】input nameの文字列...
-
新しくフォルダを作成したい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
iOSのみダブルタップが必要
-
onclickが動作しない
-
追加ボタンを押した際に ok ボ...
-
ボタンかリンクをクリックする...
-
innerHTML内では改行は禁止?
-
クリックさせたいが、click()が...
-
javaScriptの変数をJavaの変数...
-
formのfileの値をhiddenでも持...
-
JavascriptでDOM-based XSSの発...
-
クリックでテーブル内の背景色...
-
VB.NETで<Input>タグ、<text...
-
開いた子ウィンドウにあるボタ...
-
jQueryで設定したイベントハン...
-
javascriptで作成されたテーブ...
-
HTMLのテキストボックスへのド...
-
テキストフィールド未入力の場...
-
JavaScriptのfileオブジェクト...
-
JSのボタンを複数う使うには
-
オンクリックで現在時刻の取得→...
おすすめ情報