在每次點擊時使 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 function 中嘗試使用這種方法：

1. 創建一個新的<tr></tr>元素。
2. 將所有內容放入表格行中（為方便起見，存儲在newCamera變量中）。
3. 將行添加到表中。

我還從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>