javascriptのみを使用してボタンの色onclickを変更するにはどうすればよいですか？

Question

OnclickとgetElementsByClassNameを使用してボタンの色を変更しようとして、次のようなものを思いつきました。

HTML：

<button onclick="submitButtonStyle()" type="submit" class="stylebutton"> 
Submit </button>

JS：

function submitButtonStyle() { 
document.getElementsByClassName("stylebutton").style.backgroundColor = "red"; }

コードに何が欠けているのか、何を追加すればいいのかなど、ヒントを教えていただければ幸いです。

Answer 1

ClassNameプロパティは、要素のクラス名（要素のクラス属性の値）を設定または返します。

function submitButtonStyle() { 
document.getElementsByClassName("stylebutton")[0].style.backgroundColor = "red"; }

<button onclick="submitButtonStyle()" type="submit" class="stylebutton"> 
Submit </button>
JS:

GetElementsByClassName（）メソッドは、指定されたクラス名を持つドキュメント内のすべての要素のコレクションをNodeListオブジェクトとして返します。

NodeListオブジェクトは、ノードのコレクションを表します。ノードにはインデックス番号でアクセスできます。インデックスは0から始まります。

ソース