HTML输入显示不随javascript更改
HTML输入显示不随javascript更改
提问于 2018-08-17 03:13:22
我不想在这个问题上白费口舌，但是当复选框被选中时，我没有任何运气让两个HTML输入元素显示出来。我已经在这里浏览了多个与这个问题相关的页面，最后一个是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/
我遗漏了什么？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-17 03:16:58
将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()" /> 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>
Stack Overflow用户
发布于 2018-08-17 03:17:40
如果使用display = block，就可以了。
HTML
<div>
<input type="checkbox" id="isevent" runat="server" class="rcorners" onchange="javascript:f1(this)" /> 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';
}}
Stack Overflow用户
发布于 2018-08-17 03:21:24
只需用块替换normal即可。Display属性没有正常值。
http://jsfiddle.net/352hjrwo/19/
<div>
<input type="checkbox" id="isevent" runat="server" class="rcorners" onclick="javascript:f1()" /> 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51883948
复制相关文章
相似问题