html - How to hide Button in Javascript? - Stack Overflow

admin管理员组

文章数量:1315961

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.

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

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.

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

• javascript
• html
• button

Share Improve this question Follow edited Aug 21, 2015 at 18:36 Lal 14.8k44 gold badges4848 silver badges7272 bronze badges asked Aug 21, 2015 at 18:20 andyduly98andyduly98 8933 gold badges44 silver badges99 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

2 issues in your code

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

style is property of the element and not the 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

<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

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

See this fiddle

To hide an element using Javscript, try something like

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

So replace your <script> as below

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

There are many errors in your Javascript and HTML

Edited Javascript

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

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

You forgot to add () to your myFunctionHide in your Javascript.

Also, the edited HTML would be

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

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

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

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

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

本文标签： htmlHow to hide Button in JavascriptStack Overflow