Question

我开始尝试构建Chrome扩展程序（首次接触HTML和Javascript）并陷入基本任务。我有popup.html文件，这是用户看到的。我想做的是有一些最初显示给用户的占位符文本。弹出窗口还有一个按钮，这样当用户点击按钮时，占位符文本将替换为其他内容。

以下是我测试的内容：

popup.html：

<!doctype html>
<html>
  <head>
    <title>Test Extension</title>
    <script src="popup.js"></script>
  </head>
  <body>
      <form id="testForm">
          <input id="testButton" type="submit" value="testButton" />
      </form>
      <h3 id="textHeader">This will change.</h3>
  </body>
</html>

popup.js：

function changeText() {
    document.getElementById('textHeader').innerHTML = 'Changed!';
}

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('testForm').addEventListener('submit', changeText);
});

当我调试脚本时，我看到调用changeText的初始addEventListener调用，并使弹出窗口中的文本更改为“Changed！”。但是，然后我看到addEventListener的第二次调用，然后返回到原始的popup.html表单。净效果是“改变了！”只是暂时出现。

有没有办法在事件监听器中永久更改HTML文件以获得预期的行为？我意识到我真的需要了解DOM模型以及Javascript如何在浏览器中与它进行交互。我正在寻找一本书或其他资源来咨询（Mozilla开发者网络网站看起来像一个很好的权威来源，但似乎有点稀疏），但同时希望通过这个来完成至少一些额外的理解简单的例子。谢谢！

编辑：

谢谢大家的快速回复！禁用表单提交是有道理的。我正在将此编辑添加到我的问题帖子中，因为我试图实现的原始任务确实需要使用表单。

我要做的是通过表单接收用户的输入，查询用户输入的短语的外部网站（例如：维基百科），然后显示在从查询中获取的弹出内容中

以下是我尝试的概要的骨架轮廓：

popup.html：

<!doctype html>
<html>
    <head>
        <title>Test Extension</title>
        <script src="popup.js"></script>
    </head>

    <body>
        <form id="WikipediaForm">
            <input type="text" id="userQuery" size="50"/>
            <input id="submitQuery" type="submit" value="Ask Wikipedia" />
        </form>
        <h3 id="WikipediaResponse">placeholder</h3>
    </body>

</html>

popup.js：

function changeText() {    
var req = new XMLHttpRequest();
askURL = 'http://en.wikipedia.org/wiki' + encodeURIComponent(document.getElementById('userQuery').value);
req.open("GET", askURL, false);

req.onload = function (e) {
    if (req.readyState === 4) {
        if (req.status === 200) {
                document.getElementById('WikipediaResponse').innerHTML = req.responseText; // i'm just dumping everything for now
            }
        } else {
            console.error(req.statusText);
        }
    }
};
req.send(null);
}

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('WikipediaForm').addEventListener('submit', changeText);
});

这也再次面临我在上一个示例中看到的相同问题，其中响应在恢复到占位符文本之前瞬间闪烁。但是，我现在无法遵循先前的答案，因为我需要提交表单。在表单的事件监听器中更改内容的常用方法是什么？

另一方面，我正在使用同步XMLHttpRequest调用，我知道这是不推荐的。但是当我使用异步调用时，它似乎没有通过，我无法弄清楚如何解决这个问题，所以这也是我正在研究的另一个问题。

Answer 1

使用：

function changeText() {
    document.getElementById('textHeader').innerHTML = 'Changed!';
    //Returning false will prevent that the form submission completes
    return false;
}

但是如果您的表单永远不会在任何地方发送数据，那么您根本不需要表单（除非您要为您的字段使用重置按钮）。因此，您只需将type="button"添加到元素中即可。

<body>
      <input id="testButton" type="button" value="testButton" />
      <h3 id="textHeader">This will change.</h3>
</body>

Answer 2

您需要从事件处理程序返回false以防止在处理程序运行后提交正常的表单：

function changeText() {
    document.getElementById('textHeader').innerHTML = 'Changed!';
    return false;
}

javascript在事件监听器中更改html

2 个答案: