使 Javascript 每次点击时打印字符串

Question

我试图让 JavaScript 每次单击按钮时打印一个字符串，但它只会在我第一次单击时打印它。

JavaScript:

function MoreCameras() {
         document.getElementById("AddCamera").innerHTML = "<tr><td><input type='text' name='SSIDSetup[]' class='form-control' placeholder='Camera SSID'></td><td><input type='text' name='NameSetup[]' class='form-control' placeholder='Camera Name'></td><td><input type='password' name='PasswordSetup[]' class='form-control' placeholder='Camera Password'></td><td><input type='checkbox' name='EnabledSetup[]'/></td></tr>";
    }

HTML:

<table>
     <div id="AddCamera"></div>
</table>
<button onclick="MoreCameras()">Add camera</button>

我试过类似的方法，但还是不行：

 function MoreCameras() {
        var div = document.getElementById("AddCamera").innerHTML,
            clone = "Long string here";
    }

Answer 1

您遇到的问题似乎是设置 innerHTML 而不是添加。

您可以使用 += 运算符添加到 innerHTML。

例如：

function MoreCameras() {
  document.getElementById("AddCamera") += "... some string ...";
}

Answer 2

您可以在 MoreCameras 函数中尝试使用此方法：

创建一个新的 <tr></tr> 元素。
将所有内容放入 table 行（为方便起见，存储在 newCamera 变量中）。
将行添加到 table。

我还从 table.

中删除了无用的 div

var newCamera = "<td><input type='text' name='SSIDSetup[]' class='form-control' placeholder='Camera SSID'></td><td><input type='text' name='NameSetup[]' class='form-control' placeholder='Camera Name'></td><td><input type='password' name='PasswordSetup[]' class='form-control' placeholder='Camera Password'></td><td><input type='checkbox' name='EnabledSetup[]'/></td>";

function MoreCameras() {
  var row = document.createElement("tr");
  row.innerHTML = newCamera;
  document.getElementById("AddCamera").appendChild(row);
}

<button onclick="MoreCameras()">Add camera</button>
<table id="AddCamera"></table>

使 Javascript 每次点击时打印字符串

Make Javascript print string on every click

javascript

onclick

getelementbyid