HTML 输入显示不随 javascript 改变答案

【问题标题】：HTML Input display not changing with javascriptHTML 输入显示不随 javascript 改变
【发布时间】：2018-08-17 03:30:22
【问题描述】：

我讨厌用这个问题打败一匹死马，但我没有运气让两个 HTML Input 元素在选中复选框时显示。我在这里浏览了与此问题相关的多个页面，最后一个页面是How To Show And Hide Input Fields Based On Radio Button Selection。这是代码

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

    }
}

我可以从警报中看到复选框正在调用该函数，但显示值没有改变。这是小提琴页面http://jsfiddle.net/352hjrwo/12/

我错过了什么？

【问题讨论】：

尝试让 style.display = 'block' 而不是 'normal'
没有正常显示。尝试改用initial。
用display: normal代替display: block
显示值：developer.mozilla.org/en-US/docs/Web/CSS/display
谢谢大家的回答。如此简单的事情往往会被忽略。我从正常变为阻塞，一切正常。

标签： javascript html

【解决方案1】：

将normal 更改为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>

【讨论】：

【解决方案2】：

如果你使用 display = block 就可以了。

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

        }

}

【讨论】：

【解决方案3】：

只需将普通替换为块。显示属性没有正常值。

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>

【讨论】：