显示或隐藏单击显示的信息答案

【问题标题】：Show or Hide information displayed by click显示或隐藏单击显示的信息
【发布时间】：2014-10-31 02:07:56
【问题描述】：

以下是我的代码。它由三个按钮和一个显示屏组成。

<html>
<head>
<script type="text/javascript">


</script>
</head>
<body>
<form name="fun" >
Display Screen<input type="textfield" name="ans" value="">
<br>
<input type="button" value="1" onClick="document.fun.ans.value+='1'">
<input type="button" value="hide">
<input type="button" value="show">


</form>
</body>
</html>

目前，当您按 1 时，它会在显示屏上显示 1。我想实现一个功能，这样如果您单击隐藏然后按 1，则不会显示任何内容。如果你按 show 并按 1，那么屏幕上会显示 1。

可能的方法是，如果您单击隐藏，则仅禁用 1 按钮，但我仍然希望用户能够在按下隐藏后单击该按钮，只是不显示任何内容。

我是 JS 新手，所以如果这是一个不好的问题，请原谅。

【问题讨论】：

看看我的回答，我想这就是你要找的……希望对你有帮助！
你的意思是如果已经点击了隐藏，它不应该在点击“1”时附加任何内容（如果已经点击了显示，则在点击“1”时附加1）？还是完全隐藏文本字段？

标签： javascript html

【解决方案1】：

我会将所有 js 包装在 <script> 中以便能够使用 var。

<script>
    var hide = 0;
    function appendChar(){
        if(hide==0){
            document.fun.ans.value+='1';
        }
    }

</script>

然后我们要修改html：

<input type="button" value="1" onClick="appendChar()">
<input type="button" value="hide" onclick="hide=1;">
<input type="button" value="show" onclick="hide=0;">

【讨论】：

【解决方案2】：

使用 javascript 显示和隐藏元素的示例：

<html>
<head>
<script type="text/javascript">


</script>
</head>
<body>
<form name="fun" >
Display Screen<input id="ans" type="textfield" name="ans" value="">
<br>
<input type="button" value="1" onClick="document.fun.ans.value='1'">
<input type="button" value="hide" onclick="hide()">
<input type="button" value="show" onclick="show()">

<script type="text/javascript">
function hide()
{
   document.getElementById("ans").style.display = "none";
}
function show()
{
   document.getElementById("ans").value = '';
   document.getElementById("ans").style.display = "inline-block";
}
</script>


</form>
</body>
</html>

【讨论】：