javascript - 如何根据两种情况清除表格？

Question

我搜索并尝试了许多我发现的“解决方案”，但没有一个对我有用。所以我的页面上有两个表单，mainForm 和 secondaryFrom。我已经在 J​​S 中设置了代码，以便每个表单的显示属性都充当 block 或 none ，反之亦然，根据声明，一个将显示在一次。但是，如果显示的表单有值，它们会与其他表单的值(例如姓名和电子邮件输入值)混合，并且在提交时，我会收到两个表单的值。因此，我想清除其他隐藏表单的值(如果它的显示属性为 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 = '';
    }

我也尝试过reset()方法，但仍然不起作用。如何实现这一目标？

Answer 1

document.getElementsByClassName('secondary-input') 方法返回元素的集合。

您应该迭代集合并单独设置值

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