单击按钮在此 ASP.net 网络表单上调用 javascript 函数？

Question

如何在单击按钮时在此 ASP.net 网络表单上调用此 javascript 函数？我在应用程序中添加了 .js 文件，但由于某种原因，按钮无法引用 .js 文件。我收到一个 Javascript 运行时错误，提示：divName 未定义。我究竟做错了什么？任何形式的帮助将不胜感激。谢谢！

Javascript 代码（文件为 check.js）：

    var counter = 1;
    var limit = 20;

function addInput(divName) {

    if (counter == limit) {
        alert("You have reached the limit of adding " + counter + " inputs");
    } else {
        var newdiv = document.createElement('div');
        newdiv.innerHTML =
            "Dimension Type " +
            "<br><input type='text' name='myInputs[]'>" + "Dimension " +
            "<br><input type='text' name='myInputs[]'>";

        document.getElementById(divName).appendChild(newdiv);
        counter++;
    }
  return true;
}

ASP.Net 按钮代码：

          <p class="auto-style9">

        <script src="check.js" type="text/javascript"></script>

        <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" OnClientClick="return addInput(divName);" />


    </p>
    <p class="auto-style9">

Answer 1

将您的 JS 函数更新为 return true 或 false 以防止回发并更改 OnClientClick 如下

OnClientClick="return addInput('divDimensions');"

在 ASPX 页面上更新 HTML，如下所示。

<script src="check.js" type="text/javascript"></script>
<div id="divDimensions"></div>
<p class="auto-style9">
    <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" OnClientClick="return addInput('divDimensions');" />
</p>

在JS中遵循当前的webform格式更新else条件如下

var table = document.getElementById("tableChecksheet");
var row = table.insertRow();
var cell1 = row.insertCell(0);
cell1.className = "auto-style3"
var cell2 = row.insertCell(1);
cell1.innerHTML = "<h2>Dimension Type</h2>";
cell2.innerHTML = "<br><input id='txtDimensionType" + counter + "' type='text' name='myInputs[]' style='width: 500px;'>";

var row = table.insertRow();
var cell1 = row.insertCell(0);
cell1.className = "auto-style3"
var cell2 = row.insertCell(1);
cell1.innerHTML = "<h2>Dimension</h2>";
cell2.innerHTML = "<br><input type='text' id='txtDimension" + counter + "'name='myInputs[]' style='width: 500px;'>";

counter++;

并在 HTML 中为您的主表提供一个 ID tableChecksheet，如下所示

<table align="center" class="auto-style2" id="tableChecksheet">

Answer 2

你应该只指定函数调用，没有javascript:前缀：

OnClientClick="addInput(divNAME);"

还有一些可能需要您注意的事情：

• 必须存在一个全局的javascript变量divNAME，并且值合适，因为在上面的js调用中用到了。
• 您在函数addInput(...) 内部定义了一个局部变量counter，但该变量超出范围并在每次函数结束时丢失其值。为了使其保持其值，您需要在函数addInput(...) 的外部 声明它。然后，您可以在 js 函数中增加其值等。