CODEWITHSUNDEEP
css
user2942462
user2942462

Reputation: 1

Change CSS with onclick=""

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;
}

Upvotes: 0

Views: 269

Answers (4)

user726015
user726015

Reputation:

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()).

Upvotes: 2

Charles Ingalls
Charles Ingalls

Reputation: 4561

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>

Upvotes: 2

ponysmith
ponysmith

Reputation: 427

Move the action to your JS file:

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

Upvotes: 0

Stuart Kershaw
Stuart Kershaw

Reputation: 17671

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/

Upvotes: 1

Related Questions