Javascript函数未调用onClick()

Question

我试图清理我们网站上的一些代码(目前的形式,我们必须为我们提供的所有产品制作50个左右的JS文件和50个左右的PHP文件).我正在看代码,它应该工作,所以我很困惑,我搞砸了.似乎根本没有调用函数(我在它的顶部放了一个从未调用过的警报)所以我假设我搞砸了第一部分的内容.

                <select class="gameserverselecion4" name="slots">
                    <option value="10|457">10 Slots - 9.90 / mo</option>
                    <option value="12|458">12 Slots - 11.88 / mo</option>
                    <option value="14|459">14 Slots - 13.86 / mo</option>
                <option value="16|460">16 Slots - 15.84 / mo</option>
                    <option value="18|461">18 Slots - 17.82 / mo</option>
                    <option value="20|462">20 Slots - 19.80 / mo</option>
                    <option value="22|463">22 Slots - 21.78 / mo</option>
                    <option value="24|464">24 Slots - 23.76 / mo</option>
                    <option value="26|465">26 Slots - 25.74 / mo</option>
                    <option value="28|466">28 Slots - 27.72 / mo</option>
                    <option value="30|467">30 Slots - 29.70 / mo</option>
                    <option value="32468">32 Slots - 31.68 / mo</option>
            </select>
            </div>
            <div id="inputTopRight">
                <input type="button" name="submit" onclick="ProcessOrder('0','167','44');"/>
            </div>

那么Javascript ......

function ProcessOrder(loc,pid,cfopID)
{
    var values = document.dropTop.slots.value;
    var valuesArray = values.split("|");
    var slots = valuesArray[0];
    var cfopValue = valuesArray[1];
    alert("Slots is: " + slots " cfopValue is:" + cfopValue);

    switch (slots)
    {
        case 10:
        {
            window.location = "https://www.xfactorservers.com/clients/cart.php?a=add&pid=" + pid + "&configoption[" + cfopID + "]=" + cfopValue;
        }
        case 12:
        {
            window.location = "https://www.xfactorservers.com/clients/cart.php?a=add&pid=" + pid + "&configoption[" + cfopID + "]=" + cfopValue;
        }

Answer 1

您的代码有几个问题.

语法问题

1. 最好避免将支架放在自己的线上,否则自动分号插入会让你在某个时间.

更新(2015年7月21日):正如评论中所指出的,在这种情况下应该没问题,因为返回的对象文字是不同的并且是边缘情况.不过,我仍然宁愿把支架放在同一条线上,只是为了安全起见.

所以不是这样的:

function sayHello()
{
    alert('Hello, world!');
}

你应该做这个:

function sayHello() {
    alert('Hello, world!');
}

2. 你不应该使用括号周围的情况.相反,用break语句结束它们.

更新(2015年7月21日):使用大括号很好,但它们不会替换break.如果您不使用它,它将在执行该特定情况后"落入"下一个案例.

错误:

switch (number) {
    case 4: {
        doSomething();
    }
    case 9: {
        doSomething();
    }
}

正确:

switch (number) {
    case 4:
        doSomething();
        break;
    case 9:
        doSomething();
        break;
}

3. switch语句和函数未关闭.

4.此线有一个语法错误.

alert("Slots is: " + slots " cfopValue is:" + cfopValue);
//                         ^---here

这是正确的语法:

alert("Slots is: " + slots + " cfopvalue is:" + cfopvalue);

造型问题

1.您可以组合多个var语句.

而不是这个:

var a = 'foo';
var b = 'bar';
var c = 'baz';

你可以这样做:

var a = 'foo',
    b = 'bar',
    c = 'baz';

2.您可以在switch语句中组合多个案例.

switch (number) {
    case 3:
    case 12:
        doSomething();
        break;
}

3.

alert("Slots is: " + slots + " cfopvalue is:" + cfopvalue);

这将显示如下:

插槽是:10 cfopvalue是:20

您可能希望插入换行符(\n)以使其看起来更好:

alert("slots is: " + slots + "\n" + "cfopvalue is: " + cfopvalue);

插槽是:10
cfopvalue是:20

4.将您的内容,样式和脚本分开.因此,不要使用内联事件处理程序,最好在JS代码中设置事件处理程序,如下所示:

function addEvent(element, eventType, eventHandler) {
    if (window.addEventListener) {
        element.addEventListener(eventType, eventHandler, false);
    } else {
        element.attachEvent('on' + eventType, eventHandler);
    }
}

用法示例:

addEvent(document.getElementsByName('submit'), 'click', function() {
    ProcessOrder('0', '167', '44');
});

您也可以使用像jQuery ^[docs]这样的库.它会使事情变得更简单.

更新(2015年7月21日):像jQuery这样的库是一个有用的工具,但你不应该完全依赖它们.熟悉"vanilla"JavaScript也很重要.

jQuery为您处理跨浏览器的不兼容性,并使用CSS选择器来选择元素.作为参考,这是你用jQuery编写上面的事件处理程序代码的方法:

$('[name="submit"]').click(function () {
    ProcessOrder('0', '167', '44');
});