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

This code works perfectly .. But when i click on the button it shows the message box along with the button 'Hide Layer' .. i want my message box to replace the button 'hide layer' n display in it's place..

Answer 1

If you want to render message box only.Please refers following steps-

step 1- Add following code into the HTML file

<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>

step 2- add following code to the css

div {
    display: none;
}

To check example please refer this link- https://jsfiddle.net/yndyn8vj/

Answer 2

You should do something like this.

HTML

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

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

CSS - nothing

Javascript

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

Hope it helps. Marco.