I have tried and tried at finding why the variable OdEv is not changing from its initial value. It should change depending on whether x is odd or even in the function workingOdd(), but it just stays at the initial placeholder value of 'T'.
Code:-
<!DOCTYPE html>
<html>
<body style="background: grey; font-family: Arial, sans-serif;">
<script>
function closebox() {
document.getElementById("box").style.visibility="hidden";
document.getElementById("closeboxbutton").style.visibility="hidden";
document.getElementById("openboxbutton").style.visibility="visible";
}
function openbox() {
document.getElementById("box").style.visibility="visible";
document.getElementById("closeboxbutton").style.visibility="visible";
document.getElementById("openboxbutton").style.visibility="hidden";
}
</script>
<div style="background:black;color:white;padding:10px;text-align:left; height:20px;">
<div id="togglestakesshow"><button style="float:left; width:220px;" onclick="showstakes()">SHOW STAKES STRUCTURE</button></div>
<div id="togglestakeshide"><button style="float:left; width:100px;" onclick="hidestakes()">HIDE STAKES STRUCTURE</button></div>
<div id="openboxbutton"><button style="display:inline-block;" onclick="openbox()">OPEN INPUT BOX</button></div>
<div id="closeboxbutton"><button style="display:inline-block;" onclick="closebox()">CLOSE INPUT BOX</button></div>
<div id="bankrollwindow" style="margin-top: -4px; width:70px; text-align:center; float:right; padding:5px; color:black; background:white; display:inline-block;">£</div>
<div style="float:right; margin-right:10px;">BANKROLL</div>
</div>
<div id="stakespanel">CONTENT OF STAKES</div>
<div id="results" style="border:5px solid white; height:730px; overflow:scroll;background:white;">
</div>
<div>
<div id="betsdiv" style=" position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);height:160px; width:1200px; border: 5px solid white; background: green; ">
<div id="toprow">
<div >1st 12</div>
<div >2nd 12</div>
<div >3rd 12</div>
<div style="clear:both;"></div>
<div >1-18</div>
<div >EVEN</div>
<div >RED</div>
<div >BLACK</div>
<div >ODD</div>
<div >19-36</div>
</div>
</div>
</div>
<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">
<div id="modal-content">
<p>Select a number between 0 and 36:</p>
<div id="numberButtons"></div>
<button id="close-button" onclick="closebox()">Close</button>
</div>
</div>
</div>
<style>
.toprowbets {
height:75px;
line-height:75px;
vertical-align: middle;
width:390px;
border: 5px solid white;
float:left;
text-align:center;
font-size:30px;
font-weight:600;
color:white;
}
.bottomrowbets {
height:75px;
line-height:75px;
vertical-align: middle;
width:190px;
border: 5px solid white;
float:left;
text-align:center;
font-size:30px;
font-weight:600;
color:white;
}
#openboxbutton
{ visibility: hidden;
display: inline-block;
position: relative;
top: -6px }
#closeboxbutton
{ visibility: visible;
display: inline-block;
position: relative;
top: -6px;
left: -113px; }
#togglestakesshow {
font-size:10px;
width: 200px;
overflow: hidden;
display: inline-block;
}
#togglestakeshide {
font-size:10px;
width: 0px;
overflow: hidden;
display: inline-block;
}
#stakespanel {
overflow: hidden;
height:0px;
border:1px solid black;
background: white;
}
/* The modal background */
#modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
/* The modal content */
#modal-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fefefe;
padding: 20px;
width: 18%;
border: 3px solid black;
#box {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
z-index: 1;
margin-top: -150px; /* half of the box's height */
margin-left: -150px; /* half of the box's width */
visibility: visible;
}
}
#stakesbox {
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 200px;
z-index: 2;
margin-top: -150px; /* half of the box's height */
margin-left: -150px; /* half of the box's width */
visibility: visible;
border: 2px solid black;
Background-color:white;
}
/* The close button */
#close-button {
display: block;
margin: 0 auto;
}
#numberButtons button {
color: white;
width: 50px;
height: 50px;
font-size:30px;
font-weight:600;
}
#modal.inactive{
opacity: 0.2;
}
</style>
<script>
var odEv="T";
var txtOdEv="#33ccff";
var bankRoll = parseFloat(prompt("Please enter your starting bankroll:"));
if(isNaN(bankRoll)){
bankRoll = parseFloat(prompt("Invalid input. Please enter a valid number for your starting bankroll:"));
}
bankRoll = bankRoll.toFixed(2);
updateBankroll()
var spinNumber=0;
var x=0;
var backline="";
var isDragging = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
const modalContent = document.querySelector("#modal-content");
modalContent.addEventListener("mousedown", dragStart);
modalContent.addEventListener("mouseup", dragEnd);
modalContent.addEventListener("mousemove", drag);
function dragStart(e) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
if (e.target === modalContent) {
isDragging = true;
}
}
let inactivityTimeout;
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
isDragging = false;
clearTimeout(inactivityTimeout);
inactivityTimeout = setTimeout(() => {
modal.classList.add("inactive")
}, 15000)
}
function drag(e) {
if (e.buttons === 1) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, modalContent);
clearTimeout(inactivityTimeout);
modal.classList.remove("inactive")
}
}
function updateBankroll() {
document.getElementById("bankrollwindow").innerHTML = "£" bankRoll;
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" xPos "px, " yPos "px, 0)";
}
function roulette(number) {
// Determine the color of the number
var color;
if (number === 0) {
color = "Green";
} else if (number === 1 || number === 3 || number === 5 || number === 7 || number === 9 || number === 12 || number === 14 || number === 16 || number === 18 || number === 19 || number === 21 || number === 23 || number === 25 || number === 27 || number === 30 || number === 32 || number === 34 || number === 36) {
color = "Red";
} else {
color = "Black";
}
// Map the color names to CSS color values
if (color === "Green") {
return "rgb(0, 128, 0)";
} else if (color === "Red") {
return "rgb(255, 0, 0)";
} else {
return "rgb(0, 0, 0)";
}
}
function workingOdd() {
var odEv;
if (x % 2 === 0) {
odEv = 'Ev';
} else {
odEv = 'Od';
}
// the rest of the function
}
function backgroundline() {
if (spinNumber % 2 === 0) {
backline="#D3D3D3"
} else {
backline="#E5E4E2";
}
}
function spin(number) {
// Determine the color of the number
var color = roulette(number);
spinNumber= spinNumber 1;
bankRoll=bankRoll-10.25;
backgroundline();
// Display the result
var resultsDiv = document.getElementById("results");
var resultHTML = `${number}`;
resultHTML = `<div style="background: ${backline}; vertical-align:middle; margin-bottom:0px; border-bottom: 1px solid white;">
<div style="padding:5px; display: inline-block; background: yellow; color:black;vertical-align:middle; width:30px; text-align:right;">${spinNumber}</div>
<div style="margin: 0 10px; display:inline-block; width: 80px; text-align:center;vertical-align:middle">£${bankRoll}</div>
<div style="color: white; display: inline-block; width:30px;font-size: 25px; font-weight:600; height:30px; text-align:center; line-height: 30px; vertical-align:middle; background-color: ${color}; ">${number}</div>
<div style="color: white; display: inline-block; width:30px;font-size: 25px; font-weight:600; height:30px; text-align:center; line-height: 30px; vertical-align:middle; background-color: ${txtOdEv}; ">${odEv}</div>
</div>`;
resultsDiv.innerHTML = resultHTML;
document.getElementById('results').scrollTop = document.getElementById('results').scrollHeight;
updateBankroll();
}
// Set up the buttons
for (let i = 0; i <= 36; i ) {
let button = document.createElement("button");
button.innerHTML = i;
button.style.backgroundColor = roulette(i);
button.addEventListener("click", function() {
x = i;
workingOdd();
spin(i);
});
document.getElementById("numberButtons").appendChild(button);
}
function closeModal() {
// Get the modal element
var modal = document.getElementById("box");
// Remove the modal element from the DOM
modal.remove();
}
function showstakes() {
// show
document.getElementById("stakespanel").style.height="300px";
document.getElementById("togglestakesshow").style.width="0px";
document.getElementById("togglestakeshide").style.width="150px";};
function hidestakes() {
// hide
document.getElementById("stakespanel").style.height="0px";
document.getElementById("togglestakeshide").style.width="0px";
document.getElementById("togglestakesshow").style.width="150px";};
</script>
</body>
</html>
I have tried lots of different ways to get this working, and have done some testing, and it appears that the value does change at a certain moment in the script, but when the result is outputted when the number buttons are pressed it is always still as 'T'.
"${odEv}"
CodePudding user response：
This is because odEv is a global variable, but then you declare it as a local variable (this becomes a separate variable with no relation to the original). The local variable is the one you're changing.
Remove the var odEv; from workingOdd(), then it will operate on the global variable.
function workingOdd() {
// var odEv; // remove this
if (x % 2 === 0) {
odEv = 'Ev';
} else {
odEv = 'Od';
}
// the rest of the function
}