CODEWITHSUNDEEP
javascript
harry
harry

Reputation: 39

how to hide and show text using buttons?

<html>
<head>
<title></title>
<script>
function hide(Id){
    var txt = document.getElementsByName("txt");
    var button = document.getElementsByName("btnName");
    for(var i = 0; i<button.length;i++){
        if(Id == button[i].id)
        {
            alert(button[i].id);
        document.getElementById(txt[i].id).style.display = "none";
            }
        }

    }

function show(Id){
    var txt = document.getElementsByName("txt");
    var button = document.getElementsByName("btnName");
    for(var i = 0; i<button.length;i++){
        if(Id == button[i].id)
        { 
        alert(button[i].id);
            document.getElementById(txt[i].id).style.display = "block";

            }

        }

    }


</script>
</head>
<body>
<form  name="frmName">
<center>
<p id = "textOne" name = "txt">Table element Row1</p><br>
<p id = "textTwo" name = "txt">Table element Row2</p><br>
<p id = "textThree"  name= "txt">Table element Row3</p><br>
<p id = "textFour" name = "txt">Table element Row4</p><br>
Hide
<br><br/>
<button id = "buttonOne" name = "btnName"  onclick = "hide(this.id)">TR1</button> &nbsp
<button id = "buttonTwo" name = "btnName"  onclick = "hide(this.id)">TR2</button> &nbsp
<button id = "buttonThree" name = "btnName" onclick = "hide(this.id)">TR3</button> &nbsp
<button id = "buttonFour" name = "btnName" onclick = "hide(this.id)">TR4</button> &nbsp
<br><br/>
Show
<br><br/>
<button  id = "buttonOne" name = "btnNameHide" onclick = "show(this.id)">TR1</button> &nbsp
<button  id = "buttonTwo"  name = "btnNameHide" onclick = "show(this.id)">TR2</button> &nbsp
<button id = "buttonThree" name = "btnNameHide" onclick = "show(this.id)">TR3</button> &nbsp
<button  id = "buttonFour" name = "btnNameHide"  onclick = "show(this.id)">TR4</button> &nbsp
<br><br/>
</center>
</form>
</body>
</html>

Here i have 4 button to hide 4 text and another 4 button for showing the same 4 text. This code works but not meeting my needs. The text will be hided when i doubleclick the 4 buttons to hide. At the same time when i click any show button the hidden text will be displayed. I want to hide the text when corresponding hide button clicks and want to show when corresponding show button clicks.

Upvotes: 2

Views: 1156

Answers (1)

Mohammad Ali Rony
Mohammad Ali Rony

Reputation: 4905

Try to pass p(paragraph) id onclick event then hide or show 

function hide(Id){
    document.getElementById(Id).style.display = "none";
}

function show(Id){
 document.getElementById(Id).style.display = "block";
}
<center>
<p id = "textOne" name = "txt">Table element Row1</p><br>
<p id = "textTwo" name = "txt">Table element Row2</p><br>
<p id = "textThree"  name= "txt">Table element Row3</p><br>
<p id = "textFour" name = "txt">Table element Row4</p><br>
Hide
<br><br/>
<button id = "buttonOne" name = "btnName"  onclick = "hide('textOne')">TR1</button> &nbsp
<button id = "buttonTwo" name = "btnName"  onclick = "hide('textTwo')">TR2</button> &nbsp
<button id = "buttonThree" name = "btnName" onclick = "hide('textThree')">TR3</button> &nbsp
<button id = "buttonFour" name = "btnName" onclick = "hide('textFour')">TR4</button> &nbsp
<br><br/>
Show
<br><br/>
<button  id = "buttonOne" name = "btnNameHide" onclick = "show('textOne')">TR1</button> &nbsp
<button  id = "buttonTwo"  name = "btnNameHide" onclick = "show('textTwo')">TR2</button> &nbsp
<button id = "buttonThree" name = "btnNameHide" onclick = "show('textThree')">TR3</button> &nbsp
<button  id = "buttonFour" name = "btnNameHide"  onclick = "show('textFour')">TR4</button> &nbsp
<br><br/>
</center>

Upvotes: 1

Related Questions