Show & Hide an element after click

Question

What i want to do is simple. When i click the image, i want some message to appear. Afterwards, when i click it again i want it to disappear. I have problems iplementing it due to my lack of jQuery knowledge. I would appreciate some help with the following code, as well as some other implementations. I know i can do something with class="hidden" and have jQuery add/remove it but oh well.

This is what i'm trying to work with.

<!DOCTYPE html>
<html>
<head>
<script>

function greet(){
    a = document.getElementById('here');

    if (a.trim().length==0){
        a.innerHTML = 'message!';
    }
        else{
        a.innerHTML = '';

    }

</script>
</head>
<body>

<img src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt" onclick="greet()"/>
<p id='here'></p> 
</body>
</html>

EDIT: seems like i should use a.value, but i must be doing something else wrong too.

You can't `trim()` an object, you can trim it's value – Dhaval Marthak Apr 25 '14 at 16:48 — Dhaval Marthak, Apr 25 '14 at 16:48

score 2 · Answer 1 · edited May 23 '17 at 11:57

2

If you are using jQuery it is very simple; just use this as your JavaScript (don't forget to link the jQuery main library - I like the Google CDN for that). Just use the toggle function:

function greet() {
    $('#here').toggle();
}

Also it is better to register the onClick through jQuery rather than your html (for examplesee this SO question). So that would be like this for the whole page instead :

<!DOCTYPE html>
<html>
<head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document).ready(function() {
    $("#greet").click(
        function () { 
            $('#here').toggle();
        }
    );

    $("#here").hide();    
}
</script>
</head>
<body>

<img id="greet" src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt"/>
<p id='here'><!--MESSAGE SHOULD BE HERE--></p> 
</body>
</html>

Working example in jsFiddle.

edited May 23 '17 at 11:57

Community

1
1

answered Apr 25 '14 at 16:49

Nick Dickinson-Wilde

1,015
2
15
21

1

Thanks for your help. Although i can't understand where should my message be included. I guess it should be in the
element, which would mean that it will be visible at first.
– Rentonie Apr 25 '14 at 17:00
oh yes of course - I'll edit that to make it clear and initially hide it. – Nick Dickinson-Wilde Apr 25 '14 at 17:04
Thanks for your time and effort. It does not seem to work on chrome though even by correcting $("greet). Anyway, thanks for your help. – Rentonie Apr 25 '14 at 17:08
@Rentonie It sure should work - at least it does according to my head and just in case I just ran it in [a jsFiddle just to prove that it does work](http://jsfiddle.net/7dmG7/) and yep it works fine. Do you have any error messages? – Nick Dickinson-Wilde Apr 25 '14 at 17:13
I literaly have no idea. This is what i try to run [link](http://pastebin.com/53JCuBD4) which is essentialy the same. To be fair, you just proved me it works and it's pointless wasting your time with my weird problem. – Rentonie Apr 25 '14 at 17:21
@NickWilde Seems like it needs $(document).ready(function(){ $("#greet").click(function(){ $("#here").toggle(); this way it worked. Althougn no hide there. Will work it out. Thanks – Rentonie Apr 25 '14 at 17:40
@Rentonie No problem :) Your error is that you have an extra an extra `a` in `$("#here").hide(a)` - that shouldn't have any arguments and it is causing a runtime error hence the rest of the script is not reliably running. – Nick Dickinson-Wilde Apr 25 '14 at 17:43
1

ah yes and it does need to have the onLoad wrapper if it is in that position (just put the wrapper around the hide line as well to make it work nicer) - usually I put my javascript at the bottom of the document in which case it works without that but I just edited without thinking about that and jsFiddle by default puts in a onLoad wrapper (which works just as well in this case). – Nick Dickinson-Wilde Apr 25 '14 at 17:46

Show & Hide an element after click

1 Answers1