Javascript HTML不是'；t识别同一文件夹中的JS文件_Javascript_Html

Javascript HTML不是'；t识别同一文件夹中的JS文件

javascript html

Javascript HTML不是'；t识别同一文件夹中的JS文件,javascript,html,Javascript,Html,我下面有一些基本的html，出于某种原因，它无法识别我在脚本标记中链接的js文件。我是否在某种程度上链接错误 <html> <head> <link rel="stylesheet" src="/index.css"> <script src="/index.js"></script> </head> <body> <div id="board"> &l

我下面有一些基本的html，出于某种原因，它无法识别我在脚本标记中链接的js文件。我是否在某种程度上链接错误

<html>
  <head>
    <link rel="stylesheet" src="/index.css">
    <script src="/index.js"></script>
  </head>
  <body>
    <div id="board">
      <svg id="svg"></svg>
    </div>
  </body>
</html>

以下是各自的index.js：

const grid = [
   [{},{},{},{},{},{},{}],
   [{},{},{},{},{},{},{}],
   [{},{},{},{},{},{},{}],
   [{},{},{},{},{},{},{}],
   [{},{},{},{color: "red"},{color:"black"},{},{}],
];

const render = () =>{
   console.info("rendering?")
   const svg = document.getElementById("svg");
   let doc = ``;
   for (var i=0; i<grid.length; i++) {
      var row = grid[i];
      for (var j=0; j<row.length; j++){
         const square = grid[i][j];
         const color = square && square.color || 'gray';
         doc = doc + `<circle onclick="clickSquare(${i}, ${j})" fill = '${color}' r='30px' cx='${j * 70 + 50}px' cy='${i * 70 + 50}px'> </circle>`;
      }
   }
   svg.innerHTML = doc;
}

window.clickSquare = (x, y) => {
   console.log("You clicked square ", x, y);
}

const grid=[
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{}，{}，{}，{颜色：“红色”}，{颜色：“黑色”}，{}，{}，{}]，
];
常量渲染=（）=>{
console.info（“渲染？”）
const svg=document.getElementById（“svg”）；
让doc=`；
对于（var i=0；i您不需要在它前面加/。在脚本中调用render并将其移动到dom的底部
<html>
  <head>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div id="board">
      <svg id="svg"></svg>
    </div>
    <script src="index.js"></script>
  </body>
</html>



下面是JS
const grid = [
   [{},{},{},{},{},{},{}],
   [{},{},{},{},{},{},{}],
   [{},{},{},{},{},{},{}],
   [{},{},{},{},{},{},{}],
   [{},{},{},{color: "red"},{color:"black"},{},{}],
];

const render = () =>{
   console.info("rendering?")
   const svg = document.getElementById("svg");
   let doc = ``;
   for (var i=0; i<grid.length; i++) {
      var row = grid[i];
      for (var j=0; j<row.length; j++){
         const square = grid[i][j];
         const color = square && square.color || 'gray';
         doc = doc + `<circle onclick="clickSquare(${i}, ${j})" fill = '${color}' r='30px' cx='${j * 70 + 50}px' cy='${i * 70 + 50}px'> </circle>`;
      }
   }
   svg.innerHTML = doc;
}

render()

window.clickSquare = (x, y) => {
   console.log("You clicked square ", x, y);
}

const grid=[
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{},{},{},{},{},{},{}],
[{}，{}，{}，{颜色：“红色”}，{颜色：“黑色”}，{}，{}，{}]，
];
常量渲染=（）=>{
console.info（“渲染？”）
const svg=document.getElementById（“svg”）；
让doc=`；
对于（var i=0；i首先删除文件名前的/
（斜杠）
当你链接一个java脚本
文件时，把类型
添加为application/javascript
，当它放进去的时候，识别文件类型是java脚本

<html>
  <head>
    <link rel="stylesheet" src="index.css">
    <script type="application/javascript" src="index.js"></script>
  </head>

</html>


您是直接从驱动器打开HTML文件还是由web服务器托管？问题可能在于/index.js
中的前导斜杠。如果文件并排打开，则不需要斜杠，如果文件在文件夹中，则包括文件夹路径，但不需要前导斜杠。是否使用unix服务器？访问权限你还好吗？他说“它不识别js文件”，css应该加载好，并且它在同一个文件夹中。这不是文件系统的工作方式。斜杠在任何情况下都不需要。另外，他没有使用href，他在css链接上使用了src，这是错误的。只是做了这个修复，它似乎没有改变任何东西。它可以识别css，但不识别js。我已经编辑了我的帖子以包含在出现问题的情况下对js进行反编译。没有调用“render（）”函数，因此它不会执行任何操作。当我在第24行添加render（）时，会出现语法错误，但函数确实开始加载。当然，它不会呈现任何内容，因为您在dom完成加载之前调用javascript