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. — Michal D
– Michal D, Commented Aug 16, 2018 at 19:16
Display values: developer.mozilla.org/en-US/docs/Web/CSS/display — epascarello
– epascarello, Commented Aug 16, 2018 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
– Dale Rekow, Commented Aug 16, 2018 at 19:47

Double M · Accepted Answer · 2018-08-16 19:16:58Z

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>

Ji_in_coding · Accepted Answer · 2018-08-16 19:17:40Z

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';

        }

}

Amit · Accepted Answer · 2018-08-16 19:21:23Z

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>

Collectives™ on Stack Overflow

HTML Input display not changing with javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related