如何透過點擊 JavaScript 中的按鈕來更改文字和圖像？
- 王林轉載
- 2023-09-07 14:25:021224瀏覽
可以使用 JavaScript 輕鬆變更指定給特定元素的文字和 img 元素中指定的圖像。我們可以將 onclick 事件與 HTML 文件中的按鈕元素一起使用，以便在單擊按鈕時發生這種情況。要更改按鈕單擊時的文本，我們將一個函數分配給 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 屬性來變更以及取得給定連結的值或給定 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 屬性的值，並為其指定一個新值以在網頁上顯示一些新圖片。每次單擊該按鈕時，用戶都會在每次單擊時在兩個圖像之間切換。
範例
下面的範例將解釋 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 中的按鈕來更改文字和圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！