Why does my unCheckRadios function recall another function?

JavaScript
1

I have the weirdest thing with this code:


<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table {
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}
button {
    height: 20px;
    display: none;
}
a {
    text-decoration: underline;
}
.click-text {
    color: darkorange;
}
.click-text:hover {
    color: blue;
    cursor: pointer;
}
.elucidation-row {
    display: none;
}
.score-cell, .uncheck-cell {
    width: 100px;
}
</style>
<script>
function showAllItems() {
    var elRows = document.getElementsByClassName('elucidation-row');
    for (var p=0; p<elRows.length; p++) {
            elRows[p].style.display = 'table-row';
    }
}


function highlightItem(itemId,buttonId) {
    document.getElementById(itemId).style.backgroundColor = 'yellow';
    document.getElementById(buttonId).style.display = 'inline';
}


function unCheckRadios(name) {
      var radios = document.getElementsByName(name);
      for (var n=0; n<radios.length; n++) {
         radios[n].checked = false;
     }
}
</script>
</head>

<body>
<form action=""><!-- older IEs do weird things with a table with colspan and a form inside -->
    <table>
        <tbody>
            <tr>
                <td class="divider-thin" colspan="7"><a class="click-text" id="toggle-all" onclick="showAllItems()">Show all items</a></td>
            </tr>
            <tr class="elucidation-row section-A" id="A1a-row">
                <td class="item-cell">Item</td>
                <td class="uncheck-cell"><button id="A1a-button" onclick="unCheckRadios('A1a')">De-check</button></td>
                <td class="score-cell"><input type="radio" name="A1a" value="1" onclick="highlightItem('A1a-row','A1a-button')"></td>
                <td class="score-cell"><input type="radio" name="A1a" value="2" onclick="highlightItem('A1a-row','A1a-button')"></td>
                <td class="score-cell"><input type="radio" name="A1a" value="3" onclick="highlightItem('A1a-row','A1a-button')"></td>
                <td class="score-cell"><input type="radio" name="A1a" value="4" onclick="highlightItem('A1a-row','A1a-button')"></td>
                <td class="score-cell"><input type="radio" name="A1a" value="5" onclick="highlightItem('A1a-row','A1a-button')"></td>
            </tr>
        </tbody>
    </table>
    <p class="elucidation-row">Text line</p>
</form>
</body>
</html>

Open it, click ‘Show all items’, check a radio button, click the appearing ‘De-check’ button, and see that the whole table row is non-displayed again. It looks as if the unCheckRadios function recalls the executed showAllItems function. Why is that, and how do I solve it?

2

The main reason why your problem is happening, is that the button is submitting the form. Remove the onclick event from the button and you’ll see that the form is submitting as a GET action.

The cheapest way to fix that problem is to return false to the button. This can be done by returning a value from the onclick function:


<button ... onclick="return unCheckRadios('A1a')">

and return false from the unCheckRadios function:


function unCheckRadios(name) {
     ...
     return false;
}

Better solutions involve removing scripting from within the midst of your HTML content, and use context-awareness to have a function automatically affect only the fields in its row. Let me know if you want to learn more about such improvements, for they can prevent a lot of additional development time, and make maintenance much easier to perform.

3

Thanks a million, Paul!

Great answer – a quick fix and a more fundamental solution! And yes, I would be interested in that context awareness solution, because the questionnaire will contain some 70 questions/items. Which change every now and then.

4