如何通过单击 JavaScript 中的按钮来更改文本和图像？-js教程-PHP中文网

如何通过单击 JavaScript 中的按钮来更改文本和图像？

可以使用 JavaScript 轻松更改指定给特定元素的文本和 img 元素中指定的图像。我们可以将 onclick 事件与 HTML 文档中的按钮元素一起使用，以便在单击按钮时发生这种情况。要更改按钮单击时的文本，我们将一个函数分配给 onclick 事件作为执行所需更改的值。

让我们通过代码示例详细了解使用 JavaScript 分别更改文本和图像的方法。

更改元素的文本

JavaScript 为我们提供了两个不同的属性来更改或获取 HTML 文档中元素的文本，下面列出了这两个属性及其功能和语法 -

以下语法将向您展示如何使用innerText属性来获取和更改元素的文本 -

selected_element.innerText = " new text ";

登录后复制

以下语法将向您展示如何使用innerHTML属性来获取或更改元素的文本 -

selected_element.innerHTML = " new text ";

登录后复制

让我们通过代码示例中的实际实现来理解这两个属性 -

第 1 步- 在第一步中，我们将输入元素添加到 HTML 文档中。这样，我们就可以用用户输入的文本更改以下段落的文本。
步骤 2- 在此步骤中，我们将添加一个带有与其关联的 onclick 事件的按钮标签，该标签将一个函数作为其值，并在用户单击按钮并更改时调用它段落的文本。
第 3 步- 在下一步中，我们将定义一个 JavaScript 函数，在该函数中我们将抓取用户输入的输入文本，并使用innerText 和innerHTML 属性来更改文本页面上下面的段落。

下面的示例将向您解释如何使用innerText和innerHTML属性来更改元素的文本 -

The text of the below element will be replaced by the text you enter in input bar once you click the button.

This is the initial text of Para1.

This is the initial text of Para2.

登录后复制

在上面的示例中，我们使用innerText 和innerHTML 属性更改了两个不同段落的文本。前一个的文本是使用innerText 属性更改的。同时，后一个文本的文本是使用innerHTML 属性更改的。

我们已经讨论了如何使用 JavaScript 更改 HTML 文档中元素的文本。不，我们将讨论如何仅通过使用 JavaScript 单击按钮来更改图像。

JavaScript 允许我们使用src属性来更改以及获取给定链接的值或给定 src 属性中的 img 元素的图像地址。

以下语法将展示如何使用src属性来更改网页上的图像 -

selected_img_element.src = " new link or address ";

登录后复制

现在让我们借助 JavaScript 代码示例来了解 src 属性更改图像的实际实现 -

Step 1- 在第一步中，我们将在 HTML 文档中添加一个img元素，其 src 属性包含一些初始值，稍后我们将使用 JavaScript 借助 src 属性更改该值。
第 2 步- 在下一步中，我们将添加一个带有 onclick 事件的按钮元素，该事件将在单击按钮时调用一个函数。
第 3 步- 在这一步中，我们将定义 JavaScript 函数并通过其 id 获取其中的 img 元素。
步骤 4- 在最后一步中，我们将使用 src 属性更改 src 属性的值，并为其指定一个新值以在网页上显示一些新图像。每次单击该按钮时，用户都会在每次单击时在两个图像之间切换。