Filling in the content with javascript

Pain · 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:)

smerny · 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

smerny · April 2, 2012

sorry, should be

$(this).val(Math.ceil(Math.random()*9));

Pain · 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.

smerny · 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);
}

Pain · April 2, 2012

Nice one. However this function would fill in all 9 cells where i want to fill random number of cells.

smerny · 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?

Pain · 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.

smerny · 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);
}

Pain · 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?

smerny · April 3, 2012

you are attempting to change the values of the divs rather than the text inputs

Pain · 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?

nogray · 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');

Sign In

Filling in the content with javascript

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information