The script is being imported as a module and this means that you need to also expose the relevant function to the window object, otherwise it won’t be available.
Try adding this in the loop.js file:
window.pointClick = pointClick;
Solution 1 :
Problem :
My Code
I am attempting to make an incremental game in a website and I want to store the player data in a player.js file.
A simpler version of that file looks like…
player.js
let player = {
points: 0,
clickPower: 1,
}
export default player
One of the functions in my loop.js file which references the player.js file to get and set the player data values is when the player clicks on a button and gains points based on the player’s click power
loop.js
import player from "./player";
function pointClick(){
player.points += player.clickPower;
document.getElementById('points').innerHTML = player.points + " POINTS";
};
I reference the pointClick() function in the HTML file, which looks like…
index.html
<!DOCTYPE html>
<html>
<head>
<title>Citioweb de Marty</title>
<script src="js/player.js"></script>
<script src="js/loop.js"></script>
</head>
<body>
<link rel="stylesheet" href="css/style.css">
<div class = "container">
<div class = "tracker">
<label id = "points"> 0 POINTS </label>
<label id = "machines"> 0 MACHINES </label>
<label id = "pointPresses"> 0 POINT PRESSES </label>
<br><br>
</div>
<div>
<button onclick="pointClick()"> CLICK ME </button>
<br><br>
<button onclick="buyMachine()"> BUY POINT MACHINE: <span id="machineCost"> 20 POINTS </span></button>
<br><br>
<button onclick="buyPointPress()"> BUY POINT PRESS: <span id="pointPressCost"> 100 POINTS </span></button>
<br><br>
</div>
<label id="pps"> 0 POINTS PER SECOND </label>
</div>
</body>
</html>
The Problem
I’m using PyCharm IDE and when finding usages of the pointClick() function in index.html it points to the loop.js file as expected
However when I find usages of the pointClick() function in loop.js it doesn’t point back to index.html, instead it says “Unused function pointClick”
If I run the index.html in debug and click the button that calls pointClick() I get an
Uncaught ReferenceError: pointClick is not defined
If I remove the import statement in loop.js
import player from "./player"
Then my pointClick() function in loop.js says it’s being referenced in index.html but at the same time it says player.points is missing an import statement.
I’ve tried searching the issue for quite sometime now, I eventually gave up and decided to make this post. I’m very new to javascript and HTML, so I apologize if this is a simple fix.
Comments
Comment posted by waiaan
try to delete the export and import statement