Use values from two-handle, jquery-ui range slider in separate function
Question
I am making a page with a simple "dice roll" style game. The game is set up so the user can set a range of numbers using a slider with 2 range handles (made using jquery-ui), and if the random number that is generated when the "roll" button is pressed is within the set range on the slider, the large number displayed turns blue. If the number generated is outside their set range, the number turns red.
I also added a "bonus" feature that includes a second random number (designated as a "lucky number") that is generated concurrently, and if the random number matches the roll number it counts as a "Jackpot" and the large number turns yellow. This isn't a huge part of my problem, but it explains why there is a second random number generator amongst my javascript.
I have set all returned values to be logged to the console for debugging purposes - when the slider handles are moved, the console logs the high and low values (as well as a win percentage, but that is irrelevant for these purposes). Also, when the "roll" button is pressed, the random number generated that is designated as the "rolled number" is logged to the console, as is the second random number which is designated as the "lucky number".
Most of what I described is already functional on the page with one large exception: I cannot seem to use the values set by the range slider as range values in my roller() function (I had to set them manually - represented in my code as 9 and 95, respectively).
I have tried to take the values from the slider function and declare them without a var keyword with the aim of making them globally accessible, but the roller() function still doesn't seem to recognize them. I suspect this may be caused by the slider values not being "set/initialized" when the page first loads, but my knowledge of javascript (particularly jQuery) seems to be inadequate to solve this problem.
My issue simply stated: I need to first make sure the two values provided by the range slider are not null when the page loads, and secondly, I need a way to use those values to represent the "win range" in my roller() function.
Any help would be greatly appreciated.
My code is below
//HTML/Javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<title>ROLLER</title>
</head>
<body>
<div class="wrapper">
<div class="whitespace"></div>
<div class="bignumber" id="number">50</div>
<div class="whitespace"></div>
<div class="whitespace"></div>
<div class="rangetext" id="slidervalue">
<label for="slidenumbers">NUMBER RANGE</label></div>
<input type="text" id="slidenumbers" name="slidenumbers">
<div class="rangeslider">
<div id="slider"></div>
</div>
<button class="rollonce" onclick="luckynumber(); roller()">ROLL</button>
<script>
//I NEED THIS FUNCTION TO LOAD ON PAGE LOAD SO THE SLIDER ALREADY HAS REGISTERED VALUES (as of now they are blank on page load with null value - I think)
$('#slider').slider({
slide: function(event, ui) {
$('#slidenumbers').val(ui.values[0] + " - " + ui.values[1]);
var top = ui.values[1]; ///AN ATTEMPT TO SET THE VALUES AS VARIABLES - DID NOT WORK
var bottom = ui.values[0];
// highNumber = top; ////// AN ATTEMPT TO MAKE THE VALUE VARIABLES GLOBAL - ALSO DID NOT WORK WHEN I ATTEMPTED TO USE THEM IN ROLLER() FUNCTION
//lowNumber = bottom;
console.log("BOTTOM VALUE - ", bottom);
console.log("TOP VALUE - ", top);
console.log(" --- WIN PERCENT CHANCE --- ", (top - bottom),"%");
},
min: 5,
max: 95,
values: [15, 85],
step: 1,
range: true,
orientation: "horizontal"
});
var lucky
function roller() {
random = Math.floor((Math.random() * 99) + 1);
document.getElementById('number').innerText = random;
console.log("Your rolled number:", random);
//THESE ARE THE VALUES (5 and 95) I NEED REPLACED WITH THE (LAST UPDATED) VALUES FROM THE TOP AND BOTTOM RANGE OF THE SLIDER SET BY THE USER
if (random > 5 || random < 95 && random != lucky) {
document.getElementById('number').setAttribute('class', 'bignumber2');
} if (lucky == random && random > 5 && random < 95) {
document.getElementById('number').setAttribute('class', 'bignumber');
console.log("MATCH! - LUCKY NUMBER:", lucky, "RANDOM NUMBER:", random);
} else if (random <= 5 || random >= 95 && random != lucky) {
document.getElementById('number').setAttribute('class', 'bignumber1');
}
};
function luckynumber(){
random1 = Math.floor((Math.random() * 99) + 1);
console.log("-------------------------");
console.log("Lucky number: ", random1)
lucky = random1
};
</script>
</div>
</body>
</html>
//CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
text-align: center;
}
body, html{
background: #222;
font-family: sans-serif;
height: 100%;
overflow: hidden;
}
.wrapper{
background: #000;
background-size: cover;
height: 55.9vw;
text-align: center;
width: 30%;
margin-left: 35vw;
}
.bignumber{
color: #FFFF00;
font-size: 23vw;
font-weight: 500;
font-family: sans-serif;
margin-left: 1vw;
}
.bignumber1{
color: #FF0000;
font-size: 23vw;
font-weight: 500;
font-family: sans-serif;
margin-left: 1vw;
}
.bignumber2{
color: #0000FF;
font-size: 23vw;
font-weight: 500;
font-family: sans-serif;
margin-left: 1vw;
}
.rangetext{
color: #FFFFFF;
font-size: 2.5vw;
font-weight: 300;
margin-top: 1vw;
}
.rangeslider{
height: 3vw;
margin-left: 3.5vw;
margin-top: 1vw;
position: relative;
width: 22vw;
}
#slider .ui-slider-range{
background: #0CF;
border: 1px solid #AAF;
outline: none;
}
#slider .ui-slider-handle{
background: #000;
border: 3px double #FA0;
outline: none;
}
#slidenumbers{
background: none;
border: none;
color: #AADDFF;
font-family: sans-serif;
font-size: 2vw;
height: 2.5vw;
outline: none;
width: 10vw;
}
.rollonce{
background: transparent;
border: .1vw solid rgba(255,215,0,0.8);
border-radius: 5px;
color: #AADDFF;
cursor: pointer;
font-family: sans-serif;
font-size: 3vw;
font-weight: 700;
height: 5vw;
margin-top: 3vw;
outline: none;
padding-top: 0vw;
text-align: center;
width: 22vw;
}
.rollonce:hover{
box-shadow: 0px 0px 20px 10px #FF7500
}
.whitespace{
height: 1.5vw;
width: 100%;
}
I apologize for the abundance of code - I tried making a fiddle, but it didn't display properly. That's my next problem...
1 answers
solution1
1 ACCPTED 2019-04-29 15:55:27
JQuery UI Slider has methods that allows you to read the values like this
var top = $('#slider').slider( "values", 0 );
var bottom = $('#slider').slider( "values", 1 );
Here is how you'd use it in your roller function:
function roller() {
random = Math.floor((Math.random() * 99) + 1);
document.getElementById('number').innerText = random;
console.log("Your rolled number:", random);
var top = $('#slider').slider( "values", 0 );
var bottom = $('#slider').slider( "values", 1 );
if (random > bottom || random < top && random != lucky) {
document.getElementById('number').setAttribute('class', 'bignumber2');
} if (lucky == random && random > bottom && random < top) {
document.getElementById('number').setAttribute('class', 'bignumber');
console.log("MATCH! - LUCKY NUMBER:", lucky, "RANDOM NUMBER:", random);
} else if (random <= bottom || random >= top && random != lucky) {
document.getElementById('number').setAttribute('class', 'bignumber1');
}
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.