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>

AmmarCSE · Accepted Answer · 2015-06-07 13:19:43Z

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>

That would explain "Uncaught TypeError: Cannot set property 'display' of undefined"
@Larry, dont forget to mark an answer as accepted by clicking the checkmark next to the answer. This will guide future readers of this post

doldt · Accepted Answer · 2015-06-07 13:21:54Z

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.

edited Jun 7, 2015 at 13:21

answered Jun 7, 2015 at 13:16

doldt

4,5063 gold badges24 silver badges36 bronze badges

1 Comment

doldt Over a year ago

(Do see AmmarCSE's answer for an imperative solution, here I was just trying to explain why your intuition is not directly applicable in this case.)

Collectives™ on Stack Overflow

JAVASCRIPT array of actual HTML elements

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related