Question

my code is :
html with the js in section please ch3eck it out i need to prodeuce the result of the form of five questions and display it in the last section of the page where am i going wrong am using innerhtml js thing to produce the result in the last section

<div id="section1">
    <script type="text/javascript">
        function changeText2() {
            alert("working");
            var count1 = 0;
            var a = document.forms["myForm"]["drop1"].value;

            var b = document.forms["myForm"]["drop2"].value;
            alert(document.forms["myForm"]["drop2"].value);

            var c = document.forms["myForm"]["drop3"].value;
            var d = document.forms["myForm"]["drop4"].value;
            var e = document.forms["myForm"]["drop5"].value;
            var f = document.forms["myForm"]["drop6"].value;

            if (a === 2) {
                count1++;
                alert(count1);
            } else {
                alert("lit");
            }

            if (b === 2) {
                count1++;
            } else {
                alert("lit");
            }

            if (c === 2) {
                count1++;
            } else {
                alert("lit");
            }

            if (d === 2) {
                count1++;
            } else {
                alert("lit");
            }

            if (e === 2) {
                count1++;
            } else 
                alert("lit");
        }
        alert(count1);


        document.getElementById('boldStuff2').innerHTML = count1;
    </script>

    <form name="myForm">
        <p>1)&#x00A0;&#x00A0;Who won the 1993 &#x201C;King of the Ring&#x201D;?</p>
        <div>
            <select id="f1" name="drop1">
                <option value="0" selected="selected">-- Select --</option>
                <option value="1">Owen Hart</option>
                <option value="2">Bret Hart</option>
                <option value="3">Edge</option>
                <option value="4">Mabel</option>
            </select>
        </div>
        <!--que1-->
        <p>2)&#x00A0;&#x00A0;What NHL goaltender has the most career wins?</p>
        <div>
            <select id="f2" name="drop2">
                <option value="0" selected="selected">-- Select --</option>
                <option value="1">Grant Fuhr</option>
                <option value="2">Patrick Roy</option>
                <option value="3">Chris Osgood</option>
                <option value="4">Mike Vernon</option>
            </select>
        </div>
        <!--que2-->
        <p>3)&#x00A0;&#x00A0;What Major League Baseball player holds the record for
            all-time career high batting average?</p>
        <div>
            <select id="f3" name="drop3">
                <option value="0" selected="selected">-- Select --</option>
                <option value="1">Ty Cobb</option>
                <option value="2">Larry Walker</option>
                <option value="3">Jeff Bagwell</option>
                <option value="4">Frank Thomas</option>
            </select>
        </div>
        <!--que3-->
        <p>4)&#x00A0;&#x00A0;Who among the following is NOT associated with billiards
            in India?</p>
        <div>
            <select id="f4" name="drop4">
                <option value="0" selected="selected">-- Select --</option>
                <option value="1">Subash Agrawal</option>
                <option value="2">Ashok Shandilya</option>
                <option value="3">Manoj Kothari</option>
                <option value="4">Mihir Sen</option>
            </select>
        </div>
        <!--que4-->
        <p>5)&#x00A0;&#x00A0;Which cricketer died on the field in Bangladesh while
            playing for Abahani Club?</p>
        <div>
            <select id="f5" name="drop5">
                <option value="0" selected="selected">-- Select --</option>
                <option value="1">Subhash Gupte</option>
                <option value="2">M.L.Jaisimha</option>
                <option value="3">Lala Amarnath</option>
                <option value="4">Raman Lamba</option>
            </select>
        </div>
        <!--que5--> <a href="#services" class="page_nav_btn next"><input type='button' onclick='changeText2()' value='NEXT'/></a>

    </form>
</div>
<div id="section2"></div>...
<div id="results">
    <b id='boldStuff2'>fff ggg</b> 
</div>

need to display the results of each section at the last div as shown in script…
js for first section not working plz some help me where am i going wrong….

Answer 1

Updated _{Tip at bottom and new code for debugging}

It seems you havn’t quite grasped jQuery yet and i’m not sure what your JavaScript is supposed to do in the end as its obviously unfinished, but I took the liberty of rewriting your js in FULL jQuery syntax with some comments. I hope this might help you some.

<script type="text/javascript">
    function changeText2() {
        alert("working");
        
        var count1 = 0, //  just fyi, you could get all the following much easier if you used IDs instead, for instance:
            a = $('form[name="myForm"]').find('select[name=drop1]').val(),  //  $("#myForm") would retrieve <form id="myForm" ...
            b = $('form[name="myForm"]').find('select[name=drop2]').val(),
            c = $('form[name="myForm"]').find('select[name=drop3]').val(),
            d = $('form[name="myForm"]').find('select[name=drop4]').val(),
            e = $('form[name="myForm"]').find('select[name=drop5]').val(),
            f = $('form[name="myForm"]').find('select[name=drop6]').val();
        
        //  First error test here
        console.log(a, b, c, d, e, f);  //  also, you dont have to use alert to test things, try opening your browsers console
        
        //  really not sure what you had going with all the if statements, but they all produce the same result, well, here ...
        (a == 2 || b == 2 || c == 2 || d == 2 || e == 2 || f == 2) ? count1++ : alert("lit");
            
        //  Final Test in console what just happened
        console.log("A-F Equaled 2: ", (a == 2 || b == 2 || c == 2 || d == 2 || e == 2 || f == 2));
        console.log("count1: ", count1);

        
        alert(count1);
        
        $("#boldStuff2").text(count1);
    };
    
    //  The previous is just a function and not applied to anything
    //  which i noticed in your code may be a large part of your problem
    //  The following is the "document.ready function (if you're using a newer jQuery version you can shorten it, but thats another lesson)
    //  This tells the html, when the page loads, attempt this
    $(document).ready(function() {
        //  the following grabs the element named "myForms" and tells it, onSubmit, do what's inside
        $('form[name="myForm"]').submit(function(e) {
            e.preventDefault(); //  this command stops the form from submitting under normal browser rules
            changeText2();  //   this calls our predefined function
        });
    })
</script>

Additional Info

Also, you html for your button can be changed using the jQuery/JavaScript I’ve provided. Since my jQuery code has a function to handle form submission, the input button can therefor be a normal form submit button

Change:

<input type='button' onclick='changeText2()' value='NEXT'/>

To:

<input type="submit" value="NEXT">

Not that either method is incorrect, you could still use the button onclick if you want, but then you dont need my .submit code. Just something to keep in mind.

TIP

It is MUCH easier to Debug using CONSOLE rather than ALERT. To see the console in different browsers is a different process in each. Below I’ll tell you how to access the Console in the top 3 major browsers.

IE7+
– Simply press the "F12" key one time
– Then click on the "tab" that has the text "Console" (3rd from left)

FireFox
– The easiest method is to install FireBug
– Once installed, simply click on the little "bug" in the upper right of the browser
– then make sure the "Console" tab is active by clicking on it

Google Chrome
– Simply Press "Ctrl+Shift+J"
– Just a tip, make sure your Chrome browser has Window Focus when you do this shortcut keypress
– Also, click the "Console" tab and you can see all your consoled results there

Using your browser’s console is not only a great way to debug JavaScript but it will also tell you Errors in files loading, flag potential warning on things like cross-domain issues and much more!