Javascript problem

Question

I'll admit I was not thinking straight when I wrote this...

Memory Test

The numbers are...

        </div>
        <div id="email">
            <input id="a"></input>
            <input id="b"></input>
            <input id="c"></input>
            <input id="d"></input>
            <input id="e"></input>
            <input id="f"></input>
            <input id="g"></input>
            <input id="h"></input>
            <input id="i"></input>
        </div>
        <script>
        function timeMsg()
        {
        var t=setTimeout("alertMsg()",500);
        }
        function alertMsg()
        {
            document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="one" id="one" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet()"/>');
            document.getElementById('number').value = 'no cheating...';
            }

        function changeSet() {
            var s=setTimeout("alertYea()",500);
            var a=document.getElementById('a').innerHTML = (document.getElementById("one").value);
            document.getElementById('remember').innerHTML = ('<p id="bumper">2</p>');
            document.getElementById('number').value = '9264';
        }
        function alertYea() {
            document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="two" id="two" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet2()"/>');
            document.getElementById('number').value = 'no cheating...';

            }

        function changeSet2() {
            var a=setTimeout("alertYea2()",500);
            var b=document.getElementById('b').innerHTML = (document.getElementById("two").value);
            document.getElementById('remember').innerHTML = ('<p id="bumper">3</p>');
            document.getElementById('number').value = '38671';
        }

        function alertYea2() {
            document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="three" id="three" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet3()"/>');
            document.getElementById('number').value = 'no cheating...';

            }

        function changeSet3() {
            var a=setTimeout("alertYea3()",500);
            var c=document.getElementById('c').innerHTML = (document.getElementById("three").value);
            document.getElementById('remember').innerHTML = ('<p id="bumper">4</p>');
            document.getElementById('number').value = '938263';
        }

        function alertYea3() {
            document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="four" id="four" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet4()"/>');
            document.getElementById('number').value = 'no cheating...';

            }

        function changeSet4() {
            var a=setTimeout("alertYea4()",500);
            var d=document.getElementById('d').innerHTML = (document.getElementById("four").value);
            document.getElementById('remember').innerHTML = ('<p id="bumper">5</p>');
            document.getElementById('number').value = '8351032';
        }

        function alertYea4() {
            document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="five" id="five" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet5()"/>');
            document.getElementById('number').value = 'no cheating...';

            }

        function changeSet5() {
            var a=setTimeout("alertYea5()",500);
            var e=document.getElementById('e').innerHTML = (document.getElementById("five").value);
            document.getElementById('remember').innerHTML = ('<p id="bumper">6</p>');
            document.getElementById('number').value = '02619815';
        }

        function alertYea5() {
            document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="six" id="six" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet6()"/>');
            document.getElementById('number').value = 'no cheating...';

            }

        function changeSet6() {
            var a=setTimeout("alertYea6()",500);
            var f=document.getElementById('f').innerHTML = (document.getElementById("six").value);
            document.getElementById('remember').innerHTML = ('<p id="bumper">7</p>');
            document.getElementById('number').value = '274619523';
        }

        function alertYea6() {
            document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="seven" id="seven" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet7()"/>');
            document.getElementById('number').value = 'no cheating...';

            }

        function changeSet7() {
            var a=setTimeout("alertYea7()",500);
            var g=document.getElementById('g').innerHTML = (document.getElementById("seven").value);
            document.getElementById('remember').innerHTML = ('<p id="bumper">8</p>');
            document.getElementById('number').value = '1681324849';
        }

        function alertYea7() {
            document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="eight" id="eight" type="text"></input></br><input id="answer" type="button" value="Next" onClick="changeSet8()"/>');
            document.getElementById('number').value = 'no cheating...';

            }

        function changeSet8() {
            var a=setTimeout("alertYea8()",500);
            var h=document.getElementById('h').innerHTML = (document.getElementById("eight").value);
            document.getElementById('remember').innerHTML = ('<p id="bumper">9</p>');
            document.getElementById('number').value = '48372605629';
            emailData.data.value = h;
        }

        function alertYea8() {
            document.getElementById('remember').innerHTML = ('<h3>Times up partner, what were they?</h3></br><input name="nine" id="nine" type="text"></input></br><p id="send"></p><input id="answer" name="submit" type="button" onclick="finals()" value="Next"/>');
            document.getElementById('number').value = 'no cheating...';

            }
        function finals() {
            var i = document.getElementById('i').innerHTML = (document.getElementById("nine").value);
            document.getElementById('remember').innerHTML = ('<div id="send"><form action="mailto:[email protected]" method="POST" enctype="text/plain" name="emailData"></br><input id="data" type="text" size="20" name="data"><br><input type="submit" value="Submit and continue to letters!"></form></div>');

            emailData.data.value = a + b + c + d + e + f + g + h + i;
            }
        </script>

    </div>
</body>

The problem lies in the last line,

emailData.data.value = a + b + c + d + e + f + g + h + i;

The page only returns the value of input id i, not input ids a-h. Instead, it displays like tons of [object HTMLInputElement] for each input id value. I'm even calling .value. How can I fix this so that

emailData.data.value = a + b + c + d + e + f + g + h + i;

displays a set of respective values instead?

UPDATE:

I declared the following variables ahead of all functions:

        var a = document.getElementById("a").value;
    var b = document.getElementById("b").value;
    var c = document.getElementById("c").value;
    var d = document.getElementById("d").value;
    var e = document.getElementById("e").value;
    var f = document.getElementById("f").value;
    var g = document.getElementById("g").value;
    var h = document.getElementById("h").value;
    var i = document.getElementById("i").value;

and now I'm only returning i...

Could you rephrase your question for other's understanding? and change the title it doesnt say anything about your code. — Sanjeevakumar Hiremath
– Sanjeevakumar Hiremath, Commented Mar 15, 2011 at 0:28
Your variables are local to their respective functions, so how can you reference them in the finals() function? — mVChr
– mVChr, Commented Mar 15, 2011 at 0:29
Those new variables you've added get the initial value of a, b, c etc the first time the page loads, that's why they're all zero. You're not actually setting the values of those elements until later. — Town
– Town, Commented Mar 15, 2011 at 0:55

Paul Kearney - pk · Accepted Answer · 2011-03-15 00:28:11Z

1

Your variables a-h are declared inside of functions, so they are not available outside of those functions. You need to declare a-h outside of the function bodies, then set their values inside of the functions.

answered Mar 15, 2011 at 0:28

Paul Kearney - pk

5,55328 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Town · Accepted Answer · 2011-03-15 00:53:09Z

0

Is jQuery permitted and are you after passing a total figure to emailData.data.value? If so, you can use this in your finals() function:

var total= 0;
$('input', '#email').each(function () {
    total += parseInt($(this).val());
});
emailData.data.value = total;

answered Mar 15, 2011 at 0:53

Town

14.9k3 gold badges50 silver badges72 bronze badges

8 Comments

Town Over a year ago

Then you've got something in the input fields that isn't a number - check in the source of your page to see what values are set for each input element.

hubrid Over a year ago

yeah, vars a-h are giving [object HTMLInputElement] instead of a value. i even supplied .value

Town Over a year ago

That jQuery code doesn't use the variables you've defined though, which suggests (if you're using it, that is!) that your inputs have a non-integer character in them somewhere that parseInt() can't handle.

hubrid Over a year ago

well, i entered in all numbers, and it still gave NaN

Town Over a year ago

As your 'a', 'b', 'c' etc are all defined out of scope in your original example, then referencing 'a' in finals() will just be getting the element 'a', which is of type HTMLInputElement, and calling toString() on it.

|

bcoughlan · Accepted Answer · 2011-03-15 00:29:03Z

0

You've set the variable i in the line var i = document.getElementById('i').innerHTML = (document.getElementById("nine").value);. i refers to the variable i, not to the control with id i.

You'll have to do

var a = document.getElementById('number').value

etc.

Edit: Ah I see you've declared a..h inside your methods. Remember that var a only applies within the curly brackets that it's declared inside, so declare them at the start of your script by doing var a=0 etc. This is called the 'scope' of your variables.

answered Mar 15, 2011 at 0:29

bcoughlan

26.7k20 gold badges96 silver badges149 bronze badges

2 Comments

hubrid Over a year ago

hmm i set them all to 0 and it is not returning only i again but with a zero infront of it. i.e. so if i=576, the output is 0576

bcoughlan Over a year ago

Take the 'var' out of 'var a' within the functions, otherwise it will be setting a local variable

Gabe · Accepted Answer · 2011-03-15 00:29:34Z

0

In the function that contains emailData.data.value = a + b + c + d + e + f + g + h + i;, i is the only variable that you declare. You'll notice that variables a, b, etc. are not declared either in that function or globally.

answered Mar 15, 2011 at 0:29

Gabe

87.1k13 gold badges144 silver badges239 bronze badges

Collectives™ on Stack Overflow

Javascript problem

The numbers are...

4 Answers 4

Comments

8 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The numbers are...

4 Answers 4

Comments

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related