@webnoob (勇太佐々木)posted at 2020-09-10

HTMLのbuttonの動作について

Q&A

Closed

解決したいこと

HTMLの勉強を最近始めた者です。
buttonはonclick=~~と記述することで、クリック時に処理が発生すると記事などで書かれていましたが、yahooショッピングのボタンの一部はクリックされたときの処理が書かれていなく混乱しています。
以下は"カートに入れる"ボタンのコードなのですが、クリックされたときの処理が書かれていません。また、buttonのtypeも記述されていません。

クリックされたときに、data-ylkというdata属性と紐付けられた関数などが呼び出されるのでしょうか？
皆様のお力を貸していただけたら幸いです。

該当するソースコード

<button class="elButton" data-ylk="slk:addcart;pos:0;" id="add_cart">
<span>商品をカートに入れる</span>
</button>

自分で試したこと

該当ページのHTMLなどを調べ、buttonの使い方などについて検索をかけたのですがonclickでの動作などしか出てきませんでした。

0 likes

1Answer

@uasi posted at 2020-09-10

button の type は省略すると type="submit" になり、クリックすると button の祖先の form 要素を送信します。

「カートに入れる」ボタンも type="submit" かつ form の子要素なので、 onclick がなくても押せば form の送信処理が実行されます。

それとは別の話ですが、 button の click イベントハンドラは JS で動的に追加することもできます。

// 「カートに入れる」ボタンを見つける
// ここでは一例として id が add_cart のボタンを探すやり方にした
const addCartButton = document.getElementById('add_cart');

// 「カートに入れる」ボタンに click イベントハンドラを追加する
addCartButton.addEventListener('click', function(event) {
  ...
});

1Like

Comments

@webnoob
Questioner
ありがとうございます。
教えていただいた知識をもとに今一度勉強します。

Are you sure you want to delete the question?