Javascript函数未调用onClick()

时间:2011-02-27 12:13:22

标签: javascript forms onclick

我正在尝试清理我们网站上的一些代码(目前的形式,我们必须为我们提供的所有产品制作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;
        }

2 个答案:

答案 0 :(得分:8)

您的代码有几个问题。

语法问题

1。 最好避免在自己的行上添加大括号,或者automatic semicolon insertion会在某个时间找到你。

  

更新(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');
});

答案 1 :(得分:1)

此行有语法错误:

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

...这可能是你没有看到警报的原因。如果你修复它,你可能会发现函数被调用(因为上面的语法错误阻止它被定义)。

一旦你达到调用该函数的程度,你仍然会遇到(无关)问题:你的switch语句的语法错误,尽管相当无害的方式只要你确实希望所有条件都相互渗透。单个case未包含在大括号中,解析器完全忽略了那些大括号。您使用case终止break,因此:

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

    case 12:
        window.location = "https://www.xfactorservers.com/clients/cart.php?a=add&pid=" + pid + "&configoption[" + cfopID + "]=" + cfopValue;
        break;

    default:
        // do whatever you do if nothing matches (this is optional)
        break;
}

没有中断,每个case的代码将流入下一个。例如,在您的原始版本中,如果slots10,则首先将窗口位置设置为10情况下的窗口位置,然后执行将继续使用12个案并将其设置到其他位置等等。


偏离主题:您可以在该功能中分解出 lot 的共性<;例如:

function ProcessOrder(loc,pid,cfopID)
{
    var values = document.dropTop.slots.value;
    var valuesArray = values.split("|");
    var slots = valuesArray[0];
    var cfopValue = valuesArray[1];
    var destinationMap = {
            "10": "pid=" + pid + "&configoption[" + cfopID + "]=" + cfopValue,
            "12": "pid=" + pid + "&configoption[" + cfopID + "]=" + cfopValue,
            "14": "pid=167&configoption[44]=459",
            "16": "pid=167&configoption[44]=460",
            "18": "pid=167&configoption[44]=461",
            "20": "pid=167&configoption[44]=462",
            "22": "pid=167&configoption[44]=463",
            "24": "pid=167&configoption[44]=464",
            "26": "pid=167&configoption[44]=465",
            "28": "pid=167&configoption[44]=466",
            "30": "pid=167&configoption[44]=467",
            "32": "pid=167&configoption[44]=468"
        };
    var dest = destinationMap[slots];
    if (dest) {
        window.location = "https://www.xfactorservers.com/clients/cart.php?a=add&" + dest;
    }
    else {
        // Do whatever you should do if `slots` isn't a value you recognize
    }
}

(我在每个字符串中留下pid=,因为在我看来它对上下文有帮助。)