如何在 Visual Studio 代码上将 Javascript 代码混合/添加到 Html 代码？答案

【问题标题】：How to mix/add Javascript code to Html code on Visual studio code?如何在 Visual Studio 代码上将 Javascript 代码混合/添加到 Html 代码？
【发布时间】：2021-03-20 11:28:51
【问题描述】：

我有一些问题想了解为什么我的 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>

【问题讨论】：

funnction ---> function
除错别字外，事件属性是 HTML 的一部分，不要将它们包装到脚本标签中，将属性包含在它们用于附加事件的标签中。应该是这样的：<i class="fa fa-times" onclick="hideMenu()"></i>.

标签： javascript html visual-studio-code dom-events javascript-objects

【解决方案1】：

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

你传递的不是函数，而是函数的返回值。
您在脚本标签中使用“onClick”，这没有任何意义。要点击脚本吗？

它应该是这样的：

<i class="fa fa-times" onclick="hideMenu"></i>

【讨论】：

先做这个方法，然后在函数 showmenu 和 hideMenu ofc 中无法识别 onclick 函数。这就是我将 onclick 设置为脚本标签的原因。但是，是的，我想点击一个导航栏，显示，当你再次点击时......（showMenu && hideMenu）。
也许尝试在html之前添加js。
如果它不起作用，你可以尝试这样的事情：object.onclick = function(){myScript};或 object.addEventListener("click", myScript);

【解决方案2】：

我建议你使用 a 点击图标

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

【讨论】：