0

Can you tell me what i'm doing wrong? I want to change the CSS properties when I click on a link.

Found this Suggestion here but isn't working for me.

HTML

<a href="#" onclick="$('.action').css('display', 'block');">Edit</a>
<div class="action action_2">
   <ul>
      <li><a href="#">bearbeiten</a></li>
      <li><a href="#">löschen</a></li>
   </ul>
</div>

CSS:

.button .action {
    position: absolute;
    padding:15px;
    display: none;
    background: #fff;
}
4
  • What do you see in the console? Commented Oct 31, 2013 at 17:39
  • 7
    If you're using jQuery, you really, really, really, really shouldn't be calling it in an onclick attribute. Commented Oct 31, 2013 at 17:39
  • 5
    Even when using VanillaJS he shouldn't do that ;) Commented Oct 31, 2013 at 17:43
  • 1
    You can just use .show() to make it visible. No need to touch CSS in your JavaScript code. Commented Oct 31, 2013 at 17:44

4 Answers 4

2

If you're using jQuery, try this.

<script>
$(document).ready(function() {
    $('#link').click(function(e) {
        e.preventDefault();
        $('.action').css('display', 'block');
    });
});
</script>

And in your HTML.

<a href="#" id="link">Edit</a>
Sign up to request clarification or add additional context in comments.

Comments

2

Your issue is that you're providing the onclick a function call instead of a function reference. Your browser expects the latter.

Proper way

// Javascript
function foo(e) {
    // do stuff, like set the CSS on some elements.  Note 
    // that the 'e' argument is going to be a browser event, 
    // not the element you're changing.
}

// HTML
<div onclick=foo>
// This passes a reference to a function.  Your browser then
// calls foo with an argument of the browser event that was triggered.

Wrong way

// Javascript
function bar(element) {
    // do stuff on the *element* argument.
}

// HTML
<div onclick=bar(someDiv)>
// This is wrong because *bar(someDiv)* isn't a reference to 
// the function, it's a call to run the function with an argument 
// of *someDiv*.  onclick isn't expecting this, so the behavior 
// you'll get will be not what you expect.

The specifics of your usage is that $('.action').css('display', 'block'); is a function call, not a reference. Your browser is trying to then do ($('.action').css('display', 'block'))(clickEvent), and that's not right at all. So you can wrap your $('.action').css('display', 'block'); in an anonymous function to make it work the way your browser expects:

<div onclick="function(e) {$('.action').css('display', 'block');}">

Also note $().show(), which may be a handy function for your usage, instead of manually setting CSS properties. Also also consider adding an ID to your HTML element, then use JQuery to attach an onclick handler for that ID (i.e. $().click()).

Comments

1

I'd remove the inline JS and try something like this:

$('a').click(function() {
    $('.action').css('display', 'block');
});

The same can be achieved using $('.action').show(); too.

Here's an example:

http://jsfiddle.net/pqHeM/1/

Comments

0

Move the action to your JS file:

$(document).ready(function() {
    $('a').on('click', function(e) {
        e.preventDefault();
        $('.action').css({'display':'block'});
    });
});

Comments

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.