display：none无法处理按钮单击事件 [英] display:none not working on button click event
本文介绍了display：none无法处理按钮单击事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript" >
// This function handles style and display changes for each next button click
function handleWizardNext() {
var chkConnType;
if (document.getElementById('ButtonNext').name == 'Step2')
{
// Change the button name - we use this to keep track of which step to display on a click
// DeviceNameTextBox
document.getElementById('ButtonNext').name = 'Step3';
document.getElementById('ButtonPrevious').name = 'Step1';
// Set new step to display and turn off display of current step
document.getElementById('Step1').style.display = 'none';
document.getElementById('Step2').style.display = '';
// Change background color on header to highlight new step
document.getElementById('HeaderTableStep2').style.backgroundColor = '#EA8511';
document.getElementById('HeaderTableStep1').style.backgroundColor = '#8CC63F';
document.getElementById('fstep1').style.display = 'none';
document.getElementById('ffstep1').style.display = 'none';
document.getElementById('fstep2').style.display = 'block';
document.getElementById('ffstep2').style.display = 'block';
}
}
</script>
<<div style=" position:fixed; top:150px; width:600px; height:400px; left: 488px;">
<div id="fstep1" style="position:fixed; top:177px; width:538px; height:25px; background-color:khaki; left: 506px;" >
<td id="HeaderTableStep1" style="position:fixed; top:177px; width:500px;height:25px; background-color:khaki; left: 506px;background-color:#EA8511; color:White; font-size:larger; height:60px;">Step 1: Select Location </td>
</div>
<div id="ffstep1" style=" position:fixed; top:209px; width:536px; height:301px; left: 508px;">
</br>
</br>
WEL-COME TO ADD NEW WIZARD!
</br>
</br>
Branch where you want to add new device <td id="newbranch;"> <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="Branch_name"></asp:DropDownList></td><asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ems_db1ConnectionString %>" SelectCommand="SELECT [Branch_name] FROM [master]"></asp:SqlDataSource>
</br>
</br>
</div>
<div id="fstep2" style="display:none; position:fixed; top:177px; width:538px; height:25px; background-color:khaki; left: 506px;" >
<td id="HeaderTableStep2" style="position:fixed; top:177px; width:500px;height:25px; background-color:khaki; left: 506px;background-color:#EA8511; color:White; font-size:larger; height:60px;">Step 2:Select Device Type </td>
</div>
<div id="ffstep2" style="display:none; position:fixed; top:209px; width:536px; height:301px; left: 508px;">
</br>
</br>
Select Device Type:
</br>
</br>
<div style=" position:fixed; overflow:scroll;height:301px;width:536px; ">
<asp:TreeView ID="TreeView1" runat="server" ImageSet="BulletedList3" Width="439px" Font-Names="Times New Roman"
HoverNodeStyle-BackColor="#04B14B" HoverNodeStyle-ForeColor="White"
RootNodeStyle-ForeColor="Black"
ParentNodeStyle-ForeColor="#A92159"
NodeStyle-ForeColor="Brown"
LeafNodeStyle-ForeColor="#04B14B"
SelectedNodeStyle-BackColor="DeepSkyBlue" SelectedNodeStyle-ForeColor="White" Font-Size="14px" ExpandDepth="0" >
</asp:TreeView>
</div>
</div>
<input id="ButtonNext" type="button" style="height:40px; width:80px" value="Next" name="Step2" onclick="handleWizardNext()" />
</div>
推荐答案
ConnectionStrings：ems_db1ConnectionString ％> SelectCommand = SELECT [Branch_name] FROM [master] > < / asp：SqlDataSource >
< / br >
< / br >
< / div >
< div id = < span class =code-keyword> fstep2 style = display：none;位置是：固定;顶：177px;宽度：538px;高度：25像素;背景色：卡其; left：506px; >
< td id = HeaderTableStep2 < span class =code-attribute> style = position：fixed;顶：177px;宽度：500像素;高度：25像素;背景色：卡其; left：506px; background-color：＃EA8511;白颜色;字体大小：大;高度：60px; > 步骤2：选择设备类型< / td >
< / div >
< ; div id < span class =code-keyword> = ffstep2 style = display：none;位置是：固定;顶：209px;宽度：536px;高度：301px; left：508px; >
< / br >
< / br >
选择设备类型：
< / br >
< / br >
< div style = position：fixed;溢出：滚动;高度：301px;宽度：536px; >
< asp：TreeView ID = TreeView1 runat = server ImageSet = BulletedList3 宽度 = 439px 字体名称 = Times New Roman
< span class =code-attribute> HoverNodeStyle-BackColor = ＃04B14B HoverNodeStyle-ForeColor = 白色
< span class =code-attribute> RootNodeStyle-ForeColor=\"Black\"
ParentNodeStyle-ForeColor=\"#A92159\"
< span class =code-attribute> NodeStyle-ForeColor=\"Brown\"
LeafNodeStyle-ForeColor=\"#04B14B\"
< span class =code-attribute> < span class =code-attribute>SelectedNodeStyle-BackColor=\"DeepSkyBlue\" SelectedNodeStyle-ForeColor=\"White\" Font-Size=\"14px\" ExpandDepth=\"0\" >
</asp:TreeView>
</div>
</div>
<input id=\"ButtonNext\" type=\"button\" style=\"height:40px; width:80px\" value=\"Next\" name=\"Step2\" onclick=\"handleWizardNext()\" />
</div>
ConnectionStrings:ems_db1ConnectionString %>" SelectCommand="SELECT [Branch_name] FROM [master]"></asp:SqlDataSource> </br> </br> </div> <div id="fstep2" style="display:none; position:fixed; top:177px; width:538px; height:25px; background-color:khaki; left: 506px;" > <td id="HeaderTableStep2" style="position:fixed; top:177px; width:500px;height:25px; background-color:khaki; left: 506px;background-color:#EA8511; color:White; font-size:larger; height:60px;">Step 2:Select Device Type </td> </div> <div id="ffstep2" style="display:none; position:fixed; top:209px; width:536px; height:301px; left: 508px;"> </br> </br> Select Device Type: </br> </br> <div style=" position:fixed; overflow:scroll;height:301px;width:536px; "> <asp:TreeView ID="TreeView1" runat="server" ImageSet="BulletedList3" Width="439px" Font-Names="Times New Roman" HoverNodeStyle-BackColor="#04B14B" HoverNodeStyle-ForeColor="White" RootNodeStyle-ForeColor="Black" ParentNodeStyle-ForeColor="#A92159" NodeStyle-ForeColor="Brown" LeafNodeStyle-ForeColor="#04B14B" SelectedNodeStyle-BackColor="DeepSkyBlue" SelectedNodeStyle-ForeColor="White" Font-Size="14px" ExpandDepth="0" > </asp:TreeView> </div> </div> <input id="ButtonNext" type="button" style="height:40px; width:80px" value="Next" name="Step2" onclick="handleWizardNext()" /> </div>
The Ids might not be the same which you are using in JavaScript, my 2 cents!!! Check it out.
Just inspect the elements in browser and see what are the Ids.
The Ids might not be the same which you are using in JavaScript, my 2 cents!!! Check it out.
Just inspect the elements in browser and see what are the Ids.
document.getElementB yId(’<%=Page.Master.FindControl(\"ContentPlaceHolder1\").FindControl(\"fstep1\").ClientID %>’).style.display=’none’;
document.getElementById('<%=Page.Master.FindControl("ContentPlaceHolder1").FindControl("fstep1").ClientID %>').style.display='none';
这篇关于display：none无法处理按钮单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
