事件侦听器中的javascript更改html_Javascript_Html_Event Listener

事件侦听器中的javascript更改html

javascript html

事件侦听器中的javascript更改html,javascript,html,event-listener,Javascript,Html,Event Listener,我开始尝试构建Chrome扩展（第一次接触HTML和Javascript），但遇到了一个基本任务。我有popup.html文件，这是用户看到的。我想做的是让一些占位符文本最初显示给用户。弹出窗口还将有一个按钮，这样当用户单击按钮时，占位符文本将替换为其他内容以下是我测试的内容： popup.html： <!doctype html> <html> <head> <title>Test Extension</title>

我开始尝试构建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>

调试脚本时，我会看到最初的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>

这同样也面临着我在上一个示例中看到的问题，在返回占位符文本之前，响应会闪烁一瞬间。但是，我现在无法按照前面的答案进行操作，因为我需要提交表格。更改窗体事件侦听器中内容的常用方法是什么

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

使用：

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>


这将改变。

您需要从事件处理程序返回

false

，以防止处理程序运行后正常表单提交：

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

您没有阻止提交表单。因此表单提交，页面重新加载。您可能还希望使用除innerHTML之外的DOM方法

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

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