javascript 如何在Javascript中隐藏按钮？

How to hide Button in Javascript?

提问by andyduly98

I'm trying to make a button that shows text and another that removes it, this is what I have done so far.

我正在尝试制作一个显示文本的按钮和另一个删除它的按钮，这是我迄今为止所做的。

When i click the Click me! button text shows, but it won't disappear when i click the hide button and i don't know why.

当我点击 Click me! 按钮文本显示，但当我单击隐藏按钮时它不会消失，我不知道为什么。

<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide">Hide</button>
</div>
<p id="test"></p>

<script = "text/javascript">
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
</script>
<script = "text/javascript">
function myFunctionHide {
document.getElementById("test").innerHTML.object.style.display == "none";
}

</script>

回答by Sushanth --

2 issues in your code

代码中有 2 个问题

<button type="button" onclick="myFunctionHide">Hide</button>

should be

应该

<button type="button" onclick="myFunctionHide()">Hide</button>

---

---

function myFunctionHide {
   document.getElementById("test").innerHTML.object.style.display == "none";
}

should be

应该

    function myFunctionHide() {
       document.getElementById("test").style.display = "none";
    }

styleis property of the elementand not the innerHTML.object

style是的财产，element而不是innerHTML.object

Also it is a better idea to avoid inline event handlers, which keeps your HTML cleaner also adhering to separation of concerns which makes your code more maintainable.

此外，避免使用内联事件处理程序也是一个更好的主意，这样可以使您的 HTML 更干净，同时也遵守关注点分离，从而使您的代码更易于维护。

HTML

HTML

<div class="butt">
    <button type="button" id="btn_click">Click Me!</button>
    <button type="button" id="btn_hide">Hide</button>
</div>
<p id="test"></p>

JS

JS

var elemTest = document.getElementById('test');

document.getElementById('btn_click').addEventListener('click', function () {
    elemTest.innerHTML = "Andyduly";
});

document.getElementById('btn_hide').addEventListener('click', function () {
    elemTest.style.display = "none";
});

You can encase your whole code inside a single script tag.

您可以将整个代码封装在单个脚本标记中。

Check Fiddle

检查小提琴

回答by Lal

See this fiddle

看到这个小提琴

To hide an element using Javscript, try something like

要使用 Javscript 隐藏元素，请尝试类似

 document.getElementById('test').style.display = 'none';

So replace your <script>as below

所以替换你<script>的如下

<script = "text/javascript">
    function myFunctionHide() {
    document.getElementById("test").style.display = 'none';
}
</script>

There are many errors in your Javascript and HTML

您的 Javascript 和 HTML 中有很多错误

Edited Javascript

已编辑的 Javascript

function myFunction() {
    document.getElementById("test").innerHTML = "Andyduly";
}

function myFunctionHide() {
    document.getElementById("test").style.display = "none";
}

You forgot to add ()to your myFunctionHidein your Javascript.

你忘了添加()到您myFunctionHide在你的JavaScript。

Also, the edited HTMLwould be

此外，编辑后的 ​​HTML将是

<div class="butt">
    <button type="button" onclick="myFunction()">Click Me!</button>
    <button type="button" onclick="myFunctionHide()">Hide</button>
</div>
<p id="test"></p>

回答by nikima

Well, first of all you syntax doesn't look right, should be

好吧，首先你的语法看起来不对，应该是

function myFunctionHide() {
   document.getElementById('test').style.display = 'none';
}

回答by ashokd

Try this one, I'm clearing the text from "test" P tag.

试试这个，我正在清除“测试”P 标签中的文本。

<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide()">Hide</button>
</div>
<p id="test"></p>

<script = "text/javascript">
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
</script>
<script = "text/javascript">
function myFunctionHide() {
document.getElementById("test").innerHTML = "";
}

</script>