0

我的代码是： html with the js in section please ch3eck 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 不起作用请帮助我我哪里出错了....

4

2 回答 2

2

您的问题似乎是大括号放在错误的位置。

您过早地结束了您的功能，“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/

于 2012-09-25T15:51:47.653 回答
0

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

看来你还没有完全掌握 jQuery，我不确定你的 JavaScript 最终应该做什么，因为它显然还没有完成，但我冒昧地用完整的 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 代码。只是要记住的事情。

提示

使用 CONSOLE 而不是 ALERT 进行调试要容易得多。在不同的浏览器中查看控制台是每个不同的过程。下面我将告诉您如何在前 3 大主流浏览器中访问控制台。

IE7+
- 只需按一次“F12”键
- 然后单击带有文本“控制台”的“选项卡”（左起第 3 个）

FireFox
- 最简单的方法是安装FireBug
- 安装后，只需单击浏览器右上角的小“错误”
- 然后通过单击确保“控制台”选项卡处于活动状态

Google Chrome
- 只需按“Ctrl+Shift+J”
- 提示，确保您的 Chrome 浏览器在执行此快捷键时具有窗口焦点
- 此外，单击“控制台”选项卡，您可以在那里看到所有控制台结果

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

于 2012-09-25T15:54:57.337 回答