onclick attribute with JavaScript works but not if an equivalent function is called

Question

This works with the onclick attribute:

<button type="button" onclick="this.style.color='red';">Astringents</button>

This works in the onclick attribute but not if called from the head element:

<head>
    <script type="text/javascript">
    function red() {
        this.style.color='red';
    }
    </script>
</head>

<button type="button" onclick="red();">Astringents</button>

EDIT: I want to use one function to serve several buttons. For example:

<button type="button" onclick="red();">Astringents</button>
<button type="button" onclick="red();">Exfoliators</button>
<button type="button" onclick="red();">Moisturizers</button>
<button type="button" onclick="red();">Masques</button/>

Damien Quintal · Accepted Answer · 2011-02-16 04:18:16Z

4

In this scenario, this is not referencing the <button> element - and therefore cannot edit a property of the element.

Check out the quirksmode article on this topic http://www.quirksmode.org/js/this.html

Based on the example at the bottom of the article, the following should work.

<head>
<script type="text/javascript">

function red(obj) {
    obj.style.color='red';
}
</script>
</head>

<button type="button" onclick="red(this)">Astringents</button>

answered Feb 16, 2011 at 4:18

Damien Quintal

1551 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

onclick attribute with JavaScript works but not if an equivalent function is called

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related