2

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>

4 Answers 4

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

Sign up to request clarification or add additional context in comments.

Comments

1

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>

Comments

1

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

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

Comments

0

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>

1 Comment

Corrected the answer. Thanks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.