Question

我的代码是：请参阅js in section ch3eck it out我需要提供五个问题形式的结果并将其显示在页面的最后一部分我出错我使用innerhtml js的东西在最后一节产生结果

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

需要显示最后一个div的每个部分的结果，如脚本中所示...
js第一部分没有工作PLZ一些帮助我哪里出错了....

Answer 1

你的问题在错误的地方似乎是大括号。

你太早结束了你的功能，“innerHTML”的东西超出了你的功能。我建议您使用正确的代码缩进，因此您可以更早地看到这些错误。

将您的代码更改为：

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

编辑：您还需要使用==而不是===。 ===还比较操作数的类型，即option值的“字符串”和文字的int。您也可以使用===，但是您需要将选项值与字符串文字进行比较，而不是数字。 e === "2"代替e === 2。

编辑了上面的代码。似乎现在工作。 http://jsfiddle.net/xzP8B/

Answer 2

更新了底部的_{提示和用于调试的新代码}

看起来你还没有完全掌握jQuery，我不确定你的JavaScript到底应该做什么，因为它显然未完成，但我冒昧地用FULL jQuery语法重写你的js并附带一些注释。我希望这对你有所帮助。

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

其他信息

此外，您可以使用我提供的jQuery / JavaScript更改您的按钮的html。由于我的jQuery代码具有处理表单提交的功能，因此输入按钮可以是普通表单提交按钮

变化：

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

要：

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

不是两种方法都不正确，如果你愿意，你仍然可以使用按钮onclick，但是你不需要我的.submit代码。请记住一些事情。

TIP

使用CONSOLE而不是ALERT调试更容易。要在不同浏览器中查看控制台，每个浏览器都有不同的过程。下面我将告诉您如何在前三大浏览器中访问控制台。

IE7 +
- 只需按一次“F12”键 - 然后单击“标签”，其中包含“控制台”文本（左起第3个）< / p>
FireFox
- 最简单的方法是安装FireBug
- 安装完成后，只需点击浏览器右上角的小“bug”即可
- 然后点击它确保“控制台”标签处于活动状态

谷歌浏览器
- 只需按“Ctrl + Shift + J”
- 只需提示，当您执行此快捷键时，请确保您的Chrome浏览器具有Window Focus < br /> - 另外，单击“控制台”选项卡，您可以在那里看到所有您安慰的结果

使用浏览器的控制台不仅是调试JavaScript的好方法，而且还会告诉您文件加载中的错误，标记跨域问题等方面的潜在警告！

如何使用jquery将结果放到最后

2 个答案: