After spending several days working on this project, I am struggling to understand why the winning or losing message is not being displayed. The project involves a simple shell game created using HTML, JavaScript, and CSS. I have tried reworking the JavaScript code multiple times but still can't seem to identify the issue. Any guidance in the right direction would be greatly appreciated.
var noOfShells;
var noOfShells = 3;
var looplimit = noOfShells + 1;
function ballShell(shells) {
var ballLoc = (Math.floor(Math.random() * shells)) + 1;
return ballLoc;
}
document.getElementById('elTwo').innerHTML = ballShell();
var ballIs = ballShell(noOfShells);
function newShell(newID, ballIs) {
this.shellId = newID;
this.shellName = "Shell" + newID;
this.ballIn = ballIs;
this.hasBall = function() {
var theId = newID;
var theBall = ballIs;
var checkMsg = "My number is " + theId + ". The ball is in shell " + theBall;
if (theId === theball) {
var checkMsg = checkMsg + " You Win! ";
return checkMsg;
} else {
var checkMsg = checkMsg + " You Lose! ";
}
};
}
for (var i = 1; i < 4; i++) {
this["shell" + i] = new newShell(i, ballIs);
}
var shellOneLink = document.getElementById('shellOne');
shellOneLink.addEventListener('click', shell1.hasball(), false);
function reloadPage() {
location.reload();
}
var activateReload = document.getElementById('reloadLink');
activateReload.onclick = reloadPage;ul {
width: 100%;
text-align: center
}
ul li {
display: inline-block;
width: 200px;
border: solid 1px #ccc;
}<link rel="stylesheet" type="text/css" href="css/base.css">
<header>
<h1>Shell Game</h1>
<nav>
<ul>
<li>
<a id="shellOne" href="#">
<img src="images/shell.jpg" alt="shell">
</a>
</li>
<li>
<a id="shellTwo" href="#">
<img src="images/shell.jpg" alt="shell">
</a>
</li>
<li>
<a id="shellThree" href="#">
<img src="images/shell.jpg" alt="shell">
</a>
</li>
</ul>
</nav>
</header>
<main>
<h3 id="text-message"> </h3>
</main>
<footer>
<a id="reloadLink" href="index.html">Reload Page</a>
</footer>