Question

如何通过单击按钮在此ASP.net webform上调用此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

您应该只指定函数调用，不带 javascript:前缀：

OnClientClick="addInput(divNAME);"

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

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

Answer 2

将您的JS功能更新为<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css"> <script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script> <script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script> <script src="https://npmcdn.com/vue@2.5.16/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-template-compiler@2.5.15/browser.js"></script> <script src="https://rawgit.com/vuejs/vue-test-utils/2b078c68293a41d68a0a98393f497d0b0031f41a/dist/vue-test-utils.iife.js"></script>或return true，以防止回发并更改false，如下所示

OnClientClick

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

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

按照当前的webform格式更新JS中的else条件，如下所示

<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>

在HTML中，为主表提供ID 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++;，如下所示

tableChecksheet

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

2 个答案: