Question

这是我的javascript代码：

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";
}

此代码用于隐藏和显示文本框以及PHP页面中的HTML代码，如下所示

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

根据设计，我已经放置了3个按钮，分配了相应的功能，但它似乎不起作用。它背后有任何技术原因吗？

Answer 1

您打算使用display:block;，而不是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";
}

另外，请从button中取出form，这样他们就不会尝试发送表单。此外，method='send'不是method，应该是GET或POST。

JavaScript无法隐藏和显示文本框

1 个答案: