JSのボタンを複数う使うには

今、ボタンを押すと数字が１つ上がるというものを作っています。
４つのボタンを使用するとき、buttonのままでtypeを入れるとボタンがどこクリック１つの所でカウントアップされてしまいます。
そこで、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; //カウンター値に１を加算
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>

長くてすみません。
ご意見、アドバイスをよろしくお願いします。

No.3 回答者： Ogre7077 回答日時： 2018/06/07 17:36

クリックイベントは、ボタン毎ではなく全体まとめて定義し、スクリプトを一つにまとめましょう。

ボタン要素やカウント要素に名前を付けて、汎用性を高めましょう。
名前は制限の厳しい 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>

No.2 回答者： yambejp 回答日時： 2018/06/06 11:10

おなじ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.1 回答者： runix2007 回答日時： 2018/06/06 09:54

typeはbutton

idやname属性でそれぞれ区別してください