HELP Not sure with code

njpete · January 22, 2012, 1:51am

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>

Paul_Wilkins · January 22, 2012, 3:55am

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>
<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.


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.


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.


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:



<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>

njpete · January 22, 2012, 7:13pm

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>

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>

Paul_Wilkins · January 22, 2012, 8:56pm

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.