Question

背景：我在一个页面上有一个表单，其中有几个div，只有第一个显示div而其他所有显示为div。在进行选择时，下一个表格div将根据前一个div中的选项动态构建和显示。仍然显示所有以前的表格div。在逐步完成选择时，逐步显示更多表单字段。为简洁起见，我没有把整个代码放在这里。

我正在使用JavaScript。我没有故意使用jQuery，因为在我开始依赖库之前，我仍在努力完全使用JavaScript。

我的问题：我想隐藏表单末尾的提交按钮，直到显示最后一个表单div。我正在尝试的一切都不起作用，我已经用尽了我在网上找到的东西。它应该非常简单，但显然它们必须是一个关于提交按钮的特殊内容，而这个按钮还不是我的JavaScript知识。

我做了什么：以下是我认为应该有效的方法，但不是（我保留了代码仅限于手头的问题，但如果有人认为它更深，那么我将愉快地编辑和添加更多代码）。 onclick（）函数适用于otherDiv。即，当您单击第2个到最后一个Div时，OtherDiv将按预期显示。它还应该显示提交按钮，但不显示（并且提交按钮不会隐藏在第一位）。

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

我在我的控制台中看到下面的错误，显示当我使用GetElemntsByName定位提交按钮时，如下所示，但我不知道为什么我会得到它。我理解错误，而不是为什么我使用GetElementsByName定位提交按钮会导致错误。

我还尝试使用带有GetElementById的Id定位提交按钮，当下面的控制台错误消失时，我仍然没有隐藏提交按钮。

我已经使用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>

的Javascript

    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，这意味着您只能通过索引访问元素。

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

2 个答案: