当前位置： 文江博客话题详情

我无法称呼外部JavaScript功能

发布于 2025-02-10 06:26:18 字数 2246 浏览 1 评论 0原文

我想学习JavaScript。因此，经过一些基础知识，我试图对Tictactoe进行编码。我写了HTML和CSS的东西，然后从JS开始。我在JS目录中创建了JS文件，并编写了第一个函数，即如果我单击DIV，则应在控制台中写入某些内容。然后我注意到该功能没有被调用。我不知道为什么。如果我在HTML文件中编写JS代码，则可以工作，如果我编写document.getElementById（“ id”）。onclick = function（）{}，但它与HTML中的OnClick选项不起作用。

# Html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TicTacToe</title>
    <link type="text/css" rel="stylesheet" href="../css/Main.css">
    <script type="text/javascript" rel="script" src="../js/TicTacToe.js"></script>
</head>
<body>
    <div class="grid-container">
        <label class="headline">X:0|0:Y</label>
        <div id="item1" onclick="click()"></div>
        <div id="item2" onclick="click()"></div>
        <div id="item3" onclick="click()"></div>

        <div id="item4" onclick="click()"></div>
        <div id="item5" onclick="click()"></div>
        <div id="item6" onclick="click()"></div>

        <div id="item7" onclick="click()"></div>
        <div id="item8" onclick="click()"></div>
        <div id="item9" onclick="click()"></div>
    </div>
</body>
</html>

#JavaScript File
//Initial constances
let player = true;
let xPlayerPoints = 0;
let yPlaxerPoints = 0;

function click(){
    console.log("Test");
}

#CSS File
.headline{
    grid-area: headspace;
    background-color: #20c997;
    border-radius: 5px;
    font-size: 26px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-container{
    display: grid;
    width: 33%;
    margin-left: auto;
    margin-right: auto;
    grid-template-areas: 'headspace headspace headspace';
    grid-template-columns: auto auto auto;
    grid-gap: 5px;
    padding: 5px;
    background-color: #dde0e3;
    border: 1px solid black;
    border-radius: 5px;
}

.grid-container div{
    cursor: pointer;
    display: flex;
    aspect-ratio: 1;
    border-radius: 5px;
    text-align: center;
    background-color: White;
}

项目结构的图片

原文

I want to learn JavaScript. So after some basics I was trying to code TicTacToe. I wrote the html and css stuff and then I started with js. I createt an Js file in the js directory and wrote the first function, an basic one, If I was clicking on a div, it should write something in the console. And then I noticed that the function was not called. I have NO IDEA WHY. It works if I write the Js code in the html file, it works if i write document.getElementByID("ID").onclick = function(){}, but it doesnt work with the onclick option in html.

# Html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TicTacToe</title>
    <link type="text/css" rel="stylesheet" href="../css/Main.css">
    <script type="text/javascript" rel="script" src="../js/TicTacToe.js"></script>
</head>
<body>
    <div class="grid-container">
        <label class="headline">X:0|0:Y</label>
        <div id="item1" onclick="click()"></div>
        <div id="item2" onclick="click()"></div>
        <div id="item3" onclick="click()"></div>

        <div id="item4" onclick="click()"></div>
        <div id="item5" onclick="click()"></div>
        <div id="item6" onclick="click()"></div>

        <div id="item7" onclick="click()"></div>
        <div id="item8" onclick="click()"></div>
        <div id="item9" onclick="click()"></div>
    </div>
</body>
</html>

#JavaScript File
//Initial constances
let player = true;
let xPlayerPoints = 0;
let yPlaxerPoints = 0;

function click(){
    console.log("Test");
}

#CSS File
.headline{
    grid-area: headspace;
    background-color: #20c997;
    border-radius: 5px;
    font-size: 26px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-container{
    display: grid;
    width: 33%;
    margin-left: auto;
    margin-right: auto;
    grid-template-areas: 'headspace headspace headspace';
    grid-template-columns: auto auto auto;
    grid-gap: 5px;
    padding: 5px;
    background-color: #dde0e3;
    border: 1px solid black;
    border-radius: 5px;
}

.grid-container div{
    cursor: pointer;
    display: flex;
    aspect-ratio: 1;
    border-radius: 5px;
    text-align: center;
    background-color: White;
}

Picture of the Project Structure

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

￠好甜 2025-02-17 06:26:18

有两个问题。

  1. 您在标记之前包括JS。 关闭标签之前，将其移动到文件的底部，
  2. 在您使用关键字命名函数的

而是使用Say handleclick。完整工作 codepen 检查控制台是否输出。

There are two issues.

  1. You're including the JS before the markup. Move the to the bottom of the file, just before the closing tag
  2. You're using a keyword to name a function click, instead use say handleClick.

Full working codepen Check the console for log output.

回复 原文
開玄 2025-02-17 06:26:18

通过DOM API连接事件处理程序，即。使用.addeventListener。

尽管如此建议，但无需使用此解决方案重命名处理程序功能。

在下面的实时演示中，CSS A和JS编程被定义为内联，但是通过链接包含这些零件是完全可以的。

有关更多信息，请参见 docs（mdn）。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TicTacToe</title>
    <style type="text/css">
        .headline{
            grid-area: headspace;
            background-color: #20c997;
            border-radius: 5px;
            font-size: 26px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .grid-container{
            display: grid;
            width: 33%;
            margin-left: auto;
            margin-right: auto;
            grid-template-areas: 'headspace headspace headspace';
            grid-template-columns: auto auto auto;
            grid-gap: 5px;
            padding: 5px;
            background-color: #dde0e3;
            border: 1px solid black;
            border-radius: 5px;
        }

        .grid-container div{
            cursor: pointer;
            display: flex;
            aspect-ratio: 1;
            border-radius: 5px;
            text-align: center;
            background-color: White;
        }
    </style>
    <script type="text/javascript">
        //Initial constances
        let player = true;
        let xPlayerPoints = 0;
        let yPlaxerPoints = 0;

        function click(){
            console.log("Test");
        }

        document.addEventListener ( 'DOMContentLoaded', ( ) => { // Wrapper ensures that the DOM exists when the following code gets executed.
           Array.from( 
               document.querySelectorAll ( 'div.grid-container > div' )  // Choose the elements representing the cells of the TicTacToe board
           ) // Converts from NodeList type
               .forEach ( pe => {
                    pe.addEventListener ( 'click', click );
               });  // Attach the 'click' function as a click handler to every selected element
        }); 
    </script>
</head>
<body>
    <div class="grid-container">
        <label class="headline">X:0|0:Y</label>
        <div id="item1"></div>
        <div id="item2"></div>
        <div id="item3"></div>

        <div id="item4"></div>
        <div id="item5"></div>
        <div id="item6"></div>

        <div id="item7"></div>
        <div id="item8"></div>
        <div id="item9"></div>
    </div>
</body>
</html>

Attach the event handler through the DOM API, ie. using .addEventListener.

No need to rename the handler function with this solution, though it is recommended nonetheless.

In the live demo below, CSS an JS programming are defined inline, but it is perfectly fine to include these parts through links.

For more info see the docs (MDN).

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TicTacToe</title>
    <style type="text/css">
        .headline{
            grid-area: headspace;
            background-color: #20c997;
            border-radius: 5px;
            font-size: 26px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .grid-container{
            display: grid;
            width: 33%;
            margin-left: auto;
            margin-right: auto;
            grid-template-areas: 'headspace headspace headspace';
            grid-template-columns: auto auto auto;
            grid-gap: 5px;
            padding: 5px;
            background-color: #dde0e3;
            border: 1px solid black;
            border-radius: 5px;
        }

        .grid-container div{
            cursor: pointer;
            display: flex;
            aspect-ratio: 1;
            border-radius: 5px;
            text-align: center;
            background-color: White;
        }
    </style>
    <script type="text/javascript">
        //Initial constances
        let player = true;
        let xPlayerPoints = 0;
        let yPlaxerPoints = 0;

        function click(){
            console.log("Test");
        }

        document.addEventListener ( 'DOMContentLoaded', ( ) => { // Wrapper ensures that the DOM exists when the following code gets executed.
           Array.from( 
               document.querySelectorAll ( 'div.grid-container > div' )  // Choose the elements representing the cells of the TicTacToe board
           ) // Converts from NodeList type
               .forEach ( pe => {
                    pe.addEventListener ( 'click', click );
               });  // Attach the 'click' function as a click handler to every selected element
        }); 
    </script>
</head>
<body>
    <div class="grid-container">
        <label class="headline">X:0|0:Y</label>
        <div id="item1"></div>
        <div id="item2"></div>
        <div id="item3"></div>

        <div id="item4"></div>
        <div id="item5"></div>
        <div id="item6"></div>

        <div id="item7"></div>
        <div id="item8"></div>
        <div id="item9"></div>
    </div>
</body>
</html>

回复 原文
忆依然 2025-02-17 06:26:18

这是因为您仅定义一个函数而不将其调用代码中的任何位置，

还可以确保在HTML中使用JavaScript文件。了解更多。 https://wwwwwww.w3schools.com/tags/tags/tags/tags/att_script_src.src_src.asp

function click(){
    console.log("Test");
}
//Call this function
click();

javascript在这里： javascript函数

It is because you are only defining a function and not calling it anywhere in the code

Also make sure use Add a javascript file to your html. Learn more. https://www.w3schools.com/tags/att_script_src.asp

function click(){
    console.log("Test");
}
//Call this function
click();

Learn more about Javascript here : Javascript function

回复 原文
清风不识月 2025-02-17 06:26:18

您需要使用它的所有元素在所有元素下方和身体端标签上方包含脚本标签，否则您可以执行此操作。

在脚本标签中包括延期，它将像

在使用脚本标签时一样起作用，它的作用就像JS的正常情况一样，并且按照数值顺序执行所有操作，因此它正在执行的是执行JS文件没有HTML的任何信息。希望这有所帮助

You need to include the script tag below all elements using it and above the body end tag or you could do this.

Include defer in the script tag and it will act as if it were at the bottom

When you use the script tag it acts just as js normally does and it executes everything by line in numerical order so what it is doing is its executing the js file without any information from the html. Hope this helped

回复 原文
~没有更多了~

关于作者

☆獨立☆

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文