将显示隐藏按钮替换为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>

该代码可以正常工作..但是，当我单击按钮时，它显示消息框以及按钮“隐藏层” ..我希望消息框替换按钮“隐藏层”，而不是在其位置显示。

Answer 1

如果只想渲染消息框，请参考以下步骤：

步骤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-没有

Java脚本

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

希望能帮助到你。 马可