資料結構
網路
關係資料庫管理系統
作業系統
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+ 次檢視
