javascript在事件监听器中更改html

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);
});

当我调试脚本时，我看到了初始的addEventListener调用，该调用调用changeText并使弹出窗口中的文本更改为“ Changed！”。 但是，我然后看到第二次调用addEventListener，然后将其恢复为原始的popup.html表单。 最终结果是“已更改！” 仅短暂出现。

有没有一种方法可以永久更改事件侦听器中的HTML文件以获得预期的行为？ 我意识到我确实需要了解DOM模型以及Javascript如何在浏览器中与之交互。 我正在寻找一本书或其他参考资料（Mozilla开发人员网络站点看起来像是一个权威的资料，但是似乎很少），但是与此同时，希望通过此工作至少能获得一些额外的理解。简单的例子。 谢谢！

编辑：

谢谢大家的及时答复！ 禁用表单提交是有意义的。 我将此编辑添加到我的问题中，因为实际上我要实现的原始任务确实需要使用表单。

我要做的是通过表单从用户那里输入输入，查询外部站点（例如Wikipedia）以输入用户输入的短语，然后在从查询中获取的弹出内容中显示。

这是我尝试过的基本概述：

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 个解决方案

解决方案1
2 已采纳 2014-06-19 04:26:47

解决方案2
1 2014-06-19 04:26:54

javascript在事件监听器中更改html

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-06-19 04:26:47

解决方案2 1 2014-06-19 04:26:54

解决方案1
2 已采纳 2014-06-19 04:26:47

解决方案2
1 2014-06-19 04:26:54