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中测试了上述代码作为扩展程序的选项页面。它在这种情况下工作正常。

以下是 manifest.json 文件，我曾将其作为Google Chrome扩展程序和Firefox WebExtension进行测试[注意：此 manifest.json 使用相同的文件 options.html 同时作为options_ui页面和browser_action popup]：

{
    "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 个答案: