Pain Posted April 2, 2012 Share Posted April 2, 2012 Hi there. I have this code here: <div id="first"> <div id="cell"><input type="text" name="two_1" value="1" /></div> <div id="cell"><input type="text" name="two_2" value="2" /></div> <div id="cell"><input type="text" name="two_3" value="3" /></div> <div id="cell"><input type="text" name="two_4" value="4" /></div> <div id="cell"><input type="text" name="two_5" value="5" /></div> <div id="cell"><input type="text" name="two_6" value="6" /></div> <div id="cell"><input type="text" name="two_7" value="7" /></div> <div id="cell"><input type="text" name="two_8" value="8" /></div> <div id="cell"><input type="text" name="two_9" value="9" /></div> </div> Now i want to remove all those values and fill random number of divs with random numbers (1 to 9) using javascript, but don't know where to start. Any help would be very very appreciated:) Thanks:) Quote Link to comment https://forums.phpfreaks.com/topic/260190-filling-in-the-content-with-javascript/ Share on other sites More sharing options...
smerny Posted April 2, 2012 Share Posted April 2, 2012 before anything else.... id's are unique, you shouldn't have all those divs with the same id.. use class i'd put a class on each of the inputs (like class="two_input") use jquery and do something like this $('.two_input').each(function(){ $(this).val=Math.ceil(Math.random()*9); }); edit: val, not value for jquery Quote Link to comment https://forums.phpfreaks.com/topic/260190-filling-in-the-content-with-javascript/#findComment-1333549 Share on other sites More sharing options...
smerny Posted April 2, 2012 Share Posted April 2, 2012 sorry, should be $(this).val(Math.ceil(Math.random()*9)); Quote Link to comment https://forums.phpfreaks.com/topic/260190-filling-in-the-content-with-javascript/#findComment-1333562 Share on other sites More sharing options...
Pain Posted April 2, 2012 Author Share Posted April 2, 2012 Hey, thanks for the tip. However i would like to refrain from using jquery for this matter. If possible i'd like to do all this with javascript. Quote Link to comment https://forums.phpfreaks.com/topic/260190-filling-in-the-content-with-javascript/#findComment-1333568 Share on other sites More sharing options...
smerny Posted April 2, 2012 Share Posted April 2, 2012 var eles = document.getElementsByClassName('two_input'); for(var i=0; i<eles.length; i++) { eles[i].value=Math.ceil(Math.random()*9); } Quote Link to comment https://forums.phpfreaks.com/topic/260190-filling-in-the-content-with-javascript/#findComment-1333571 Share on other sites More sharing options...
Pain Posted April 2, 2012 Author Share Posted April 2, 2012 Nice one. However this function would fill in all 9 cells where i want to fill random number of cells. Quote Link to comment https://forums.phpfreaks.com/topic/260190-filling-in-the-content-with-javascript/#findComment-1333592 Share on other sites More sharing options...
smerny Posted April 2, 2012 Share Posted April 2, 2012 not exactly sure what you mean, could you specify exactly what you want to happen? - fill out the first [random number] of inputs with random numbers? - give a 50%(?) chance for each input to be filled with random numbers? - something else? Quote Link to comment https://forums.phpfreaks.com/topic/260190-filling-in-the-content-with-javascript/#findComment-1333602 Share on other sites More sharing options...
Pain Posted April 2, 2012 Author Share Posted April 2, 2012 - give a 50%(?) chance for each input to be filled with random numbers? Yeah that's exactly what i meant:) I compliment your deductive abilities. Sorry for an unclear explanation. Quote Link to comment https://forums.phpfreaks.com/topic/260190-filling-in-the-content-with-javascript/#findComment-1333726 Share on other sites More sharing options...
smerny Posted April 2, 2012 Share Posted April 2, 2012 suppose this would work var eles = document.getElementsByClassName('two_input'); for(var i=0; i<eles.length; i++) { if(Math.random() > 0.5) eles[i].value=Math.ceil(Math.random()*9); } Quote Link to comment https://forums.phpfreaks.com/topic/260190-filling-in-the-content-with-javascript/#findComment-1333731 Share on other sites More sharing options...
Pain Posted April 3, 2012 Author Share Posted April 3, 2012 I am doing something wrong, because they just don't fill in. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Pradinis</title> <link rel="stylesheet" type="text/css" href="sudoku_style.css" /> <script type="text/javacript"> function load() { var eles = document.getElementsByClassName('cell'); for(var i=0; i<eles.length; i++) { if(Math.random() > 0.5) eles[i].value=Math.ceil(Math.random()*9); } } </script> </head> <body onload="load()"> <div id="table"> <div id="first"> <div class="cell"><input type="text" name="one_1" /></div> <div class="cell"><input type="text" name="one_2" /></div> <div class="cell"><input type="text" name="one_3" /></div> <div class="cell"><input type="text" name="one_4" /></div> <div class="cell"><input type="text" name="one_5" /></div> <div class="cell"><input type="text" name="one_6" /></div> <div class="cell"><input type="text" name="one_7" /></div> <div class="cell"><input type="text" name="one_8" /></div> <div class="cell"><input type="text" name="one_9" /></div> </div> </div> </body> </html> I've created a function from your code and then tried to load it using body onload. Probably that's not the right way to do it? Quote Link to comment https://forums.phpfreaks.com/topic/260190-filling-in-the-content-with-javascript/#findComment-1333941 Share on other sites More sharing options...
smerny Posted April 3, 2012 Share Posted April 3, 2012 you are attempting to change the values of the divs rather than the text inputs Quote Link to comment https://forums.phpfreaks.com/topic/260190-filling-in-the-content-with-javascript/#findComment-1333949 Share on other sites More sharing options...
Pain Posted April 3, 2012 Author Share Posted April 3, 2012 Ive changed it to <script type="text/javacript"> function load() { var eles = document.getElementsByClassName('cell_one'); for(var i=0; i<eles.length; i++) { if(Math.random() > 0.5) eles[i].value=Math.ceil(Math.random()*9); } } </script> </head> <body onload="load()"> <div id="table"> <div id="first"> <div class="cell"><input type="text" class="cell_one" name="one_1" /></div> <div class="cell"><input type="text" class="cell_one" name="one_2" /></div> <div class="cell"><input type="text" class="cell_one" name="one_3" /></div> <div class="cell"><input type="text" class="cell_one" name="one_4" /></div> <div class="cell"><input type="text" class="cell_one" name="one_5" /></div> <div class="cell"><input type="text" class="cell_one" name="one_6" /></div> <div class="cell"><input type="text" class="cell_one" name="one_7" /></div> <div class="cell"><input type="text" class="cell_one" name="one_8" /></div> <div class="cell"><input type="text" class="cell_one" name="one_9" /></div> </div> but still not working. Should i remove the div classes? Quote Link to comment https://forums.phpfreaks.com/topic/260190-filling-in-the-content-with-javascript/#findComment-1333959 Share on other sites More sharing options...
nogray Posted April 4, 2012 Share Posted April 4, 2012 getElementsByClassName is not supported in IE before version 9, use getElementsByTagName, e.g. // "first" is the id for the main div that is holding all the input fields var eles = document.getElementById('first').getElementsByTagName('input'); Quote Link to comment https://forums.phpfreaks.com/topic/260190-filling-in-the-content-with-javascript/#findComment-1334428 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.