hi all.
i'm struggling with the following code - can't seem to get the variables within the function to work...

``````<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teabag calculator</title>
<script language="javascript" type="text/javascript">
var single=0;
var dbl=80;
var total=single + dbl;
var i=0;
function maketea()
{
//button is pressed.
/*
The variables are:	singles
doubles
singles + doubles
*/
//Create a random number, multiply up so it matches the total
var randomnumber=(Math.floor(Math.random()*total));
//set the counter
i=++i;
//Test
if (randomnumber>single)
//low, ie single
/*if a single bag is pulled, the doubles are unaffected, the singles fall by one
the total number falls by one, and the number of tries increases by one*/
{
single=--single;
//if (single<0){single++};

total=dbl+single;
document.getElementById('tries').innerHTML=i;
document.getElementById('doubles').innerHTML=dbl;
document.getElementById('singles').innerHTML=single;
document.getElementById('total').innerHTML=total;
document.getElementById('doubles').style.color="black";
document.getElementById('singles').style.color="red"
}
else //(randomnumber==1)
//high, ie double
/*if a double is pulled, the doubles fall by one, the singles increase by one,
thetotal number left stays the same*/
{
dbl=--dbl;
//if (dbl<1)	{dbl=0};
single=++single;
alert ("Greater: Singles left:" + single);
alert ("Greater: Doubles left:" + dbl);
total=dbl+single;
document.getElementById('tries').innerHTML=i;
document.getElementById('doubles').innerHTML=dbl;
document.getElementById('singles').innerHTML=single;
document.getElementById('total').innerHTML=total;
document.getElementById('singles').style.color="black";
document.getElementById('doubles').style.color="red";
}
}
if ((dbl=0)&&(single=0)){
alert('You have run out of tea!!')
};;
</script>
<style type="text/css">
<!--
.style1 {font-size: large}
.style2 {
font-family: "Trebuchet MS";
background-color: #FF9933;
text-align: center;
}
-->
</style>

<body class="style2">
<div>
</div>
<div>
<center>
<INPUT TYPE="button" NAME="myButton" VALUE="Make the tea!" onClick="maketea()">
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#CC9900" bgcolor="#FF9933">
<caption align="top">
<span class="style1">In the box</span>
</caption>

<tr>
<td width="60"><strong>Doubles left</strong></td>
<td width="60"><strong>Singles left</strong></td>
<td width="60"><strong>Total (1's & 2's) in the box</strong></td>
</tr>
<tr>
<td class="style1" id="tries">0    </td>
<td class="style1" id="doubles">80</td>
<td class="style1" id="singles">0</td>
<td class="style1" id="total">80</td>
</tr>
</table>
</div>
</body>
</html>``````
2
Contributors
1
2
Views
7 Years
Discussion Span
Last Post by Airshow

Alil,

The main problem is the criterion for deciding whether the chosen bag is single or double. `if (randomnumber>single)` will always equate to true, so only single bags can be chosen. In the absence of anything to prevent it, singles go negative!

Here's a working version (with a few tweaks):

``````<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teabag calculator</title>
<style type="text/css">
.style1 { font-size: large }
.style2 {
font-family: "Trebuchet MS";
background-color: #FF9933;
text-align: center;
}
table {
margin: 6px 0;
}
th, td {
background-color: #ffd205;
border: 1px solid #663300;
}
table#log { width: 550px; }
table#log th, table#log td {
font-size: 9pt;
}
.narrow { width: 10%; }
.wide { width: 70%; }
</style>

<script language="javascript" type="text/javascript">
var el_tries    = document.getElementById('tries');//table cell
var el_doubles  = document.getElementById('doubles');//table cell
var el_singles  = document.getElementById('singles');//table cell
var el_total    = document.getElementById('total');//table cell
var el_makeTea  = document.getElementById('makeTea');//button
var el_reset    = document.getElementById('reset');//button
var el_eventLog = document.getElementById('eventLog');//tbody

var single, dbl, i, total;

function makeTea(){
if(total <= 0) { return; }
i++;
if (Math.random() <= (single/total)){
//low, ie single
// if a single bag is pulled, the doubles are unaffected, the singles fall by one
single--;
updateValues();
el_singles.style.color = "red";
el_doubles.style.color = "black";
}
else{
// high, ie double
// if a double is pulled, the doubles fall by one and the singles increase by one
dbl--;
single++;
updateValues();
el_singles.style.color = "black";
el_doubles.style.color = "red";
}
}
function updateValues(coding){
total = 2*dbl + single;
el_tries.innerHTML = i;
el_doubles.innerHTML = dbl;
el_singles.innerHTML = single;
el_total.innerHTML = total;
var msg = '';
if(total <= 0){ msg = "You have run out of tea!!"; }
else if(single == 2*dbl){ msg = 'Equal probability next teabag will be a single or one of a double'; }
if(msg) { logEvent(msg); }
}
function logEvent(msg){
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');
el_eventLog.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
td1.className = 'narrow';
td2.className = 'narrow';
td3.className = 'narrow';
td4.className = 'wide';
td1.innerHTML = i;
td2.innerHTML = dbl;
td3.innerHTML = single;
td4.innerHTML = msg;

}
function clearLog(){
while(el_eventLog.hasChildNodes()){
el_eventLog.removeChild(el_eventLog.firstChild);
}
}

function reset(coding){
single = 0;
dbl = 40;
i = 0;
updateValues();
clearLog();
};
el_makeTea.onclick = makeTea;
el_reset.onclick = reset;
reset();
};
</script>

<body class="style2">
<div>
</div>
<div>
<center>
<caption align="top"><span class="style1">In the box</span></caption>
<tr>
<th width="60"><strong>Doubles</strong></th>
<th width="60"><strong>Singles</strong></th>
<th width="60"><strong>Total teabags in the box</strong></th>
</tr>
<tr>
<td class="style1" id="tries"></td>
<td class="style1" id="doubles"></td>
<td class="style1" id="singles"></td>
<td class="style1" id="total"></td>
</tr>
</table>
<input id="makeTea" type="button" value="Make the tea!">&nbsp;
<input id="reset" type="button" value="Reset">
<table id="log" border="0" cellpadding="2" cellspacing="2" width="700">
<caption align="top">Event Log</caption>
<tr>
<th class="narrow">Doubles</th>
<th class="narrow">Singles</th>
<th class="wide">Description</th>
</tr>
<tbody id="eventLog"></tbody>
</table>
</div>
</body>
</html>``````

Note that x++ (and ++x) increments x without needing x=....
Same for x-- (and --x).

You will see that I decided it was better to count doubles as (1xdouble = 2xbags), therefore we start with 40 doubles (80 bags) and the total is always (singles + 2*doubles).

By splitting the code into several functions, each chunk can be called from each of several places as required.

Take the effort to understand the code and you will learn from it.

With a little effort it could rival World of Warcraft and Medal of Honour combined.

By the way, I think the chosen answer to the Teabags query is only partially correct. What he says is sort of right but it does not answer the question posed.

Airshow

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.