How to hide Button in Javascript?

Question

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>

Solution 1

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

Solution 2

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>

Solution 3

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

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