Javascript 为什么'；我的提交按钮不隐藏吗？

背景：我在一个页面上有一个表单，其中有几个div，开始时只显示第一个div，而隐藏所有其他div。在进行选择时，将根据上一个div中的选择动态生成和显示下一个表单div。所有上一个表单div仍将显示。随着选择的进行，会逐渐显示更多的表单字段。为了简洁起见，我没有把整个代码放在这里

我正在为此使用JavaScript。我并不是故意使用jQuery，因为在我开始依赖库之前，我仍然在努力完全熟悉JavaScript

我的问题：我想隐藏表单末尾的提交按钮，直到显示最后一个表单div。我正在尝试的一切都不起作用，我已经用尽了我在网上找到的东西。这应该很简单，但很明显，他们的提交按钮肯定有什么特别的地方，这在我的JavaScript知识中还没有

我所做的：下面是我认为应该有效的，但没有（我将代码限制在手头的问题上，但是如果有人认为它更深入，那么我将很乐意编辑并添加更多代码）。onclick（）函数对于otherDiv正常工作。i、 e.当您单击第二个到最后一个Div时，将按预期显示OtherDiv。它还应该显示submit按钮，但不会显示（并且submit按钮不会首先隐藏）

问题很简单，不管出于什么原因，在页面加载时提交按钮没有被赋予“none”样式，在onclick（）事件发生时也没有被赋予“block”样式

我在控制台中看到下面的错误，当我使用GetElemntsByName以提交按钮为目标时显示，如下所示，但我不确定为什么会得到它。我理解这个错误，只是不理解为什么我用GetElementsByName来定位submit按钮会抛出这个错误

我也尝试过使用GetElementById将submit按钮按Id定位，虽然下面的控制台错误消失了，但我仍然没有隐藏submit按钮

我在下面展示了带有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>

您有一个输入错误
id=“buildPDf”
！=<代码>（'buildPDF'）

（正如其他人所指出的，使用

getElementById

）

你有一个打字错误

id=“buildPDf”

！=<代码>（'buildPDF'）

（正如其他人所指出的，使用

getElementById

）

你有一个打字错误

id=“buildPDf”

！=<代码>（'buildPDF'）

（正如其他人所指出的，使用

getElementById

）

你有一个打字错误

id=“buildPDf”

！=<代码>（'buildPDF'）

---

（正如其他人指出的，使用

getElementById

）

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

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

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

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

一般提示：使用类，而不是直接样式。不过，对于这样一个小的页面/站点来说，这并不重要。失败代码的一个来源可能是

getElements…

返回类似数组的元素列表。因此，您需要访问该列表中的索引上的

.style

，而不是列表本身。谢谢您的提示！这在控制台错误上是有意义的。还有一个问题，现在要解决为什么当我使用GetElementByID时它仍然没有隐藏submit按钮如果你还没有，在你的js中添加跟踪语句，这样你就可以验证适当的函数是否正在运行，使用chrome/firefox中的开发工具来检查DOM，看看是否应用了类，并使用样式插入器查看是否存在css错误，例如样式冲突和样式被覆盖。一般提示：使用类，而不是直接的样式。不过，对于这样一个小的页面/站点来说，这并不重要。失败代码的一个来源可能是

getElements…

返回类似数组的元素列表。因此，您需要访问该列表中的索引上的

.style

，而不是列表本身。谢谢您的提示！这在控制台错误上是有意义的。还有一个问题，现在要解决为什么当我使用GetElementByID时它仍然没有隐藏submit按钮如果你还没有，在你的js中添加跟踪语句，这样你就可以验证适当的函数是否正在运行，使用chrome/firefox中的开发工具来检查DOM，看看是否应用了类，并使用样式插入器查看是否存在css错误，例如样式冲突和样式被覆盖。一般提示：使用类，而不是直接的样式。不过，对于这样一个小的页面/站点来说，这并不重要。失败代码的一个来源可能是

getElements…

返回类似数组的元素列表。因此，您需要访问该列表中的索引上的

.style

，而不是列表本身。谢谢您的提示！这在控制台错误上是有意义的。还有一个问题，现在要解决为什么当我使用GetElementByID时它仍然没有隐藏submit按钮如果你还没有，在你的js中添加跟踪语句，这样你就可以验证适当的函数是否正在运行，使用chrome/firefox中的开发工具来检查DOM，看看是否应用了类，并使用样式insepctor查看是否存在css错误，例如confl

    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();
};