Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-13-2013, 09:17 PM   PM User | #1
eydg
New Coder

 
Join Date: Sep 2012
Posts: 73
Thanks: 2
Thanked 1 Time in 1 Post
eydg is an unknown quantity at this point
randomly select an option upon clicking a radiobutton - a tiny correction needed

http://jsbin.com/apudev/9/edit

what it does is randomly picks a car from one of two lists chosen by the user.

the only thing is that the choice does not get reflected in the select field.

how to make it happen?
_____________________________________________________________
EDIT for clarity


Problem
once you click your choice of the country, the code should display in the select field a randomised brand, which it doesnot. it shows always either chevrolet of ford - the first cars from the list.

another indication that not all is well is that the alert appears twice each time, while it should only once.

pls help

Last edited by eydg; 02-15-2013 at 12:58 AM..
eydg is offline   Reply With Quote
Old 02-13-2013, 10:29 PM   PM User | #2
jmrker
Senior Coder

 
jmrker's Avatar
 
Join Date: Aug 2006
Location: FL
Posts: 2,797
Thanks: 30
Thanked 462 Times in 456 Posts
jmrker will become famous soon enough
Set the selectedIndex variable to the random selection chosen from the appropriate drop-down list.
jmrker is offline   Reply With Quote
Old 02-13-2013, 10:55 PM   PM User | #3
eydg
New Coder

 
Join Date: Sep 2012
Posts: 73
Thanks: 2
Thanked 1 Time in 1 Post
eydg is an unknown quantity at this point
yes, that's what i think the code is supposed to do.

it chooses the right select field by its id
Code:
var select= document.getElementById('s1');
it checks the number of items
Code:
var items = select.getElementsByTagName('option');
picks a random number of option
Code:
var index= Math.floor(Math.random() * items.length);
and makes the option by this number selected
Code:
select.selectedIndex = index;
in separation from the rest of the code, it works as expected.

but in combination, there is always either ford or chevrolet, i.e. the first options selected. considering that the alerted random numbers vary, this part of the code gives no effect.
eydg is offline   Reply With Quote
Old 02-14-2013, 08:25 AM   PM User | #4
felgall
Master Coder

 
felgall's Avatar
 
Join Date: Sep 2005
Location: Sydney, Australia
Posts: 5,528
Thanks: 0
Thanked 503 Times in 494 Posts
felgall is a jewel in the roughfelgall is a jewel in the roughfelgall is a jewel in the rough
The following code worked for me when I tested it. Refreshing the page enough times eventually gets all the values to display and although there was a bias toward 1 & 2 for a while it evened out as I refreshed more times.

Code:
<form>
<select id="s1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</form>

<script type="text/javascript">
var select= document.getElementById('s1');
select.selectedIndex= Math.floor(Math.random() * select.options.length);
</script>
__________________
Stephen
Learn Modern JavaScript - http://javascriptexample.net/
Helping others to solve their computer problem at http://www.felgall.com/
felgall is offline   Reply With Quote
Old 02-14-2013, 01:47 PM   PM User | #5
eydg
New Coder

 
Join Date: Sep 2012
Posts: 73
Thanks: 2
Thanked 1 Time in 1 Post
eydg is an unknown quantity at this point
yes, then why is the car always chevrolet or ford?

that is the point of my question.

maybe this part gets triggered before the options get populated?

Last edited by eydg; 02-14-2013 at 02:13 PM..
eydg is offline   Reply With Quote
Old 02-14-2013, 02:57 PM   PM User | #6
jmrker
Senior Coder

 
jmrker's Avatar
 
Join Date: Aug 2006
Location: FL
Posts: 2,797
Thanks: 30
Thanked 462 Times in 456 Posts
jmrker will become famous soon enough
Lightbulb

To test your theory, run the following and then open up the number of select options and run again.

The more options, the more randomness.

Code:
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<form>
<div id="debugger"></div>
<select id="s1">
<option>1</option>
<option>2</option>
<option>3</option>
<!-- <option>4</option> <option>5</option> <option>6</option> -->
</select>
</form>

<script type="text/javascript">
var select= document.getElementById('s1');
select.selectedIndex= Math.floor(Math.random() * select.options.length);

for (var i=0; i<100; i++) {
  document.getElementById('debugger').innerHTML += Math.floor(Math.random() * select.options.length)+', ';
}
</script>
</body>
</html>
jmrker is offline   Reply With Quote
Old 02-14-2013, 03:32 PM   PM User | #7
Philip M
Supreme Master coder!

 
Philip M's Avatar
 
Join Date: Jun 2002
Location: London, England
Posts: 17,098
Thanks: 197
Thanked 2,421 Times in 2,399 Posts
Philip M has a spectacular aura aboutPhilip M has a spectacular aura aboutPhilip M has a spectacular aura about
Quote:
Originally Posted by felgall View Post
The following code worked for me when I tested it. Refreshing the page enough times eventually gets all the values to display and although there was a bias toward 1 & 2 for a while it evened out as I refreshed more times.
I do not detect any bias. It worked perfectly on my tests.


Code:
<form>
<select id="s1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</form>


<script type="text/javascript">
var select= document.getElementById('s1');
for (var i=0; i<100; i++)  {
select.selectedIndex= Math.floor(Math.random() * select.options.length);
document.write(select.selectedIndex);  // 5315010225244432352211311100014220342110000244505414220343411410140314440031503010011014450553550305 
}
</script>
Be aware that random implies that the same number may be generated 2,3 or possibly even more times in succession, especially with a small number (6) of values.
Another approach would be to shuffle the numbers 1-6 into a random order, and then pick the next one in sequence, thus avoiding consecutive
appearances of the same number.

Code:
<script type = "text/javascript">

Array.prototype.shuffle = function() {
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1));
while (s.length) this.push(s.pop());
return this;
}

var count = 0;
var arr = [1, 2, 3, 4, 5, 6];
var sarr = arr.shuffle);
document.write(sarr);  // for testing

function shownext() {
alert (sarr[count]);  // for testing
count ++;
if (count >5) {count = 0};  // start the sequence again
select.selectedIndex = count;
}
</script>
__________________

All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.

Last edited by Philip M; 02-14-2013 at 04:09 PM..
Philip M is offline   Reply With Quote
Old 02-14-2013, 07:13 PM   PM User | #8
jmrker
Senior Coder

 
jmrker's Avatar
 
Join Date: Aug 2006
Location: FL
Posts: 2,797
Thanks: 30
Thanked 462 Times in 456 Posts
jmrker will become famous soon enough
Lightbulb

And alternatively...
Code:
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<form>
<div id="debugger"></div>
<p>
<select id="s1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option> <option>5</option> <option>6</option>
</select>
</form>

<script type="text/javascript">

var arr = [0,1,2,3,4,5];
var str = '';
for (var i=0; i<10; i++) { 
  arr.sort(function() { return 0.5 - Math.random();});
  str += arr.join(', ')+', ';
}
document.getElementById('debugger').innerHTML = str;


var select= document.getElementById('s1');
arr.sort(function() { return 0.5 - Math.random();});
select.selectedIndex = arr[0];

</script>
</body>
</html>
jmrker is offline   Reply With Quote
Old 02-14-2013, 07:27 PM   PM User | #9
Philip M
Supreme Master coder!

 
Philip M's Avatar
 
Join Date: Jun 2002
Location: London, England
Posts: 17,098
Thanks: 197
Thanked 2,421 Times in 2,399 Posts
Philip M has a spectacular aura aboutPhilip M has a spectacular aura aboutPhilip M has a spectacular aura about
Quote:
Originally Posted by jmrker View Post
arr.sort(function() { return 0.5 - Math.random();});


I have the idea in my mind that this sort function is biased. I may be wrong. Felgall may comment.
__________________

All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
Philip M is offline   Reply With Quote
Old 02-15-2013, 01:39 AM   PM User | #10
felgall
Master Coder

 
felgall's Avatar
 
Join Date: Sep 2005
Location: Sydney, Australia
Posts: 5,528
Thanks: 0
Thanked 503 Times in 494 Posts
felgall is a jewel in the roughfelgall is a jewel in the roughfelgall is a jewel in the rough
Quote:
Originally Posted by Philip M View Post
I have the idea in my mind that this sort function is biased. I may be wrong. Felgall may comment.
Yes - I ran tens of millions of tests of that sort code and found a definite bias toward values staying in the same place. You need to use a value of about 0.7 something to get closer to an unbiased result - 0.7 was still biased toward staying in place and 0.8 was biased the other way and I decided to not bother trying to run the trillions of tests that would be necessary to properly narrow it down further. Presumably there would be a way to calculate the value that would produce an unbiased result with that formula but it is easier to just replace it with a shuffle instead.


With the code I posted above that initially displayed a bias to the first two numbers (each of which appeared several times before a 5 appeared) I just kept refreshing the page and before long was getting a more even result - you would expect that you might sometimes get a bias like that with a properly random function and only when you check a large number of times would you expect the appearances of each to start to even out. Since there is nothing in that code that I know of that could introduce a bias to the results I can't see any point in setting up an automated test to record the outcomes of millions of tests the way I did to check whether the sort random function. I hadn't initially realised that the random sort was biased until someone suggested to me that a random compare of pairs of entries did not necessarily lead to random results being returned from the sort - it was then that I set up an automated test that sorted 10 numbers a million times and recorded how many times each number ended up in each position - which I then ran about a dozen times just to check that the bias that one test showed wasn't a fluke. I then started increasing the value from 0.5 to 0.6 and then 0.7 and 0.8 to see that the bias gradually reduced and then reversed. By that point I'd manually run the test about 50 times with each test running a million sorts.
__________________
Stephen
Learn Modern JavaScript - http://javascriptexample.net/
Helping others to solve their computer problem at http://www.felgall.com/
felgall is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 07:18 AM.


Advertisement
Log in to turn off these ads.