Question

问题非常简单，我花了2个小时就完成了，但我还没有任何想法。没有像Jquery这样的库。它是世界上最简单的功能之一。我确信该功能正常工作，因为当我将其设为内联代码时，它可以工作。这是代码：

<head>
    <link type="text/css" rel="stylesheet" href="vars.css">
    <link type="text/css" rel="stylesheet" href="font.css">
    <link type="text/css" rel="stylesheet" href="site.css">
    <script src="viewport-units-buggyfill.js" ></script>
    <script src="default.js"></script>
    <script src="site.js"></script>
    <!--<script>
        function byId(id)
        {
           return document.getElementById(id);
        }
    </script>-->
</head

我用inline onclick调用它：

<section id="den" onclick="byId('den').innerHTML = 'red';" class="gizlimenu">
                </section>

这是外部＆＃34; default.js＆＃34;：

function byId(id){
return document.getElementById(id);
}

如您所见，如果我激活注释码，一切都运行正常。这是Chrome开发工具的屏幕截图：

enter image description here

我正在使用Brackets Live Preview查看该页面。其他代码就是因为这个。

注意：当我直接从index.html运行它时，我意识到它正在工作。但它不能与Brackets或服务器（甚至是Dropbox或Gdrive服务器）一起工作。所以我认为这可能是脚本路径的一个问题。

感谢。

Answer 1

考虑到定位脚本的网络路径中可能存在的错误，我实际上建议你在分析你想要实现的内容之后不要实现byId ...

您正在点击一个元素并且在点击时您试图找到相同的元素，以便您可以更改它的innerHTML属性？这就像看着狗追尾。

您无需在DOM中找到刚刚与之交互的元素。此会直接显示您刚刚点击的元素。因此，您可以将其作为参数传递给任何函数，或者您可以内联修改它。

你的例子：

<section id="den" onclick="byId('den').innerHTML = 'red';" class="gizlimenu">
            </section>

可以变成：

<section id="den" onclick="this.innerHTML = 'red';" class="gizlimenu">
            </section>

查看正在运行的示例：

http://jsbin.com/feyidoweco/7/edit?html,js,output

外部JavaScript中的函数不起作用

1 个答案: