javascript - Javascript onclick 未运行

Question

我想要一个链接，当点击时，执行一个 javascript 函数。

这是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>

这是HTML：

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

目前，当点击链接时，没有任何反应。我将如何做到这一点，以便 javascript 在我想要的时候真正改变样式？

编辑：

这是新代码：

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>

Answer 1

使用 onclick 属性，而不是 href ：

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

一个更好的主意是不使用内联 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>

小提琴

注意：脚本必须放在元素之后