動態創建 HTML 表單不起作用

Question

我正在嘗試為 Chrome 擴展程序的選項頁面創建多個表單，但是當我單擊“添加”時，這些表單沒有出現。

options.html

<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>
  <header>
    <h1>My Tabs</h1>
  </header>
  <form id='fields'>
    <button id="createNew">Add...</button>
  </form>

  <div id="status"></div>
  <button id="save">Save</button>

</body>
  <script src="./js/options.js"></script>
</html>

options.js

function render_form() {
  let counter = 0;
  let newdiv = document.createElement('div');
  newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
  document.getElementById('fields').appendChild(newdiv);
  counter++;
}

document.getElementById('createNew').addEventListener('click', render_form());

當我從最后一行取出調用時（即說render_form而不是render_form() ），輸入字段根本不存在，但是當我調用時，初始字段將在那里，但什么都不會發生單擊Add...按鈕。

Answer 1

如果您的代碼僅使用非 Chrome API 基本 HTML + JavaScript（您的代碼）並且它在常規瀏覽器頁面環境中不起作用，那么它在 Chrome 擴展選項頁面或彈出窗口中將不起作用。

您的代碼實際上不起作用，因為您試圖將render_form()的返回值分配為您的事件偵聽器：

addEventListener('click', render_form());

如果您將其更改為實際將render_form函數分配為事件偵聽器：

addEventListener('click', render_form);

它實際上會添加<input>元素。 它可能不是您想要的（即counter始終為0 ）。

您的問題意味着您希望默認情況下有一個輸入字段。 因此，我在將其添加為偵聽器后添加了對render_form()函數的調用。 我還將counter移動到全局，以便您的計數可以按照您的意願進行。

 var counter = 0; function render_form() { let newdiv = document.createElement('div'); newdiv.innerHTML="Entry "+(counter + 1)+" <br><input type='text' name='myInputs[]'/>"; document.getElementById('fields').appendChild(newdiv); counter++; } document.getElementById('createNew').addEventListener('click', render_form); render_form();

 <!DOCTYPE html> <html> <head><title>My Test Extension Options</title></head> <body> <header> <h1>My Tabs</h1> </header> <form id='fields'> <button id="createNew" type='button'>Add...</button> </form> <div id="status"></div> <button id="save" type='button'>Save</button> </body> <!-- Comment out the external script which is required in a Chrome popup, but which does not work in a Stack Overflow snippet. <script src="./js/options.js"></script> --> </html>

除了這個片段之外，我還在谷歌瀏覽器中測試了上述代碼作為擴展的選項頁面。 在這種情況下它工作正常。

這是我用來作為 Google Chrome 擴展和 Firefox WebExtension 測試的manifest.json文件 [注意：這個manifest.json使用相同的options.html作為options_ui頁面和browser_action 彈出窗口]：

{
    "description": "Demonstrate changing the HTML of options.",
    "manifest_version": 2,
    "name": "change-option-form-demo",
    "version": "0.1",

    "applications": {
        "gecko": {
            //Firefox: must define id to use option_ui:
            "id": "change-option-form-demo@example.example",
            "strict_min_version": "48.0"
        }
    },

    "browser_action": {
        "default_icon": {
            "48": "myIcon.png"
        },
        "default_title": "Show panel",
        "browser_style": true,
        "default_popup": "options.html"
    },

    "options_ui": {
      "page": "options.html",
      "chrome_style": true
    }
}

動態創建 HTML 表單不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2016-09-27 23:56:48

動態創建 HTML 表單不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2016-09-27 23:56:48

解決方案1
1 已采納 2016-09-27 23:56:48