HTML Input display not changing with javascript

Question

I hate to beat a dead horse with this question but I am not having any luck getting two HTML Input elements to show when a checkbox is checked. I have been through multiple pages on here related to this issue with the last one being How To Show And Hide Input Fields Based On Radio Button Selection. Here is the code

function f1() {
    var mycheck = document.getElementById("isevent").checked;
    var myevent = document.getElementById("eventname");
    var mycampaign = document.getElementById("campaign");

    if (mycheck === true) {

        myevent.style.display = 'normal';
        mycampaign.style.display = 'normal';
        alert("Myevent's visibility is " + myevent.style.display);

    } else {
        myevent.style.display = 'none';
        mycampaign.style.display = 'none';

    }
}

I can see from the alert that the function is being called by the checkbox but the display value doesn't change. Here is the fiddle page http://jsfiddle.net/352hjrwo/12/

What am I missing?

There's no such display as normal. Try using `initial` instead. — Michał Drabik, Aug 16 '18 at 19:16
Display values: https://developer.mozilla.org/en-US/docs/Web/CSS/display — epascarello, Aug 16 '18 at 19:39
Thank you all for the answers. Such simple things often get looked over. I changed from normal to block and everything is working as it should. — Dale Rekow, Aug 16 '18 at 19:47

score 1 · Accepted Answer · answered Aug 16 '18 at 19:16

Change normal to block ;)

function f1() {
            var mycheck = document.getElementById("isevent").checked;
            var myevent = document.getElementById("eventname");
            var mycampaign = document.getElementById("campaign");
            
            if (mycheck === true) {
              
                    myevent.style.display = 'block';
                    mycampaign.style.display = 'block';
                alert("Myevent's visibility is " + myevent.style.display);

            } else {
                    myevent.style.display = 'none';
                    mycampaign.style.display = 'none';

            }
}

<div>
<input type="checkbox" id="isevent" runat="server" class="rcorners" onclick="javascript:f1()" />&nbsp;Staffed Event?
</div>
<div>
<input type="text" id="eventname" class="rcorners input" runat="server" placeholder="Event Name" style="display:none;" maxlength="128" />
</div>
<div>
<input type="text" id="campaign" runat="server" class="rcorners input" placeholder="Campaign" maxlength="64" style="display:none;" />
</div>

score 1 · Answer 2 · answered Aug 16 '18 at 19:17

If you use display = block you would be fine.

HTML

<div>
<input type="checkbox" id="isevent" runat="server" class="rcorners" onchange="javascript:f1(this)" />&nbsp;Staffed Event?
</div>
<div>
<input type="text" id="eventname" class="rcorners input" runat="server" placeholder="Event Name" style="display:none;" maxlength="128" />
</div>
<div>
<input type="text" id="campaign" runat="server" class="rcorners input" placeholder="Campaign" maxlength="64" style="display:none;" />
</div>

Javascript

    function f1(element) {
        var myevent = document.getElementById("eventname");
        var mycampaign = document.getElementById("campaign");

        if (element.checked) {

                myevent.style.display = 'block';
                mycampaign.style.display = 'block';
                    alert("Myevent's visibility is " + myevent.style.display);

        } else {
                myevent.style.display = 'none';
                mycampaign.style.display = 'none';

        }

}

score 1 · Answer 3 · answered Aug 16 '18 at 19:21

Just replace normal with block. Display property doesn't have normal value.

http://jsfiddle.net/352hjrwo/19/

<div>
<input type="checkbox" id="isevent" runat="server" class="rcorners" onclick="javascript:f1()" />&nbsp;Staffed Event?
</div>
<div>
<input type="text" id="eventname" class="rcorners input" runat="server" placeholder="Event Name" style="display:none;" maxlength="128" />
</div>
<div>
<input type="text" id="campaign" runat="server" class="rcorners input" placeholder="Campaign" maxlength="64" style="display:none;" />
</div>
<script type="text/javascript">
        function f1() {
            var mycheck = document.getElementById("isevent").checked;
            var myevent = document.getElementById("eventname");
            var mycampaign = document.getElementById("campaign");

            if (mycheck === true) {

                    myevent.style.display = 'block';
                    mycampaign.style.display = 'block';
                alert("Myevent's visibility is " + myevent.style.display);

            } else {
                    myevent.style.display = 'none';
                    mycampaign.style.display = 'none';

            }
}
</script>

HTML Input display not changing with javascript

3 Answers3