实际 HTML 元素的 JAVASCRIPT 数组

Question

我正在尝试将 JavaScript 包含到一个表单应用程序中，该应用程序从现场收集施工数据。我已经用谷歌搜索了这个废话，但我无法弄清楚将 html 元素保存在数组中是否合法(或者我的语法是否正确)。

所需的结果是单击“添加焊缝”按钮，然后显示表单和取消按钮，同时隐藏页面上的所有其他按钮和表单。

下面的代码不起作用，我可能以错误的方式处理这个问题。

button {
  border: none;
  display: inline;
  background: #f5f5f5;
  background-image: -webkit-linear-gradient(top, #f5f5f5, #d6d6d6);
  background-image: -moz-linear-gradient(top, #f5f5f5, #d6d6d6);
  background-image: -ms-linear-gradient(top, #f5f5f5, #d6d6d6);
  background-image: -o-linear-gradient(top, #f5f5f5, #d6d6d6);
  background-image: linear-gradient(to bottom, #f5f5f5, #d6d6d6);
  font-weight: bold;
  color: black;
  font-size: 10px;
  padding: 0px 10px 0px 10px;
  height: 25px;
  text-decoration: none;
  cursor: pointer;
}
button:hover {
  background: #b8b8b8;
  background-image: -webkit-linear-gradient(top, #b8b8b8, #7a7a7a);
  background-image: -moz-linear-gradient(top, #b8b8b8, #7a7a7a);
  background-image: -ms-linear-gradient(top, #b8b8b8, #7a7a7a);
  background-image: -o-linear-gradient(top, #b8b8b8, #7a7a7a);
  background-image: linear-gradient(to bottom, #b8b8b8, #7a7a7a);
  text-decoration: none;
}
.cancel {
  display: none;
  background: #ff3333;
  background-image: -webkit-linear-gradient(top, #ff3333, #4a0000);
  background-image: -moz-linear-gradient(top, #ff3333, #4a0000);
  background-image: -ms-linear-gradient(top, #ff3333, #4a0000);
  background-image: -o-linear-gradient(top, #ff3333, #4a0000);
  background-image: linear-gradient(to bottom, #ff3333, #4a0000);
}
.cancel:hover {
  background-image: -webkit-linear-gradient(top, #1eff0a, #0e5200);
  background-image: -moz-linear-gradient(top, #1eff0a, #0e5200);
  background-image: -ms-linear-gradient(top, #1eff0a, #0e5200);
  background-image: -o-linear-gradient(top, #1eff0a, #0e5200);
  background-image: linear-gradient(to bottom, #1eff0a, #0e5200);
}

<table>
  <tr>
    <td>
      <button onclick="line_form_show()" id="line_opener">ADD LINE</button>
    </td>
    <td>
      <button onclick="high_form_show()" id="high_opener">HIGHLIGHT</button>
    </td>
    <td>
      <button onclick="weld_form_show()" id="weld_opener">ADD WELD</button>
      <button class="cancel" onclick="cancel_weld()" id="cancel_weld">CANCEL</button>
      <button class="cancel" onclick="cancel_pli()" id="cancel_pli">CANCEL</button>
      <button class="cancel" onclick="cancel_mtr()" id="cancel_mtr">CANCEL</button>
    </td>
    <td>
      <button onclick="mtr_form_show()" id="mtr_opener">ADD MTR</button>
    </td>
  </tr>
</table>
<script type="text/javascript">
  var buttons = [
    document.getElementById('go_back'),
    document.getElementById('line_opener'),
    document.getElementById('high_opener'),
    document.getElementById('weld_opener'),
    document.getElementById('mtr_opener'),
    document.getElementById('pli_opener'),
    document.getElementById('print'),
    document.getElementById('pliInfo')
  ];

  function weld_form_show() {
    //document.getElementById('weld_form').style.display="inline";
    document.getElementById('cancel_weld').style.display = "inline";
    buttons.style.display = "none";
  }

  function cancel_weld() {
    //document.getElementById('weld_form').style.display ="none";
    document.getElementById('cancel_weld').style.display = "none";
    buttons.style.display = "inline";
  }
</script>

Answer 1

差不多了，但是您需要迭代按钮，例如

function weld_form_show() {
  //document.getElementById('weld_form').style.display="inline";
  document.getElementById('cancel_weld').style.display = "inline";
  for(var i=0; i < buttons.length; i++){
     buttons[i].style.display = "none";
  }
}

function cancel_weld() {
    //document.getElementById('weld_form').style.display ="none";
    document.getElementById('cancel_weld').style.display = "none";
    for(var i=0; i < buttons.length; i++){
       buttons[i].style.display = "inline";
    }
}

这是因为 buttons 是一个数组，其中包含具有style的元素。因此，您必须逐一检查它们才能更改它们

var buttons = [
  document.getElementById('go_back'),
  document.getElementById('line_opener'),
  document.getElementById('high_opener'),
  document.getElementById('weld_opener'),
  document.getElementById('mtr_opener'),
  document.getElementById('pli_opener'),
  document.getElementById('print'),
  document.getElementById('pliInfo')
];

function weld_form_show() {
  //document.getElementById('weld_form').style.display="inline";
  document.getElementById('cancel_weld').style.display = "inline";
  for(var i=0; i < buttons.length; i++){
     buttons[i].style.display = "none";
  }
}

function cancel_weld() {
    //document.getElementById('weld_form').style.display ="none";
    document.getElementById('cancel_weld').style.display = "none";
    for(var i=0; i < buttons.length; i++){
       buttons[i].style.display = "inline";
    }
}

button {

  border: none;

  display: inline;

  background: #f5f5f5;

  background-image: -webkit-linear-gradient(top, #f5f5f5, #d6d6d6);

  background-image: -moz-linear-gradient(top, #f5f5f5, #d6d6d6);

  background-image: -ms-linear-gradient(top, #f5f5f5, #d6d6d6);

  background-image: -o-linear-gradient(top, #f5f5f5, #d6d6d6);

  background-image: linear-gradient(to bottom, #f5f5f5, #d6d6d6);

  font-weight: bold;

  color: black;

  font-size: 10px;

  padding: 0px 10px 0px 10px;

  height: 25px;

  text-decoration: none;

  cursor: pointer;

}

button:hover {

  background: #b8b8b8;

  background-image: -webkit-linear-gradient(top, #b8b8b8, #7a7a7a);

  background-image: -moz-linear-gradient(top, #b8b8b8, #7a7a7a);

  background-image: -ms-linear-gradient(top, #b8b8b8, #7a7a7a);

  background-image: -o-linear-gradient(top, #b8b8b8, #7a7a7a);

  background-image: linear-gradient(to bottom, #b8b8b8, #7a7a7a);

  text-decoration: none;

}

.cancel {

  display: none;

  background: #ff3333;

  background-image: -webkit-linear-gradient(top, #ff3333, #4a0000);

  background-image: -moz-linear-gradient(top, #ff3333, #4a0000);

  background-image: -ms-linear-gradient(top, #ff3333, #4a0000);

  background-image: -o-linear-gradient(top, #ff3333, #4a0000);

  background-image: linear-gradient(to bottom, #ff3333, #4a0000);

}

.cancel:hover {

  background-image: -webkit-linear-gradient(top, #1eff0a, #0e5200);

  background-image: -moz-linear-gradient(top, #1eff0a, #0e5200);

  background-image: -ms-linear-gradient(top, #1eff0a, #0e5200);

  background-image: -o-linear-gradient(top, #1eff0a, #0e5200);

  background-image: linear-gradient(to bottom, #1eff0a, #0e5200);

}

<table>
  <tr>
    <td>
      <button onclick="line_form_show()" id="line_opener">ADD LINE</button>
    </td>
    <td>
      <button onclick="high_form_show()" id="high_opener">HIGHLIGHT</button>
    </td>
    <td>
      <button onclick="weld_form_show()" id="weld_opener">ADD WELD</button>
      <button class="cancel" onclick="cancel_weld()" id="cancel_weld">CANCEL</button>
      <button class="cancel" onclick="cancel_pli()" id="cancel_pli">CANCEL</button>
      <button class="cancel" onclick="cancel_mtr()" id="cancel_mtr">CANCEL</button>
    </td>
    <td>
      <button onclick="mtr_form_show()" id="mtr_opener">ADD MTR</button>
    </td>
  </tr>
</table>