私は、次のようなものですボタンを持っているHTMLとJS

Question

で送信ボタンを、

<button type = "submit">submit</button> 

は、どのように私は、JSはそれがHTMLコードを変更せずに押されたことを読み取ることができますか？

また、私は、私はJSのコードを変更せずにクリックを読むために取得するにはどうすればよい

<button class="add">add</button> 

あるボタンがありますか？

Answer 1

あなたは、いくつかのDOM要素の選択機能（.querySelector()、.getElementsByTagName()、.getElementsByClassName()など）のいずれか一つを用いて要素を選択することになるあなたの空想をとり、クリックイベントのイベントリスナーを添付して、リスナーに行うものは何でも欲しいです。

// document.querySelector('button.add') to select by class, or... 
 
document.querySelector('button[type="submit"]').addEventListener('click', function(e) { 
 
    alert('The button was clicked.') 
 
})

<button type = "submit">submit</button>

、あなたがページ上に複数のボタンを持っていたならば、あなたはリストを返すために.querySelectorAll()（または私が言及した他の機能の1）を使用する必要があることに注意してください、ループオーバーイベントハンドラをそれぞれに割り当てるためのリスト。または、共通の要素を含むハンドラにアタッチします。あなたが何かしたいのであれば、がそれぞれ異なるを区別しておく必要があります。たとえば、それらが異なる容器や何かにある場合などです。

Answer 2

var buttons=document.getElementsByTagName("button");////returns an array of all buttons 
//assuming that you have only one button with type == submit otherwise loop here 
if(buttons[0].getAttribute("type")=="submit") 
{ 
buttons[0].addEventListener("click",function(){ 
    //you code goes here 
}); 
} 


var buttons=document.getElementsByClassName("add");//returns an array of buttons with class as add 
//assuming that you have only one button with class add 
buttons[0].addEventListener("click",function(){ 
    //you code goes here 
});