User Input

arwoodsnz

08-16-2004, 12:51 PM

Hi,
I am just starting to learn JS and want to have a user enter an unknown quantity of numbers (both positive and negative), then loop through the list/array I have put the numbers into, counting how many are negative, then outputting a message with the enitre list and the count of negative entries.

I have put a button on my page which calls a script runlist() which I thought I would then use prompt to get the numbers and then do a for loop incrementing a counter each time I found it was negative. Then I thought I would use the document.write function to output the message.

Where I am having probelsm are : a) it is real ugly with a prompt to get the numbers, perhaps a table which grows would be more elegant.
b) I have not worked out what parts I want in the header and which in the body.

This probably sounds real easy to you guys.

Due to feedback from Willy (thanks) here is my cirrent code

<input type="button" value="Click me!" name="myButton"
onclick="runlist()"><br>
<script language="JavaScript" type="text/javascript">
function runlist()
{
//
// this function asks the user to enter a list of numbers
//
var list = new Array;
var cntr = 0;
var test = 0;
var counter = 0;
var i = 1;
while (test < 99999)
{
test = prompt("Please enter a number (99999 to stop entering)","Enter Number Here");
if (test == 99999)
{
}
else
{
list[cntr] = test;
cntr++;
}
}
for (i=1; i<cntr;i++)
{
if (list[i] < 0)
{
counter++;
}
}
}
document.write("You Entered : " + list+ "<br>);
document.write("The list had " + counter + " negative values");
}
</script>

Willy Duitt

08-16-2004, 01:00 PM

You will most likely recieve better responses if you post the code you are working with...

.....Willy

sad69

08-16-2004, 10:38 PM

Well this wasn't the easiest, but not the hardest.. I've commented this enough (I think..), so it should be relatively easy to follow. If you have any questions, let me know: (works in IE 6 and FireFox 0.8)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Negatives Counter</title>

<script>
//add number to table; optionally clear text input and focus
function add(text_id, tbody_id, should_clear, should_focus) {
add_number(tbody_id, text_clear_focus(text_id, should_clear, should_focus));
}

//return value of text input; optionally clear text input and focus
function text_clear_focus(text_id, should_clear, should_focus) {
var text_elem = document.getElementById(text_id);
var text_value = text_elem.value; //store text

if(should_clear) {
text_elem.value = ''; //clear text input
}

if(should_focus) {
text_elem.focus(); //set focus on text input
}

return text_value;
}

//add value to table
function add_number(tbody_id, value_to_add) {
var tb = document.getElementById(tbody_id);

var tr = document.createElement('tr');
var td = document.createElement('td');
var val = document.createTextNode(value_to_add);

td.appendChild(val);
tr.appendChild(td);
tb.appendChild(tr);
}

//count negative values in table; optionally clear table, text, counter
function count_negatives(tbody_id, should_clear_tbody, text_count_id, text_id, should_clear_text, should_focus_text) {
var tb = document.getElementById(tbody_id);

//count negatives
var count_negatives = 0;
for(var i = 0; i < tb.childNodes.length; i++) {
if(tb.childNodes.item(i).firstChild.firstChild.nodeValue < 0)
count_negatives++;
}

document.getElementById(text_count_id).value = count_negatives; //set counter text field

if(should_clear_tbody) {
clear_tbody(tbody_id); //clear table
}

text_clear_focus(text_id, should_clear_text, should_focus_text); //clear/focus text field
}

//clear table
function clear_tbody(tbody_id) {
var tb = document.getElementById(tbody_id);

while(tb.childNodes.length > 0)
tb.removeChild(tb.firstChild);
}

//clear form
function clear_form(tbody_id, should_clear_tbody, text_count_id, should_clear_count, text_id, should_clear_text, should_focus_text) {
if(should_clear_tbody) {
clear_tbody(tbody_id);
}

text_clear_focus(text_id, should_clear_text, should_focus_text);

if(should_clear_count) {
document.getElementById(text_count_id).value = '0';
}
}
</script>

</head>
<body>

<table>
<tbody>
<tr>
<th>input</th>
<th></th>
<th>negative count</th>
</tr>
<tr>
<td>
<input type="text" id="input_text">
</td>
<td>
<button onclick="add('input_text','tbody_numbers', true, true);">add</button>
<button onclick="count_negatives('tbody_numbers', false, 'input_count', 'input_text', true, true);">count</button>
<button onclick="clear_form('tbody_numbers', true, 'input_count', true, 'input_text', true, true)">clear</button>
</td>
<td>
<input type="text" id="input_count" value="0" readonly>
</td>
</tr>
</tbody>
</table>

<table>
<tbody id="tbody_numbers"></tbody>
</table>

</body>
</html>

Hope that helps,
Sadiq.