替换DIV

Question

的Javascript显示隐藏按钮：

<script> 
    function setVisibility(id) { 
     if (document.getElementById('bt1').value == 'Hide Layer') { 
      document.getElementById('bt1').value = 'Show Layer'; 
      document.getElementById(id).style.display = 'none'; 
     } else { 
      document.getElementById('bt1').value = 'Hide Layer'; 
      document.getElementById(id).style.display = 'inline'; 

     } 
    } 
</script> 

CSS

div { 
    display: none; 
} 

HTML

<input type=button name=type id='bt1' value='Show Layer' onClick="setVisibility('sub3');";> 

<div id="sub3">Message Box</div> 

此代码的工作完美。但是，当我点击按钮就说明消息框以及“隐藏层”按钮..我想让我的消息框替换按钮'hide layer'n显示在它的位置..

Answer 1

如果你想渲染消息框only.Please是指以下步骤 -

1步 - 添加以下代码到HTML文件

<input type=button name=type id='bt1' value='Show Layer' onClick="setVisibility('sub3');";> 

<div id="sub3">Message Box</div> 

<script> 
    function setVisibility(id) { 
     if (document.getElementById('bt1').value == 'Show Layer') { 
      document.getElementById(id).style.display = 'inline'; 
      //above statement will show message box. 
      document.getElementById('bt1').style.display = 'none'; 
      //above statement will hide 'Show layer' button. 
     } 
    } 
</script> 

第2步 - 添加以下代码到CSS

div { 
    display: none; 
} 

要检查例如请参考此链路https://jsfiddle.net/yndyn8vj/

Answer 2

你应该这样做。

HTML

<input type=button name=type id='bt1' value='Show Layer' onClick="setVisibility('sub3');";> 

<div id="sub3" style="display:none">Message Box</div> 

CSS - 什么

的Javascript

<script> 
    function setVisibility(id) { 
    var el = document.getElementById(id); 
    el.style.display = (el.style.display != 'none' ? 'none' : ''); 
    } 
</script> 

希望它能帮助。 Marco。