SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question HELP Not sure with code

    Want to make a table with 1 column with 3 rows. The user enters the number 10 in the 1st row and either a 10 or 9 in the 2nd row and the result displayed in the 3rd row should say either 'ODD' or 'EVEN'.
    I don't want to declare the variable in the script, rather let the user enter the variable. The following is what I have done so far,,,,,,,,when I run the script by itself, it works fine. I just don't want a submit button showing, I want the program
    to display ODD or EVEN in the last textField.

    Any help or direction is very appreciated,,,, I'm new to javascript.....Correction, VERY NEW !!


    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>oddEven</title>
    </head>
    <script type="text/javascript">



    var p1 = "";
    var s1 = "";
    var d1 = document.write();

    if((p1==10)&&(s1==10)){
    document.write("Even");

    }
    if((p1==10)&&(s1==9)){
    d1=document.write("Odd");

    }

    </script>



    <body>
    <table width="50" border="1" cellpadding="5" cellspacing="5">
    <tr>
    <td align="center"><div align="center"><input type="text" id="p1" size="4" maxlength="4" /></div></td>
    </tr>
    <tr>
    <td align="center"><div align="center"><input type="text" id="s1" size="4" maxlength="4" /></div></td>
    </tr>
    <tr>
    <td align="center"><div align="center"><input type="text" id="d1" size="4" maxlength="4" /></div></td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    You'll want to run that calculation after both fields have been filled in. The easiest way to do this is to place the script at the end of the body, so that it can easily connect the script to the elements on the page.

    HTML Code:
    <html>
    <head>
        ...
    </head>
    <body>
        ...
        <script type="text/javascript" src="script.js"></script>
    </body>
    </html>
    When you've run the calculation, you'll want to run the calculation again if the first or second field changes after being filled in. You can put the scripting code in a function called calculate, and assign to the first two fields an onchange event that does the calculation.

    Code javascript:
    function calculate() {
        ...
    }
    document.getElementById('p1').onchange = calculate;
    document.getElementById('s1').onchange = calculate;

    The calculate function can check to see if both fields have been filled in, so that if one of the field hasn't been filled in it just won't run.


    Code javascript:
    function calculate() {
        var p1 = document.getElementById('p1');
        var s1 = document.getElementById('s1');
        var d1 = document.getElementById('d1');
        if (p1.value === '' || s1.value === '') {
            return;
        }
        d1.value = '';
        ...
    }

    Lastly, you can convert the form values in to actual numbers, so that you can perform the comparison and update the appropriate field.

    Code javascript:
    function calculate() {
        ...
        p1 = Number(p1.value);
        s1 = Number(s1.value);
     
        if (p1 === 10 && s1 === 10) {
            d1.value = 'Even';
        } else if (p1 === 10 && s1 === 9) {
            d1.value = 'Odd';
        }
    }

    Also, if you want someone to choose from a restricted set of numbers, you can easily achieve that by using a select field instead:

    HTML Code:
    <select id="p1">
        <option value="">please choose...</option>
        <option value="10">10</option>
    </select>
    ...
    <select id="s1">
        <option value="">please choose...</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But it still doesn't work. What am I missing?
    What I want is to have the user input 10 and 9 and then the program display the word Odd.
    Or have the user input 10 and 10 and display the word Even.

    Please be patient, if I did something real stupid. I'm very very new to all this...Thanks

    example of the table result desired:
    10
    10
    Even

    or

    10
    9
    Odd


    This is the html: (I'm about to style the table with css)

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>oddEven</title>
    </head>

    <body>

    <table width="50" border="1" cellpadding="5" cellspacing="5">
    <tr>
    <td align="center"><div align="center"><input name="p1" type="text" id="p1" size="4" maxlength="4" /></div></td>
    </tr>
    <tr>
    <td align="center"><div align="center"><input name="s1" type="text" id="s1" size="4" maxlength="4" /></div></td>
    </tr>
    <tr>
    <td align="center"><div align="center"><input name="d1" type="text" id="d1" size="4" maxlength="4" /></div></td>
    </tr>
    </table>
    <script type="text/javascript">

    function calculate() {
    var p1 = document.getElementById('p1');
    var s1 = document.getElementById('s1');
    var d1 = document.getElementById('d1');
    if (p1.value === '' || s1.value === '') {
    return;
    }
    d1.value = '';

    document.getElementById('p1').onchange = calculate;
    document.getElementById('s1').onchange = calculate;
    }

    function calculate() {

    p1 = p1.value;
    s1 = s1.value;

    if (p1 === 10 && s1 === 10) {
    d1.value = 'Even';
    } else if (p1 === 10 && s1 === 9) {
    d1.value = 'Odd';
    }
    }

    </script>


    </body>
    </html>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Well first of all, the onchange stuff should not be in the calculate function.
    Secondly, there shouldn't be two calculate functions. There should only be one instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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