Hide or show table based on input values

http://stackoverflow.com/questions/22696953/how-to-disable-a-table-if-two-values-are-equal/

by hibbard_eu

HTML

<table id="tablecoursedistribution">
    <tr>
        <th>Info Header 1</th>
        <th>Info Header 2</th>
        <th>Info Header 3</th>
    </tr>
    <tr>
        <td>Text 1A</td>
        <td>Text 1B</td>
        <td>Text 1C</td>
    </tr>
    <tr>
        <td>Text 2A</td>
        <td>Text 2B</td>
        <td>Text 2C</td>
    </tr>
</table>

<label for="totalacceptedload">Total:</label>
<input type="text" id ="totalacceptedload" />

<label for="maximumload">Maximum:</label>
<input type="text" id ="maximumload" />

<button id="check">checkEnableTable</button>

CSS

table {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}
table th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}

input{
    width: 50px;
    margin: 15px 15px 0 0;
}

JavaScript

function checkEnableTable() {
    tablecoursedistribution.style.visibility = (totalacceptedload.value == maximumload.value) ? "hidden" : "visible"
}

var totalacceptedload = document.getElementById('totalacceptedload'),
    maximumload = document.getElementById('maximumload'),
    tablecoursedistribution = document.getElementById('tablecoursedistribution'),
    button = document.getElementById('check');

button.onclick = checkEnableTable;