I have written HTML, CSS, and Javasript code in JSfiddle. I am trying to upload that code to github and have it run on github pages. The HTML and CSS part seem to run fine but none of the Javascript functions are working. I am unsure what to do to fix this.
GitHub repository and site
Any help/ideas would be greatly appreciated!
I tried ensuring the JavaScript file was called correctly and tried using document.addEventListener("DOMContentLoaded", function() {});.
let countElStrikes = document.getElementById("count-el-strikes")
let countElBalls = document.getElementById("count-el-balls")
let countElBatter = document.getElementById("count-el-batter")
let countElResult = document.getElementById("count-el-previous")
let countStrikes = 0
let countBalls = 0
let count = 0
function strikes() {
if (countElBatter.innerText !== "Walk") {
countStrikes += 1
countElStrikes.innerText = countStrikes
console.log(countElStrikes.innerText)
}
if (countStrikes == 3) {
countElBatter.innerText = "Out"
console.log("Out")
}
if (countStrikes >= 4) {
countStrikes = 0;
countBalls = 0;
document.getElementById("count-el-strikes").innerHTML = countStrikes;
document.getElementById("count-el-balls").innerHTML = countBalls;
countElBatter.innerText = ""
console.log("Out")
}
}
function balls() {
if (countElBatter.innerText !== "Out") {
countBalls += 1;
countElBalls.innerText = countBalls
console.log(countElBalls.innerText)
}
if (countBalls == 4) {
countElBatter.innerText = "Walk"
console.log("Walk")
}
if (countBalls >= 5) {
countStrikes = 0;
countBalls = 0;
document.getElementById("count-el-strikes").innerHTML = countStrikes;
document.getElementById("count-el-balls").innerHTML = countBalls;
countElBatter.innerText = ""
console.log("Out")
}
}
function save() {
result = countElBatter.innerText
if (result == "Walk" || result == "Out") {
countElResult.textContent += result + " - "
countStrikes = 0;
countBalls = 0;
document.getElementById("count-el-strikes").innerHTML = countStrikes;
document.getElementById("count-el-balls").innerHTML = countBalls;
countElBatter.innerText = ""
console.log("Out")
}
}
function reset() {
countStrikes = 0;
countBalls = 0;
countElResult.innerText = " ";
document.getElementById("count-el-strikes").innerHTML = countStrikes;
document.getElementById("count-el-balls").innerHTML = countBalls;
countElBatter.innerText = ""
console.log("Out")
}button {
border: none;
padding-top: 10px;
padding-bottom: 10px;
color: white;
font-weight: bold;
width: 200px;
margin-bottom: 5px;
border-radius: 5px;
}
#background-image {
background-repeat: no-repeat;
height: 612px;
width: 612px;
}
#baseball-content {
text-align: left;
font-size: 12pt;
padding-right: 1px;
padding-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
width: 160px;
background-color: grey;
}
#result-content {
text-align: center;
font-size: 12pt;
padding-right: 1px;
padding-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
width: 300px;
background-color: grey;
}
#strikes-btn {
background: darkblue;
}
#strikes-btn:active {
background-color: black;
/* Change this color to the desired pressed color */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#balls-btn {
background: darkblue;
}
#balls-btn:active {
background-color: black;
/* Change this color to the desired pressed color */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#save-btn {
background: darkblue;
}
#save-btn:active {
background-color: black;
/* Change this color to the desired pressed color */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#reset-btn {
background: darkblue;
}
#reset-btn:active {
background-color: black;
/* Change this color to the desired pressed color */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<center>
<body style="margin:10%;">
<div id="background-image" style="background-image: url('https://media.istockphoto.com/id/1389744315/vector/vector-baseball-field-baseball-diamond-baseball-stadium-stock-illustration.jpg?s=612x612&w=0&k=20&c=36T0kBfFAWRRkj4OMAzLYdOX0ulMKbjIh18Q3wZzs48=')">
<h1 style="font-size:30pt;">Pitch Counter</h1>
<br>
<div id="baseball-content">
<h2 style=' margin:0;'>Strikes: <span id="count-el-strikes"></span></h2>
<h2 style=' margin:0;'>Balls: <span id="count-el-balls"></span></h2>
<h2 style=' margin:0;'>Batter: <span id="count-el-batter"></span></h2>
</div>
<br>
<button id="strikes-btn" onclick="strikes()">Strikes</button>
<button id="balls-btn" onclick="balls()">Balls</button>
<br>
<!-- <button id="reset-btn" onclick="reset()">Reset Count</button> -->
<button id="save-btn" onclick="save()">Save and Reset Count</button>
<button id="reset-btn" onclick="reset()">Reset Results</button>
<br>
<h2 id="result-content" style="font-size:18pt;">Previous Result: <span id="count-el-previous"></span></h2>
</div>
</body>
</center>
</html>