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>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>