为什么这个 JavaScript 不显示确认框？答案

【问题标题】：Why doesn't this JavaScript display a confirm box?为什么这个 JavaScript 不显示确认框？
【发布时间】：2008-10-07 14:48:13
【问题描述】：

我正在尝试修复我继承的产品中的一些错误，并且我有这个 javascript 的 sn-p 应该突出显示几个框并弹出一个确认框。目前发生的情况是我看到这些框改变了颜色并且有 5 秒左右的延迟，然后就好像丢失的确认只是接受了自己。有没有比我更聪明的人看到这段代码有什么问题？

function lastCheckInv() {

    document.getElementById("ctl00$ContentPlaceHolderMain$INDet$txtInvNumber").style.background = "yellow";
    document.getElementById("ctl00$ContentPlaceHolderMain$INDet$txtInvNumber").focus();
    document.getElementById("ctl00_ContentPlaceHolderMain_INDet_AddCharges").style.background = "yellow";
    document.getElementById("ctl00_ContentPlaceHolderMain_INDet_lblFreight").style.background = "yellow";
    bRetVal = confirm("Are you sure the information associated with this invoice is correct?");

    return bRetVal;

}

【问题讨论】：

你如何调用 lastCheckInv() ？
除了疯狂的元素 id，我认为这与 C#、.net 或 asp.net 无关。

标签： c# .net asp.net javascript

【解决方案1】：

我能想到的唯一一件事是，如果确认前的其中一行抛出异常，而您实际上永远不会到达确认。

如果您使用的是 IE，请确保已启用脚本调试。如果您使用的是 Firefox，请安装 Firebug 插件并为您的网站启用它。

或者，对于非常原始的调试，只需在每个语句之后放置警报并找出它在哪里轰炸。

【讨论】：

如果你被IE卡住了，你可以使用DebugBar

【解决方案2】：

您应该使用以下方法从 JavaScript 引用您的控件：

document.getElementById(<%= txtInvNumber.ClientID %>).style.background = "yellow"

如果这没有帮助，请尝试在 JavaScript 中设置断点并单步执行以查看失败的位置。

【讨论】：

【解决方案3】：

这个测试脚本在 IE、Firefox 和 Opera 中运行良好。因此，您的基本语法似乎没有任何问题。问题出在 ID 中（这与它在 5 秒后确认的行为不符）或页面上其他一些冲突的 JavaScript 中。如果不查看更多页面内容，将很难为您提供帮助。

<script language="javascript">
function lastCheckInv() {

    document.getElementById("test1").style.background = "yellow";
    document.getElementById("test1").focus();
    document.getElementById("test2").style.background = "yellow";
    document.getElementById("test3").style.background = "yellow";
    bRetVal = confirm("Are you sure?");

    return bRetVal;

}
</script>

<form method="get" onsubmit="return lastCheckInv();">
    <input id="test1" name="test1" value="Hello">
    <input id="test2" name="test2" value="Hi">
    <input id="test3" name="test3" value="Bye">
    <input type="submit" name="Save" value="Save">
</form>

【讨论】：

【解决方案4】：

一些想法：.focus() 呼叫是否将您的确认隐藏在页面后面？或者可能是您的某个控件 ID 不正确导致 .style.background 引用失败？

您应该在显示确认框后设置焦点，否则确认框会抢走焦点，使该行失去意义。
不要像那样硬编码 ASP.Net id。虽然它们通常是一致的，但 ASP.net 的未来版本不能保证相同的方案，这意味着您在将来某个时候更新此代码时会让自己感到痛苦。使用控件的服务器端 .ClientID 属性将这些值作为可以引用的变量写入 javascript。

更新：
根据您对另一个回复的评论，如果函数返回 true，则此代码将导致回发。在这种情况下，除非您要返回 false，否则运行 .focus() 行根本没有意义。

【讨论】：

感谢您的建议。我肯定没有写那些硬编码的垃圾，我只是在开发一个不充满邪恶的新版本时试图解决这个问题。

【解决方案5】：

我不喜欢直接访问对象

document.getElementById("ctl00_ContentPlaceHolderMain_INDet_lblFreight").style.background = "yellow";

如果没有返回对象，JavaScript 将出错。我更喜欢的方法

var obj = document.getElementById("ctl00_ContentPlaceHolderMain_INDet_lblFreight");

if(obj)
{
    obj.style.background = "yellow";
}

我的猜测是您正在尝试访问不在 DOM 上的对象，因此它永远不会到达确认调用。

【讨论】：

【解决方案6】：

检查元素是否确实存在可能是值得的。另外，尝试将焦点延迟到 confirm() 之后：

function lastCheckInv() {

    var myObjs,bRetVal;

    myObjs=[
        "ctl00_ContentPlaceHolderMain_INDet_AddCharges",
        "ctl00_ContentPlaceHolderMain_INDet_lblFreight",
        "ctl00$ContentPlaceHolderMain$INDet$txtInvNumber"
    ];


    bRetVal = confirm("Are you sure the information associated with this invoice is correct?");

    for (var i=0, j=myObjs.length, myElement; i<j; i++){

        myElement=document.getElementById(myObjs[i]);

        if (!myElement){
        // this element is missing
        continue;
        }

        else {

        // apply colour
        myElement.style.background = "yellow";

       // focus the last object in the array

            if (i == (j-1) ){
            myObj.focus();
            }


        }

    }


    return bRetVal;

}

【讨论】：

【解决方案7】：

function lastCheckInv()

{    
   document.getElementById("ctl00_ContentPlaceHolderMain_INDet_txtInvNumber").style.background = "yellow";    
   document.getElementById("ctl00_ContentPlaceHolderMain_INDet_txtInvNumber").focus();    
   document.getElementById("ctl00_ContentPlaceHolderMain_INDet_AddCharges").style.background = "yellow";    
   document.getElementById("ctl00_ContentPlaceHolderMain_INDet_lblFreight").style.background = "yellow";    
   return confirm("Are you sure the information associated with this invoice is correct?");    
}

您的函数中的前两行错误，$ 位于 ASP.Net 控件的 UniqueID 中。

在客户端，您必须使用 ClientID，将 $ 替换为 _ 。

如果您确定控件存在，则上面的代码可能会工作。

【讨论】：

【解决方案8】：

bRetVal 是否真的在任何地方声明过？

如果不是，“var bRetVal = confirm....”是告诉 jscript 它是一个变量的友好方式。

【讨论】：