数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中通过点击按钮来更改文本和图片？
使用 JavaScript 可以轻松更改赋予特定元素的文本以及 img 元素中的图片。我们可以在 HTML 文档中的按钮元素上使用 onclick 事件，以便在点击按钮时发生此更改。为了在点击按钮时更改文本，我们将一个执行所需更改的函数作为值分配给 onclick 事件。
让我们借助代码示例详细了解使用 JavaScript 分别更改文本和图片的方法。
更改元素的文本
JavaScript 提供了两种不同的属性来更改或获取 HTML 文档中元素的文本，下面列出了这两种属性及其功能和语法：
innerText - JavaScript 的 innerText 属性用于更改或获取 HTML 文档中特定选定元素的先前文本。
语法
以下语法将向您展示如何使用 innerText 属性获取和更改元素的文本：
selected_element.innerText = " new text ";
innerHTML - innerHTML 属性不仅提供了元素的文本及其内部使用的所有子标签，还可以使用新文本中使用的子标签来更改元素的文本。
语法
以下语法将向您展示如何使用 innerHTML 属性获取或更改元素的文本：
selected_element.innerHTML = " new text ";
让我们通过代码示例中的实际实现来了解这两种属性：
算法
步骤 1 - 在第一步中，我们将输入元素添加到 HTML 文档中。这样，我们就可以使用用户输入的文本更改下面段落的文本。
步骤 2 - 在此步骤中，我们将添加一个按钮标签，并将其与一个 onclick 事件关联，该事件将函数作为其值，并在用户点击按钮时调用它，并更改段落的文本。
步骤 3 - 在下一步中，我们将定义一个 JavaScript 函数，在其中我们将获取用户输入的文本，并使用 innerText 和 innerHTML 属性更改页面下方段落的文本。
示例
下面的示例将向您解释 innerText 和 innerHTML 属性在更改元素文本方面的实际用法：
<html lang = "en">
<body>
<h2>Changing an Text of an element in the HTML document using JavaScript.</h2>
<p id = "upper">The text of the below element will be replaced by the text you enter in input bar once you click the button.</p>
<input type = "text" id = "inp"> <br> <br>
<button id = "btn" onclick = "changeImage()"> Click to change the Text </button>
<p id = "para1">This is the initial text of Para1.</p>
<p id = "para2">This is the initial text of Para2.</p>
<script>
var para1 = document.getElementById("para1");
var para2 = document.getElementById("para2");
function changeImage() {
var inp = document.getElementById("inp");
var enteredText = inp.value;
para1.innerText = enteredText + ", This text is changed using the innerText property. ";
para2.innerHTML = " <u> " + enteredText + " </u> " + ", <b> This text is changed using the <em> innerHTML </em> property. <b> <br> ";
}
</script>
</body>
</html>
在上面的示例中，我们使用 innerText 和 innerHTML 属性更改了两个不同段落的文本。前一个的文本使用 innerText 属性更改。而第二个的文本使用 innerHTML 属性更改。
在点击按钮时更改图片
我们已经讨论了如何使用 JavaScript 更改 HTML 文档中元素的文本。现在，我们将讨论如何仅通过点击按钮使用 JavaScript 来更改图片。
JavaScript 允许我们使用 src 属性来更改以及获取赋予 HTML 文档中 img 元素的 src 属性的图片链接或地址的值。
语法
以下语法将展示如何使用 src 属性更改网页上的图片：
selected_img_element.src = " new link or address ";
现在，让我们借助 JavaScript 代码示例了解 src 属性在更改图片方面的实际实现：
算法
步骤 1 - 在第一步中，我们将一个 img 元素添加到 HTML 文档中，并带有包含一些初始值的 src 属性，稍后我们将使用 JavaScript 中的 src 属性使用新值替换它。
步骤 2 - 在下一步中，我们将添加一个按钮元素，并带有 onclick 事件，该事件将在点击按钮时调用一个函数。
步骤 3 - 在此步骤中，我们将定义 JavaScript 函数，并在其中通过其 id 获取 img 元素。
步骤 4 - 在最后一步中，我们将使用 src 属性更改 src 属性的值，并赋予其一个新值以在网页上显示一些新图片。每次点击按钮时，用户都会在每次点击时在两个图片之间切换。
示例
以下示例将说明 src 属性如何获取新值以替换 src 属性的先前值以及网页上的先前图片：
<html>
<body>
<h2>Changing an Image in the HTML document using JavaScript</h2>
<p id = "upper">The image shown below will be changed once you click the button.</p>
<img src ="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU" id = "image"> <br> <br>
<button id = "btn" onclick = "changeImage()"> Click to change the Image </button>
<p id = "result"> </p>
<script>
var result = document.getElementById("result");
var upper = document.getElementById("upper");
function changeImage() {
var image = document.getElementById("image");
if (image.src == "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU") {
image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU";
result.innerHTML += " The image is changed from <b> Light mode to Dark mode </b>. <br> ";
}
else {
image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU";
result.innerHTML += " The image is changed from <b> Dark mode to Light mode </b>. ";
}
upper.innerHTML = " The previous image is replaced by the new image as you click the button. <br> ";
}
</script>
</body>
</html>
在上面的示例中，我们使用了 src 属性来更改 img 元素的 src 属性的值以及网页上的实际图片。
在本文中，我们了解了使用 JavaScript 更改网页上元素文本的两种不同方法，以及详细了解使用 JavaScript 更改网页上图片的方法，并为每种方法提供了代码示例。这些示例将帮助您增强您对 JavaScript 的实践知识。
21K+ 次查看
