Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: User Input

  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    User Input

    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>
    Last edited by arwoodsnz; 08-16-2004 at 01:03 PM. Reason: Because of feedback from willy.

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You will most likely recieve better responses if you post the code you are working with...

    .....Willy

  • #3
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)
    Code:
    <!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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •