Javascript won't load with HTML file


#1

I have recently started dabbling with web design and I’ve hit a snag. I’m using notepad++ and the .js won’t load with the HTML file. The HTML works fine and when I tested the .js file separately, it worked fine as well. Here is the code. No idea what is wrong or I’m just making a beginner’s mistake.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type="text/javascript" src="script.js"></script>
</head>

<body>

<!---combat system---> 

<h3> Encounter's Health <span id="encounter-health"></span></h3> 

<h3> Your Health <span id="player-health"></span></h3>

<button id="attack-button" onclick = "attack()">Attack</button>

</body>

</html>
let player = {
	health: 100,
	power: 20,
}

let encounter = {
	health: 100,
	power: 20,
}

const attack = () => {
	let playerAttack = math.random();
	console.log();
}

const printToScreen = () => {
	document.getElementById("encounter-health").innerText = encounter.health; 
	
	document.getElementById("player-health").innerText = player.health;
}

printToScreen();

#2

i put your code in a bin, and its loading the starting health, is this for you already a problem? Are you sure your JS file is called script.js and in the same directory as html file?

if you run this directly in your browser, there is no trigger for printToScreen to do anything

you could make a start button which calls printToScreen function?


#3

My problem is that it will load the titles Encounter Health and Your health, but not the values. I did make sure the file was named script.js and i believe it is in the same directory. Right now I’m just trying to test the code to make sure what I have is working before I continue to expand on what I already have. I’ll add more once I fix this issue.


#4

did you read my latest edit? there is no reason for printToScreen to be triggered. html need to trigger the JS code or function. This can be done with a button or onload event:

to load a function after the html document is rendered


#5

Ah, I see. Let me try this out.


#6

■■■■, the health values are still not displaying. Thanks for the help, I’ll keep tinkering with it.


#7

If you would like further assistance, please post an updated version of your code

Not sure what you currently did, and why its still not working