How to print a javascript value in HTML?
Question
Description: I took a spinning wheel code from Github and edited it and created 2 spinning wheels. The thing is that when the wheel stops and chooses a number (or letter) it displays it as an alert // alert(value); //. I would like to know how to print the number under the wheel instead of showing it as an alert. I tried document.body.textContent += value; // but it displays the result on another blank page instead. Here's the code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="src/rouletteWheel.js"></script>
<script type="text/javascript">
$(function(thisis){
var itemsToShow = 100;
var wheel = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100]
var items = {};
for(var i=0; i < itemsToShow; i++){
items[i] = wheel[i]
}
$('#canvas').rouletteWheel({
items : items,
selected : function(key, value){
alert(value);
},
spinText : 'Ticket Number',
});
});
</script>
<title></title>
</head>
<body style="background-color:black;" ></body>
<canvas id="canvas" width="740" height="740"></canvas>
</body>
</html>
2 answers
solution1
0 2020-08-07 13:38:21
You need to specify or create a HTML element that will hold the value of said wheel. Something along the lines of...
<div>
<h3> Results are: </h3>
<h3 id="result"></h3>
</div>
And instead of the alert function use something like.
$("#result").text(value)
Overall you should be more specific in you question description and making your script runnable in from of a snippet would help people find a answer for you.
solution2
0 ACCPTED 2020-08-07 13:41:20
To print the number under the wheel you had to create an html element inside body tag of your web page, for example
<p id="show_alert_value_p"></p>
than in your Js code add this line instead of alert
$('#canvas').rouletteWheel({
items : items,
selected : function(key, value){
//alert(value);
//comment alert and add below line
$('#show_alert_value_p').html(value);
},
spinText : 'Ticket Number',
});
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.