CODEWITHSUNDEEP
javascriptphphtmlcss
abhishek bagul
abhishek bagul

Reputation: 263

JavaScript not working for hiding and showing of textboxes

here is my javascript code:

function htmlshw(){
    document.getElementById('ht').style.display = "visible";
    document.getElementById('jq').style.display = "none";
    document.getElementById('sc').style.display = "none";
}

function jqshw(){
    document.getElementById('ht').style.display = "none";
    document.getElementById('jq').style.display = "visible";
    document.getElementById('sc').style.display = "none";
}

function csshw(){
    document.getElementById('ht').style.display = "none";
    document.getElementById('jq').style.display = "none";
    document.getElementById('sc').style.display = "visible";
}

This code is to hide and show the textboxes along with I have a HTML code in PHP page as below

<body>
<img src="/code.png" id="flip" onclick="showbox()" style="left: 0px; top: 20%; position: fixed; z-index: 99999;"></img>
<section id="codebox" >
<form action="/code.php" method="send" >
<table>
<tr>
<button onclick="javascript:htmlshw()">HTML</button>
<button onclick="javascript:csshw()">CSS</button>
<button onclick="javascript:jqshw()">JS</button>
</tr>
<tr class="c">
    <section id="ht" class='hm'style="display: block;"> 
    <textarea type="text" name="HTML" ><?php echo $_REQUEST['HTML']; ?></textarea>
    </section>
</tr>
<tr class="c">
    <section id="sc" class='cs' style="display: none;"> 
    <textarea type="text" name="CSS" ><?php echo $_REQUEST['CSS']; ?></textarea>
    </section>
</tr>
<tr class="c">
    <section id="jq" class='jq' style="display: none;"> 
    <textarea type="text" name="JS" ><?php echo $_REQUEST['JS']; ?></textarea>
    </section>
</tr>
    <input type="submit" value="Compile" style="position: fixed; right: 0px; top: 10px; z-index: 999999; "></input>
</table>
</form>
</section>

<section id="result">
<?php echo $_REQUEST['HTML']; ?>
</section>

</body>

According to design, I have placed the 3 buttons with assigning respective functions but it won't seems to be working. Is there any technical reason behind it?

Upvotes: 1

Views: 242

Answers (1)

Albzi
Albzi

Reputation: 15609

You're meant to be using display:block;, not visible.

JSFiddle

<button onclick="javascript:htmlshw();">HTML</button>
<button onclick="javascript:jqshw();">JavaScript</button>
<button onclick="javascript:csshw();">CSS</button>

<section id="ht" class='hm'style="display: visible;">
    <textarea type="text" name="HTML" ><?php echo $_REQUEST['HTML']; ?></textarea>
</section>

</tr> 
<tr class="c">
    <section id="sc" class='cs' style="display: none;">

        <textarea type="text" name="CSS" ><?php echo $_REQUEST['CSS']; ?></textarea>
    </section>
</tr>
<tr class="c">
    <section id="jq" class='jq' style="display: none;">

        <textarea type="text" name="JS" ><?php echo $_REQUEST['JS']; ?></textarea>
    </section>

function htmlshw(){
    document.getElementById('ht').style.display = "block";
    document.getElementById('jq').style.display = "none";
    document.getElementById('sc').style.display = "none";
}

function jqshw(){
    document.getElementById('ht').style.display = "none";
    document.getElementById('jq').style.display = "block";
    document.getElementById('sc').style.display = "none";
}

function csshw(){
    document.getElementById('ht').style.display = "none";
    document.getElementById('jq').style.display = "none";
    document.getElementById('sc').style.display = "block";
}

Also, take your button's out of your form so that they don't try and send the form. Also, method='send' isn't a proper method, it should be GET or POST.

Upvotes: 3

Related Questions