JS: onclick event

by Alberto Naperi Jr.

HTML

<tr align="left" valign="middle">
    <td colspan="1" rowspan="1">
        <p>&nbsp;</p>
    </td>
    <td colspan="1" rowspan="1">
        <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p>
    </td>
    <td colspan="1" rowspan="1">
        <p>Do you own a Zaxwerks product?</p>
    </td>
    <td colspan="1" rowspan="1">
        <p><input id="customer" name="STATUS" onclick="test();" type="radio" value="Existing Customer" /> Yes<br />
            <input id="demo" name="STATUS" onclick="javascript: test();" type="radio" value="Downloaded Demo" /> No</p>
    </td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td colspan="1" rowspan="1" style="display: none;">
        <p>&nbsp;</p>
    </td>
    <td colspan="1" rowspan="1" style="display: none;">
        <div id="show_customer">
            <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p>
        </div>

        <div id="show_demo" style="display: none;">
            <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p>
        </div>
    </td>
    <td colspan="1" rowspan="1" style="display: none;">
        <div id="show_customer2">
            <p>Product Owned:</p>
        </div>

        <div id="show_demo2" >
            <p>Where did you hear about us?:</p>
        </div>
    </td>
    <!--This is where the user selects which product they own. (In the following code: value equals "what appears in the log file" what appears in the site menu)-->
    <td colspan="1" rowspan="1">
        <div id="show_customer3" style="display: none;">
            <p><select id="WHAT" name="WHAT" size="1">
                    <option selected="selected" value="">Select One</option>
                    <option value="Item 1">Item 1</option>
                    <option value="Item 2">Item 2</option>
                    <option value="Item 3">Item 3</option>
                    <option value="Item...

JavaScript

function test() {
    console.log('yes');
      if (document.getElementById('customer').checked) {
        //Show
        document.getElementById('show_customer').style.display = 'block';
        document.getElementById('show_customer2').style.display = 'block';
        document.getElementById('show_customer3').style.display = 'block';
        document.getElementById('show_customer4').style.display = 'block';

        //Hide
        document.getElementById('show_demo').style.display = 'none';
        document.getElementById('show_demo2').style.display = 'none';
        document.getElementById('show_demo3').style.display = 'none';
      } else {
        //Show
        document.getElementById('show_demo').style.display = 'block';
        document.getElementById('show_demo2').style.display = 'block';
        document.getElementById('show_demo3').style.display = 'block';

        //Hide
        document.getElementById('show_customer').style.display = 'none';
        document.getElementById('show_customer2').style.display = 'none';
        document.getElementById('show_customer3').style.display = 'none';
        document.getElementById('show_customer4').style.display = 'none';
      }
    }