为什么我的提交按钮没有隐藏？

Question

背景：我在一个页面上有一个表单，其中包含多个div，这些表单的开始仅显示第一个div，而其他所有隐藏。 进行选择时，将根据上一个div中的选择动态构建并显示下一个表单div。 以前的所有表格div仍然显示。 随着选择的进行，您最终会看到更多的表单字段。 为了简洁起见，我没有将整个代码放在这里。

我为此使用JavaScript。 我不是有意使用jQuery的，因为在开始依赖库之前，我仍在努力使自己完全适应JavaScript。

我的问题：我想隐藏表单末尾的“提交”按钮，直到显示最后一个表单div。 我正在尝试的所有方法都无法正常工作，并且我已经用尽了在网上找到的所有内容。 它应该确实很简单，但是显然它们对于我不了解JavaScript的Submit按钮必须是特殊的。

我所做的事情：以下是我认为应该可以的工作，但不行（我将代码限制在手头，但是如果有人认为它更深，那么我将很乐意编辑并添加更多代码）。 onclick（）函数适用于otherDiv。 例如，当您单击倒数第二个时，OtherDiv将按预期显示。 它还应该显示“提交”按钮，但不显示（并且“提交”按钮没有隐藏在第一位）。

问题很简单，无论出于何种原因，在onclick（）事件发生时，提交按钮都不会在页面加载时被赋予“无”的样式，并且也不会被赋予“阻止”的样式。

我在控制台中看到以下错误，该错误在使用GetElemntsByName定位提交按钮时显示，如下所示，但不确定为什么会得到它。 我理解该错误，而不是为什么我使用GetElementsByName提交按钮的目标引发了该错误。

我还尝试了通过ID与GetElementById来定位提交按钮，并且尽管下面的控制台错误消失了，但是我仍然没有隐藏提交按钮。

我在下面显示了带有GetElementsByName错误的代码，因为我想了解该错误以及解决隐藏的提交按钮问题。

安慰

TypeError: pdfButton.style is undefined
if(pdfButton) {pdfButton.style.display = 'none'};

的HTML

<form id="buildShopDrawing" name="BuildShopDrawing" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <input type="submit" name="buildPDf" id="buildPDf" class="buildPDFbutton" value="Build the Shop Drawings PDF">    
</form>

Java脚本

    function preparePage() {

        // Set common divs to var for ease of use
        var pdfButton = document.getElementsByName('buildPDF');

      // hide: submit button until last form is revealed    
      for (var i = 0; i < door.length; i++) {
        door[i].onclick = function() {
          if(this.checked) {
            otherDiv.style.display = 'block';
            pdfButton.style.display = 'block';
          }
        };
     };

      //hide form divs on initial page load
     if(pdfButton) {pdfButton.style.display = 'none'};

    } //end preparepage

// Do not execute JavaScript until page is loaded
window.onload =  function() {
preparePage();
};

一如既往地感谢您的帮助！

Answer 1

你有错字 id="buildPDf" ！= ('buildPDF')

（正如其他人指出的那样，请使用getElementById ）

Answer 2

您需要使用document.getElementById而不是返回集合的getElementsByName，这意味着您只能通过其索引访问元素。