2つのケースでフォームをクリアするにはどうすればよいですか？

Question

私は見つけた多くの「解決策」を検索して試しましたが、誰も私のために働いていませんでした。私のページには2つのフォームがあります。mainForm & secondaryFromです。私はJSでコードを設定して、これらのフォームのプロパティがそれぞれblockまたはnoneであるように表示し、その逆も同様に、ステートメントに従って1つずつ表示されます。ただし、表示されているフォームに値がある場合は、他のフォームの値（名前や電子メールの入力値など）と混ざり合い、送信時に両方のフォームの値が表示されます。だから私はディスプレイのプロパティとしてnoneを取得すると、他の隠れたフォームの値をクリアしたいと思います。逆もまた同様です。うまくいけば私は十分にそれを説明することができた。

HTML：

<form id="mainForm"> 
    <!-- inputs and labels. All inputs have 'main-input' classes --> 
</form> 
<form id="secondaryForm"> 
    <!-- inputs and labels. All inputs have 'secondary-input' classes --> 
</form> 

これは、ボタンのクリックで実行されます：

JS：

const mainForm = document.getElementById('mainForm'); 
const secondaryForm = document.getElementById('secondaryForm'); 
    if (mainForm.style.display == 'block') { 
      document.getElementsByClassName('secondary-input').value = ''; 

     } 
    if (secondaryForm.style.display == 'block') { 
      document.getElementsByClassName('main-input').value = ''; 
    } 

私も試したリセット（）メソッドが、まだ動作していません。これを達成する方法は？

Answer 1

document.getElementsByClassName（ 'secondary-input'）メソッドは、要素のコレクションを返します。

あなたは、コレクションを反復処理し、あなたのコードで個別に

var elements = document.getElementsByClassName('main-input'); 
for (var index = 0; index < elements.length; index++) { 
    elements[index].value=''; 
} 

Answer 2

一つの問題を値を設定する必要がありますのgetElementsByClassNameは、コレクションを返します。そのgetElementsByClassNameロジックを使用するという考えで販売されている場合は、値をクリアするためにコレクションを反復処理する必要があります。それ以外の場合は、各コレクションアイテムをインデックスで参照する必要があります。もちろん、いつでもgetElementByIdに切り替えることができます。

「メイン入力」に2つの入力があり、「セカンダリー」に2つの入力があると仮定すると、以下が動作します。 forループを書いたり、完全なコードを表示したりする時間を取らないことに対する謝罪。私はあなたがこれを差し込み、getElementByClassNameを読んだら、私が何を意味するのか分かります。それでもSOエディタでどのように良いコード例を投稿するかを考えます。乾杯！

document.getElementsByClassName('main-input')[0].value = ''; 
    document.getElementsByClassName('main-input')[1].value = ''; 
    document.getElementsByClassName('secondary-input')[0].value = ''; 
    document.getElementsByClassName('secondary-input')[1].value = '';