如何在VisualStudio代码上混合/添加Javascript代码到Html代码？

我很难理解为什么我的

onclick=“showMenu”

和

onclick=“hideMenu”

功能不起作用。有什么建议吗

<section class="header">

        <nav>
            <a href="index.html"><img src="Bilder/Logo.jpg"></a>
            <div class="nav-links" id="navLinks">
                <i class="fa fa-times"> <script>onclick="hideMenu()"</script></i>
                    <ul>
                        <li><a href="">HOME</a></li>
                        <li><a href="">ABOUT</a></li>
                        <li><a href="">COURSE</a></li>
                        <li><a href="">BLOG</a></li>
                        <li><a href="">CONTACT</a></li>
                    </ul>
            </div>
            <i class="fa fa-bars"><script>onclick="showMenu()"</script></i>
        </nav>

     <div class="text-box">
         <h1>Some text...</h1>
         <p>Some text..</p>
         <a href="" class="hero-btn">Button Text..</a>
     </div>   

    </section>

    <!-------Javascript for Menu--------->

<script>
        var navLinks = document.getElementById("navLinks");
        funnction showMenu(){
            navLinks.style.right = "0";
        }
        funnction hideMenu(){
            navLinks.style.right = "200px";
        }
</script>

onclick=“hideMenu（）”







onclick=“showMenu（）”
一些文字。。。
一些文字

var navLinks=document.getElementById（“navLinks”）；
功能显示菜单（）{
navLinks.style.right=“0”；
}
希德梅努功能{
navLinks.style.right=“200px”；
}

---

我发现您的代码中有两个问题

您传递的不是函数，而是函数的返回值

在脚本标记中使用“onClick”，这没有任何意义。是否要单击脚本

它应该是这样的：

---

我建议你使用鼠标单击图标

<nav>
    <a href="index.html">
        <img src="Bilder/Logo.jpg">
    </a>
    <div class="nav-links" id="navLinks">
        <a href="javascript:hideMenu()">
            <i class="fa fa-bars">
            </i>
        </a>
        <ul>
            <li><a href="">HOME</a></li>
            <li><a href="">ABOUT</a></li>
            <li><a href="">COURSE</a></li>
            <li><a href="">BLOG</a></li>
            <li><a href="">CONTACT</a></li>
        </ul>
    </div>
    <a href="javascript:showMenu()">
        <i class="fa fa-bars">
        </i>
    </a>

</nav>

<div class="text-box">
    <h1>Some text...</h1>
    <p>Some text..</p>
    <a href="" class="hero-btn">Button Text..</a>
</div>

</section>

<!-------Javascript for Menu--------->

<script>
    var navLinks = document.getElementById("navLinks");

    function showMenu() {
        navLinks.style.right = "0";
    }

    function hideMenu() {
        navLinks.style.right = "200px";
    }
</script>

一些文字。。。
一些文字

var navLinks=document.getElementById（“navLinks”）；
函数showMenu（）{
navLinks.style.right=“0”；
}
函数hideMenu（）{
navLinks.style.right=“200px”；
}

功能

-->

功能

除了打字之外，事件属性是HTML的一部分，不要将它们包装到脚本标记中，而是将属性包含在用于附加事件的标记中。应该是这样的：

。这不起作用。首先使用此方法，但随后在function showmenu和hideMenu ofc中无法识别onclick函数。这就是我将onclick设置为脚本标记的原因。。但是，是的，我想在导航栏上点击，显示，当你再次点击时。。（showMenu&&hideMenu）。可能尝试在html之前添加js。如果不起作用，可以尝试以下操作：object.onclick=function（）{myScript}；或者object.addEventListener（“单击”，myScript）；