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>
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',
});
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.
Related
Looking for some help here. Our class instructor is asking us to add a table into javascript using the document.write, I know this is not the recommended way to do this, but this is what our instructor is looking for:
Add code to the writeIt function that writes the opening table tag before iterating thru the heros and villians and then the closing table tag. Then modify the makeListItem to return a string in the form of tr td Hero td td Villan /td /tr.
I tried this but am getting a blank html page when try to view.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Functions</title>
<meta charset="utf-8" />
<script>
var superData = {"Super Man":["Lex Luther"],
"Bat Man":["Joker", "Riddler",],
"Spider Man":["Green Goblin",
"Vulture", "Carnage"],
"Thor":["Loki", "Frost Giants"]};
function writeIt('<table>'){
for (hero in superData){
var villains = superData[hero];
for (villainIdx in villains){
var villain = villains[villainIdx];
var listItem = makeListItem(<tr><td>Hero</td><td>Villan</td></tr>);
document.write(listItem);
}
}
}
function makeListItem(name, value){
var itemStr = "<li>" + name + ": " + value + "</li>";
return itemStr;
}
document.write('</table>');
</script>
</head>
<body onload="writeIt()">
</body>
</html>
Try this:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Functions</title>
<meta charset="utf-8" />
<script>
var superData = {
"Super Man": ["Lex Luther"],
"Bat Man": ["Joker", "Riddler", ],
"Spider Man": ["Green Goblin",
"Vulture", "Carnage"
],
"Thor": ["Loki", "Frost Giants"]
};
function writeIt() {
document.write('<table>');
for (hero in superData) {
document.write("<tr><td>" + hero + ": <ul>");
var villains = superData[hero];
for (villainIdx in villains) {
var villain = villains[villainIdx];
var listItem = makeListItem(villain);
document.write(listItem);
}
document.write("</ul></td></tr>");
}
}
function makeListItem(value) {
var itemStr = "<li>" + value + "</li>";
return itemStr;
}
document.write('</table>');
</script>
</head>
<body onload="writeIt()">
</body>
</html>
I tried this but am getting a blank html page when try to view.
Because you have syntax problems. Use F12 or the Inspector/Developer mode to find out why.
Our class instructor is asking us to add a table into javascript using the document.write, I know this is not the recommended way to do this, but this is what our instructor is looking for
True, it's often frowned upon, but JavaScript makes it available for a reason, so let's use it.
The first problem is that you seem to have transposed some code...
For example, you have function writeIt('<table>'). I think you meant document.write('<table>');.
function writeIt(){
document.write('<table>');
Next, you have your final document.write outside of your function call.
document.write('</table>');
This should be inside writeIt(), just after your for loop.
Finally, you have some unquoted stuff in your loop...
makeListItem(<tr><td>Hero</td><td>Villan</td></tr>);
Should be (single or double quotes):
makeListItem('<tr><td>Hero</td><td>Villan</td></tr>');
But that's still a bit off for a table. For example, Superman has a 1:1 ratio with his villains and Batman has a 1:2 ratio. You should be adding your rows and tables in a more predictable manner, but the above will at least start to give you output to work from.
Finally, an observation is that your makeListItem needs to use <ul> before it uses <li> so those problems need to be resolved. For now, I recommend you just spit the data out and format it later.
Im using basic html and javascript, and it doesnt work in any of my browsers or other computers. I get TypeError: document.getElementById(...) is null.
It works when I use the dev tools/console though. I cannot find anything wrong with what im writing, so I tried a few different ways and all fail with the same error.
<!doctyp html>
<html>
<head>
<title>Simple JSON</title>
<script type="text/javascript">
var info = { "Name":"My name", "Age":"My age", "links":{"PBS":"http://pbs.org", "Google":"http://google.com"}};
var output = "";
for (key in info.links){
output += "<li><a href='"+info.links[key]+"'>"+key+"</a></li>";
}
document.getElementById('links').innerHTML = output;
</script>
</head>
<body>
<ul id="links">
</ul>
</body>
</html>
The problem is your javascript is in the head element and is executed before the actual elements in the body are ready. Put it in an event that is called when the content is ready
document.addEventListener("DOMContentLoaded", function(event) {
var info = { "Name":"My name", "Age":"My age", "links":{"PBS":"http://pbs.org", "Google":"http://google.com"}};
var output = "";
for (key in info.links){
output += "<li><a href='"+info.links[key]+"'>"+key+"</a></li>";
}
document.getElementById('links').innerHTML = output;
});
Your script is running before the page has finished loading, so at the time of execution, your element with the ID links doesnt exist yet. Move the script to the bottom of the page and it should work fine.
<html>
<head>
<title>Simple JSON</title>
</head>
<body>
<ul id="links">
</ul>
<script type="text/javascript">
var info = { "Name":"My name", "Age":"My age", "links":{"PBS":"http://pbs.org", "Google":"http://google.com"}};
var output = "";
for (key in info.links){
output += "<li><a href='"+info.links[key]+"'>"+key+"</a></li>";
}
document.getElementById('links').innerHTML = output;
</script>
</body>
</html>
Try putting your <script> tag at the bottom of the body. The reason why you get null error is because at the time your javascript code executes <ul> tag has not been initialized yet.
HTML is an interpreted language. You need to put your JavaScript code after the closure of the <ul> markup or more generally before </body>
I'm building a webpage where you'll be able to display random elements fetched from a JSON database. For example, we could have a "what should I cook" button where you're given a random dish every time you click it.
So far, I've managed to create a button that, when clicked, writes out one (1) field from the several ones I have in my JSON file.
I want to add more elements to the JSON.
Also I'm trying to accomplish one of two alternatives:
Get the fields from a random element in the JSON file. (this is preferred over the second alternative)
OR
Get the elements from the JSON file in a specific order. So you could get a field from the first element when you click the button the first time, then one field from the second element when you click it the second time and so on.
Right now nothing works if I add another element.
This is how my code looks like right now.
JSON:
{
"visible": "1",
"date": "2011-01-16 19:48:27",
"submitterid": "2541",
"rating": "3",
"dubious": "1",
"imdbid": "0268126",
"id": "1919",
"title": "Adaptation",
"year": "2002"
}
HTML:
<html>
<head>
<title>hi</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js.js"></script>
<script>
var bechdelApi = "js.js";
$(document).ready(function(){
$("button").click(function(){
$.getJSON(bechdelApi, function(data){
$.each(data, function(i, field){
if (i == "title") {
$("div").append(field + " ");
}
});
});
});
});
</script>
</head>
<body>
<button>give me a movie!</button>
<div></div>
</body>
If you use TaffyDB, you could do something like this:
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.2/taffy-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<button class="movie-button">give me a movie!</button>
<div class="movies-container"></div>
</body>
</html>
<script>
var movies = TAFFY();
$.getJSON("yourAPICall", function( data ) {
movies.insert(data);
});
$(".movie-button").click(function(){
//updating each element in the movies db with the 'order' field, which is initialized with a random value
movies().update(function(){
this.order = Math.floor(Math.random() * 100);
return this;
});
//ordering the movies collection by the field 'order' and fetching the first movie on the new ordering
var movie = movies().order("order").first();
//appending movie title to container div
$(".movies-container").html($("<div class='movie-container'></div>").append(movie.title));
});
</script>
EXAMPLE: http://jsfiddle.net/87u27swk/
My code enables popping up alert dialog at the same time as the elapsed time goes by.
How can I do the same thing but in HTML not JavaScript dialog?
Do I have to do it with something related to AJAX?
Can anyone show me an example, please?
jQuery(document).ready(function () {
var comments = [{'time':'5','message':'hello! 5 secs has past'},{'time':'10','message':'hello! 10 secs has past'},{'time':'30','message':'hello! 30 secs has past'}];
$('#video').on('timeupdate',function(e){
showComments(this.currentTime);
});
function showComments(time){
var comments = findComments(time);
$.each(comments,function(i,comment){
alert(comment.message);
});
}
function findComments(time){
return $.grep(comments, function(item){
return item.time == time.toFixed();
});
}
});
HTML
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Show sequential messages in HTML</h1>
<p>
**Messages appears here instead of dialog**
</p>
</body>
In your showComments function, replace this line:
alert(comment.message);
Into these:
var messages = $('p').text();
$('p').text(messages + comment.message + "\n");
// Show for 5 seconds, then hide the `p` element.
$('p').show().delay(5000).fadeOut();
That way, it will fill the paragraph with the comment message(s).
I have included a file named test.php in the file index.php
lets assume index.php is like this
<html>
<head>
</head>
<body>
<h1 id="dash">Index</h1>
<div id='tab.php'>
<?php include('tab.php'); ?>
</div>
</body>
</html>
and tab.php is like this
<html>
<head>
</head>
<body>
<ul>
<li id='date' onClick="change_head(this.id);">Dates</li>
<li id='appoint' onClick="change_head(this.id);">Appointments</li>
<ul>
</body>
</html>
Here what i would like to do is, if the list item date is clicked(list items are actually tabs). The inner html of the h1 tag with id dash should be changed to Dates and if the list item appoint is clicked the inner html of same h1 tag with id dash should change to appointments.
how can i do that ?? i tried the usual javascript way by taking the ids and applying the if condition to change the innerHTML but it was not working..anyone pls help me how to do it
JAVASCRIPT (this is the js i tried to achive it...i added this in index.php)
function change_head(id){
dash = document.getElementById('dash').innerHTML;
if(id == date){
dash = "Date";
}
else if(id == appoint){
dash = "Appointment";
}
else{
dash = "Index";
}
}
You could try using jquery... something like this:
<script type="text/javascript">
$(document).ready(function () {
$("li#date").click(function () {
$("h1#dash").val("Dates");
});
$("li#appoint").click(function () {
$("h1#dash").val("Appointments");
});
});
</script>
Of course, if you had more of these tabs, I would create a single click event handler for all "li" elements and switch on the ID :-)
Assuming you're new to jquery, you'd also have to include the jquery script in your page. Something like:
<script src="/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
Check out jquery.com to get started.
If you want do it with JavaScript (i.e. without page reloading), so you need use DOM innerHTML.
Something like (if you didn't use jQuery), didn't test this code through, hope you get idea:
var changetext = function(e,t) {
e.innerHTML = t;
},
elemheader = document.getElementById('dash'),
elemdate = document.getElementById('date'),
elemappoint = document.getElementById('appoint');
if (elemdate.addEventListener) {
elemdate.addEventListener('click',changetext(elemheader,'Date'),false);
}
if (elemappoint.addEventListener) {
elemappoint.addEventListener('click',changetext(elemheader,'Appoint'),false);
}