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);
}
-
Are you opening the HTML file from your drive directly or is it hosted by a web server? The leading slash in
/index.jscould 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
2 Answers
Reset to default 6You 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>