javascript - 用 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/