JAVASCRIPT array of actual HTML elements

Question

I am trying to include javascript into a form app that collects construction data from the field. I have googled the crap out of this but I cannot figure out if it is legal to save an html element in an array(Or if my syntax is right).

The desired result is to click the "ADD WELD" button and then show the form and cancel button while hiding all other buttons and forms on the page.

The below code does not work and I am probably going about this the wrong way.

 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

Almost there, but you need to iterate over buttons like

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";
    }
}

This is because buttons is an array which contains the elements that have style . Therefore, you will have to go through them one-by-one to change them

 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> 

Answer 2

You're taking a very declarative approach to this, which is not bad per se, but is not how javascript and DOM manipulation work :)

See, when you type:

buttons.style.display = "none";

You mean "every button should be hidden" . How it is interpreted though, is this: "the buttons array's style attribute's display attribute should be set to none" . Sadly, arrays don't have a style attribute in the first place, and even if they did, setting an attribute of an array would be just that - something associated with the array, and not with the elements of the array.

You're in luck though, because a lot of JS libraries, such as the very popular jQuery do follow your declarative intuition, and make sense of assigning styles to entire collections. In jQuery, you can write the following:

buttonCollection.hide();

(or other means too to achieve the same effect) That said, the very creation of that buttonCollection would need basically different syntax too if you were using jquery.