CODEWITHSUNDEEP
javascripthtmlbutton
andyduly98
andyduly98

Reputation: 89

How to hide Button in Javascript?

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>

Upvotes: 2

Views: 17230

Answers (4)

ashokd
ashokd

Reputation: 393

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>

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

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

Upvotes: 2

nikima
nikima

Reputation: 11

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

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

Upvotes: 1

Lal
Lal

Reputation: 14810

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>

Upvotes: 1

Related Questions