admin管理员组

文章数量:1356750

I have some basic html below, and for some reason it's not recognizing the js file I linked in the script tag. Am I linking it incorrectly in some way?:

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

Below is the respective 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);
}

I have some basic html below, and for some reason it's not recognizing the js file I linked in the script tag. Am I linking it incorrectly in some way?:

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

Below is the respective 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);
}
  • javascript
  • html
Share Improve this question edited May 15, 2019 at 19:38 Andrew asked May 15, 2019 at 19:08 AndrewAndrew 3,99910 gold badges34 silver badges43 bronze badges 3
  • Are you opening the HTML file from your drive directly or is it hosted by a web server? The leading slash in /index.js could be the problem. – Romen Commented May 15, 2019 at 19:10
  • If the files are side by side the no need for the slash, if they are in folders then include the folder path but no leading slashes are necessary – Dev Man Commented May 15, 2019 at 19:25
  • do you working on unix server? access rights are ok? – Eugen Commented May 15, 2019 at 19:27
Add a ment  | 

2 Answers 2

Reset to default 6

You don't need the / before it. Call render in your script and move it to the bottom of the 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 Below

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);
}

First remove the / (slash) before the filename,

and also when you link a java-script file add the type as application/javascript when it put it recognize the file type is java-script.

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

</html>

本文标签： javascriptHTML isn39t recognizing the JS file in the same folderStack Overflow

版权声明：本文标题：javascript - HTML isn&#39;t recognizing the JS file in the same folder - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744069073a2585553.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。