Javascript 在vscode上创建的调试网页不'；不显示预期的可视化效果_Javascript_Html_Css_Google Chrome_Visual Studio Code

Javascript 在vscode上创建的调试网页不'；不显示预期的可视化效果

javascript html css google-chrome visual-studio-code

Javascript 在vscode上创建的调试网页不'；不显示预期的可视化效果,javascript,html,css,google-chrome,visual-studio-code,Javascript,Html,Css,Google Chrome,Visual Studio Code,你好吗？。我从一本书中做了几个练习，但因为书中的代码似乎是在pastebin或其他相关程序中运行的，所以我使用vscode进行练习，并在google chrome上消除错误。index.html的代码如下所示 <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewpo

你好吗？。我从一本书中做了几个练习，但因为书中的代码似乎是在pastebin或其他相关程序中运行的，所以我使用vscode进行练习，并在google chrome上消除错误。index.html的代码如下所示

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <script src="variables-3.js"></script>
    <link rel="stylesheet" href="style.css">
</body>

</html>

body {
    background-color: #0080ff;
}

h1 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    color: #f0f;
    font-family: Arial, Helvetica, sans-serif;
}

var div,
    container = document.getElementById('container');
for(var i = 0; i<5;i++)
{
    div = document.createElement('div');
    div.onclick = function()
    {
        alert('This is box #'+i);
    }
    container.appendChild(div);
}

varable-3.js中的javascript代码如下

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <script src="variables-3.js"></script>
    <link rel="stylesheet" href="style.css">
</body>

</html>

body {
    background-color: #0080ff;
}

h1 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    color: #f0f;
    font-family: Arial, Helvetica, sans-serif;
}

var div,
    container = document.getElementById('container');
for(var i = 0; i<5;i++)
{
    div = document.createElement('div');
    div.onclick = function()
    {
        alert('This is box #'+i);
    }
    container.appendChild(div);
}

我的settings.json是

{
    "liveServer.settings.port": 5500,
    "liveServer.settings.CustomBrowser" : "chrome",
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging- 
     port=9222",
    "liveServer.settings.NoBrowser" : false,
    "liveServer.settings.ignoreFiles" : [
        ".vscode/**",
        "**/*.scss",
        "**/*.sass"
    ]

}

这假设以某种海蓝色显示背景，以其他颜色显示五个正方形周围的boddy，但仅以海蓝色显示所有页面，我不知道为什么会发生这种情况

注意：这里有来自多个来源的代码，包括来自其他帖子的代码，我也在使用vscode live server

我怎样才能解决这个问题

提前感谢您的帮助。

首先，我想指出的是，以下内容只是作者所做的修改，而不是其他内容，现在是文件：

html是

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Let</title>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

 <body>
    <h1>Click on a box</h1>
        <div id="container"></div>
    <h1>
    <script src="variables-3.js"></script>
    <link rel="stylesheet" href="style.css">
    </h1>
</body>

</html>

现在它可以工作了。

您的IDE和服务器是不相关的。由于各种原因，此代码和标记将不起作用：没有“容器”元素可在其下追加5个子div元素，您将看不到子div元素，因为它们没有内容，并且您无法以这种方式将事件侦听器分配给动态创建的元素。感谢您的支持，我查看了图书库，并分发了一些他们所做的事情。下一个答案中的工作文件如下所示