This is all new to me and is hurting my brain. I'm attempting to make a hide the numbers and guess where it is kind of thing and I have gotten this far. I need to make a board of numbers 1-n (n via client input). I want to have every number in the array represented by an image (haven't made the image yet), and when the client clicks the image, the image will disappear revealing the number behind it. The numbers must be shuffled prior to clicking any images. The problem is that when the shuffle button is clicked, the numbers have commas seperating the numbers and they run outside the div. Here is what I have so far, I'm pulling my hair out with this javascript stuff, anyone got any ides.....thanks. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var nums = [] function display_array() { n = document.getElementById('input').value ; for (var i = 1; i <= n; i++) { document.getElementById('numberbox').innerHTML +=(nums.push(i)+" "); } } function shuffle() { var arr = document.getElementById('numberbox').innerHTML; document.getElementById('numberbox').innerHTML =" ";{ shuffle = function(o){ //v1.0 for(var j, x, i = o.length; i; j = parseInt(Math.random() * n), x = o[--i], o[i] = o[j], o[j] = x); return o; }; newArray = shuffle(nums); document.getElementById('numberbox').innerHTML +=newArray; } } function reset_counter() { document.getElementById('numberbox').innerHTML = ''; document.getElementById('input').value = ''; document.getElementById('input').focus(); nums.length = 0; } window.onload = function() { document.getElementById("input").focus(); } </script> </head> <body style="height:100px;width:100%;background-color:#000000;color:#ffffff;font-weight:bold;"> <div id="header" style="height:100px;width:100%;"> <center> <h1>Number Guess</h1> <input type="text" size="2" style="border: 6px solid #C0C0C0; text-align: center; font-size: 18PX; font-family: impact, times new roman; color: #B0C4DE; background-color: #190033; " id="input"> <input type="button" class="buttons" style="color: #B0C4DE; font-weight: bold; border: 6px solid #C0C0C0; background-color: #190033;" onclick="display_array()" size="2" value="GO"> <input type="button" style="color: #B0C4DE; font-weight: bold; border: 6px solid #C0C0C0; background-color: #190033;" onclick="shuffle()" size="15" value="SHUFFLE NUMBERS"> <input type="reset" style="color: #B0C4DE; font-weight: bold; border: 6px solid #C0C0C0; background-color: #190033;" onclick="reset_counter()" value="RESET"> </center> </div> <div id="left" style="width:20%;height:100%;float:left;"> </div> <div id="content" style="float:left;width:60%; height:100%;"> <center> <div id="numberbox" style="border:6px solid blue;font-size:40px;width:80%; height:100%;color:blue;text-align:center;padding-top:50px;"> </div> </center> </div> <div id="right" style="width:20%;height:100%;float:right;"> <center> <p>INSTRUCTIONS</p> </center> </div> </body> </html> Code (markup): I hope I did this correctly!
This line: document.getElementById('numberbox').innerHTML +=newArray; Should be document.getElementById('numberbox').innerHTML +=newArray.join(''); By the way, why are you using a loose doctype?
Thanks..........the doctype thing, I'm not a coder by trade. I'm broken up a bit and in bed at the moment and decided to try my hand at some coding, Can't afford to pay anyone and didn't want a template site. I basically don't have a clue what I'm doing.....thanks! Oh, by the way, you wouldn't happen to know how to insert images into multiple divs that can be clicked to make the image vanish from each div independently. I have managed to create a div for each array index location (1-n) and want to cover all of the div contents with one button click but make each div clickable so the image disappears, revealing the number when clicked. Kind of long winded but that's what I'm looking to do, using jQuery. Changed the code late last night. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="Use your own psychic intuition to pick winning numbers with this new, FREE, game show type number picker."> <meta http-equiv="content-language" content="en-gb"> <meta http-equiv="Cache-Control" content="max-age=3600"> <link rel="shortcut icon" href="bluecraig2.ico" type="image/x-icon"> <meta name="p:domain_verify" content="1beeb6db468971ad6b768fbf6a014e82" > <link rel="shortcut icon" href="bluecraig2.ico" type="image/x-icon"> <link rel="image_src" href="http://www.psychiclotto.org/eyeclock.gif"> <title>What are the Lottery Numbers?</title> <style type="text/css"> body{background-color:#000000;background-image:url(nighttime.jpg) repeat-x;color:#ffffff;font-weight:bold;text-align:center;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;} div{text-align:center;} div.result{display:inline-block;background-color:#ffffff;height:40px;width:40px;border:2px solid blue;margin-left:10px;margin-right:10px;margin-bottom:10px;} #header{height:120px;width:100%;} #inp{border:6px solid #c0c0c0;text-align:center;font-size:18px;font-family:impact,'times new roman';color:#B0C4DE;background-color:#190033;} #left_div{display:inline-block;height:100%;float:left;width:20%;text-align:left;} #numberbox{display:inline-block;font-size:40px;width:55%;color:blue;margin-top:0px;} #right_div{display:inline-block;height:100%;width:20%;float:right} .butn{color:#b0c4de;font-weight:bold;border:6px solid #c0c0c0;background-color:#000000;cursor:pointer;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> Array.prototype.shuffle=function(){ for(var i=this.length-1; i>0; i--){ var num=Math.floor(Math.random()*(i+1)),d=this[num]; this[num]=this[i];this[i]=d; } return this; } var nums=[]; function display_array(){ nums.length=0; var n=$('#inp').val(),mask=/[\d]{1,2}/ig,output=''; if(!mask.test(n)){output='Wrong input format';} if(n<2){output='The array is too short';} else{nums.length=0;for(var i=1;i<=n;i++){nums.push(i);output+='<div class="result">'+i+'</div>';}} $('#numberbox').html(output); } function shufl(){ if(nums.length>0){ nums.shuffle(); var output=''; for(var i=0; i<nums.length; i++){output+='<div class="result">'+nums[i]+'</div>';} $('#numberbox').html(output); } else{$("#inp").focus();} } function cover() { $("#numberbox").children().fadeOut(1000); $("#numberbox").children().fadeIn(1000); } function reset_counter(){ $('#numberbox').html(' '); $('#inp').val(''); $('#inp').focus(); nums.length = 0; } $(document).ready(function(){ $('#but_go').click(function(){if($('#inp').val()!==''){display_array();}else{$("#inp").focus();}}); $('#but_shuf').click(function(){shufl();}); $('#but_cover').click(function(){cover();}); $('#but_res').click(function(){reset_counter();}); $("#inp").focus(); }); </script> </head> <body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div id="header"> <input id="inp" type="text" size="2" maxlength="2"> <input id="but_go" type="button" class="butn" size="2" value="GO"> <input id="but_shuf" type="button" class="butn" size="15" value="SHUFFLE NUMBERS"> <input id="but_cover" type="button" class="butn" size="15" value="COVER NUMBERS"> <input id="but_res" type="button" class="butn" value="RESET"> </div> <div id="content"> <div id="left_div"> </div> <div id="numberbox"> </div> <div id="right_div"><p>INSTRUCTIONS</p></div> </div> </body> </html> Code (markup): I appreciate your help immensely, now are we able to hide the contents of each div and show them seperately? I'd kind of like to use an image but if a fader or something else would work better, then it's all good, thank you again.
That is EXACTLY what I'm looking for. Can I incorporate this into my program or do I need to rewrite it all again?
You can incorporate it, if you'd like. There are many improvements I could have made, but didn't because I had to go to class. The script currently loops through all 10 boxes every 50 ms, regardless of whether they are fading. Try finding a way to improve this.
The only thing I see that could speed up or slow down anything (besides length perhaps) would be this line... interval = setInterval(onFrame, 50); Code (markup): Looks like it controls fading? Like I said, I'm about clueless with this stuff. Speed of the program isn't really essential for me, nor is loading speed really. It's short enough not to take forever, functionality is what I crave.
OK, here's what I ended up with and it functions as intended. Could use some tuning. I like the background gif but it may lag some browsers. Anyway thanks for your help, and here's the site, still working on it. Thanks again. whatarethelotterynumbers......the one with the ORG domain ext.