Uncaught TypeError: Cannot set property 'innerHTML' of null when setting innerhtml for hiddenfield

Question

im am trying to set the value for a hiddenfield with a bootstrap radio button. I have an onCLick evnet on it and when it is clicked the value of the hiddenfield needs to be changed. Here is the buttons and the hiddenfield.

<div class="myRow">
        <div class="smallCol">
            <div class="myRow">
                <div class="smallCol title">
                    <asp:Label ID="lblNewRFID" runat="server" Text="RFID etiketcode"></asp:Label>
                </div>
            </div>
            <div class="myRow">
                <div class="smallCol">
                    <div class="btn-group hiddenRFIDValue" data-toggle="buttons">
                        <label class="btn btn-default">
                            <input type="radio" class="btn" name="options" onclick="getHiddenRFIDValue('Always')" id="alwaysRFID" value="Always" autocomplete="off">
                            Always
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" class="btn" name="options" onclick="getHiddenRFIDValue('Never')" id="neverRFID" value="Never" autocomplete="off">
                            Never
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" class="btn" name="options" onclick="getHiddenRFIDValue('Sometimes')" id="sometimesRFID" value="Sometimes" autocomplete="off">
                            Sometimes
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <asp:HiddenField ID="hiddenRFIDValue" runat="server" />

and here is the script.

<script type="text/javascript">
   onclick = function getHiddenRFIDValue(stringValue) {
       document.getElementById('hiddenRFIDValue').innerHTML = stringValue;
    }
</script>

Do any of you have an idear why i get the error?

Answer 1

You must remove "onclick" variable, only

function getHiddenRFIDValue(stringValue) {
       document.getElementById('hiddenRFIDValue').innerHTML = stringValue;
    }

and

<asp:HiddenField ID="hiddenRFIDValue" runat="server" />

try replace on

<input type="hidden" ID="hiddenRFIDValue" runat="server" />

Answer 2

I fixed it with this.

<script>
    $(".hiddenRFIDValue .btn").click(function () {
        $("#MainContent_hiddenRFIDValue").val($(this).text());
    });
</script>

When the HTML was generated it changed the id of the hidden field

Answer 3

It's working fine If you just ommit onclick from function like

function getHiddenRFIDValue(stringValue) {
   document.getElementById('hiddenRFIDValue').innerHTML = stringValue;
}

Jsfiddle