Javascript onclick not running

Question

I want a link, when clicked, to execute a javascript function.

Here is the javascript:

    <script type="text/javascript">
        function changeStyle() {
            var header = document.getElementbyId("header");
            var container = document.getElementbyId("container");

            header.style.display = "block";
            container.style.marginLeft = "auto";
        }
    </script>

Here is the HTML:

    <a href="javascript:changeStyle()"><span>&#9776</span> MENU</a>

Currently, when the link is clicked, nothing happens. How would I make it so that the javascript actually changes the styles when I want it to?

EDIT:

Here is new code:

Javascript:

$('#selector').click(function() {
    var header = document.getElementById("header");
        var container = document.getElementById("container");
    header.style.display = "block";
    container.style.marginLeft = "auto";
})

HTML:

<a href="#" id="selector"><span>&#9776</span> MENU</a>

This question appears to be off-topic because there is no question here. — PeeHaa, Jul 21 '13 at 13:27
There is something *inherently* wrong. You should avoid having variables (like a function) in the global namespace. Add an [event listener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener) instead. — kentcdodds, Jul 21 '13 at 13:28
_Is there something inherently wrong that I am doing?_ - **yes**, you should use [unobtrusive scripting](http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice) instead. — c69, Jul 21 '13 at 13:28
@goldage5, please add a jsfiddle to illustrate, as it seems (by guessing), that your code does not work either because your html does not match js, or because styles set via js are the same as existing. — c69, Jul 21 '13 at 13:33
`getElementbyId` is not a typo just in your post, it can be found from the production code too? — Teemu, Jul 21 '13 at 13:34
Yeah, it was also a typo in my code. I changed it, but still. Nothing. — adeora, Jul 21 '13 at 13:37

adeneo · Accepted Answer · 2013-07-21T13:43:09.063

4

Use the onclick attribute, not the href :

<a href="#" onclick="changeStyle();return false;"><span>&#9776</span> MENU</a>

A better idea would be to not use inline javascript

<a href="#" id="menu"><span>&#9776</span> MENU</a>

<script type="text/javascript">
     var a = document.getElementById('menu');

     a.onclick = function() {
        var header    = document.getElementById("header");
        var container = document.getElementById("container");

        header.style.display = "block";
        container.style.marginLeft = "auto";
     }
</script>

FIDDLE

Note: the script must be placed after the elements

edited Jul 21 '13 at 13:43

answered Jul 21 '13 at 13:26

adeneo

312,895
29
395
388

Thanks for the quick response, but that's still not working. When I click the link, nothing happens. – adeora Jul 21 '13 at 13:27
2

For some reason I don't expect somebody with a gold badge in JS to suggest using inline event handlers. – PeeHaa Jul 21 '13 at 13:29
3

@PeeHaa - when the question is how to apply an inline event handler, that's the answer they'll get. I've added another solution that gets rid of the inline js. – adeneo Jul 21 '13 at 13:37
The question isn't about inline event handlers. The question is about OP finding some crap JS resource and not knowing any better. Thanks for the update though – PeeHaa Jul 21 '13 at 13:39

Javascript onclick not running

1 Answers1