富豪一区二区影院,欧美综合一二三四,水牛影院亚洲热AV在线观看

可以使用 JavaScript 輕松更改指定給特定元素的文本和 img 元素中指定的圖像。我們可以將 onclick 事件與 HTML 文檔中的按鈕元素一起使用，以便在單擊按鈕時發(fā)生這種情況。要更改按鈕單擊時的文本，我們將一個函數(shù)分配給 onclick 事件作為執(zhí)行所需更改的值。

讓我們通過代碼示例詳細了解使用 JavaScript 分別更改文本和圖像的方法。

更改元素的文本

JavaScript 為我們提供了兩個不同的屬性來更改或獲取 HTML 文檔中元素的文本，下面列出了這兩個屬性及其功能和語法 –

innerText – JavaScript 的innerText 屬性用于更改先前的文本或從HTML 文檔中獲取特定選定元素的先前文本。

語法

以下語法將向您展示如何使用innerText屬性來獲取和更改元素的文本 –

selected_element.innerText = " new text ";

登錄后復(fù)制

innerHTML -innerHTML 屬性不僅提供元素的文本及其內(nèi)部使用的所有子標(biāo)簽，而且還可以更改元素的文本及其內(nèi)部使用的子標(biāo)簽新文本。

語法

以下語法將向您展示如何使用innerHTML屬性來獲取或更改元素的文本 –

selected_element.innerHTML = " new text ";

登錄后復(fù)制

讓我們通過代碼示例中的實際實現(xiàn)來理解這兩個屬性 –

算法

第 1 步 – 在第一步中，我們將輸入元素添加到 HTML 文檔中。這樣，我們就可以用用戶輸入的文本更改以下段落的文本。

步驟 2 – 在此步驟中，我們將添加一個帶有與其關(guān)聯(lián)的 onclick 事件的按鈕標(biāo)簽，該標(biāo)簽將一個函數(shù)作為其值，并在用戶單擊按鈕并更改時調(diào)用它段落的文本。

第 3 步 – 在下一步中，我們將定義一個 JavaScript 函數(shù)，在該函數(shù)中我們將抓取用戶輸入的輸入文本，并使用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>

登錄后復(fù)制

在上面的示例中，我們使用innerText 和innerHTML 屬性更改了兩個不同段落的文本。前一個的文本是使用innerText 屬性更改的。同時，后一個文本的文本是使用innerHTML 屬性更改的。

單擊按鈕時更改圖像

我們已經(jīng)討論了如何使用 JavaScript 更改 HTML 文檔中元素的文本。不，我們將討論如何僅通過使用 JavaScript 單擊按鈕來更改圖像。

JavaScript 允許我們使用 src 屬性來更改以及獲取給定鏈接的值或給定 src 屬性中的 img 元素的圖像地址。

語法

以下語法將展示如何使用src屬性來更改網(wǎng)頁上的圖像 –

selected_img_element.src = " new link or address ";

登錄后復(fù)制

現(xiàn)在讓我們借助 JavaScript 代碼示例來了解 src 屬性更改圖像的實際實現(xiàn) –

算法

Step 1 – 在第一步中，我們將在 HTML 文檔中添加一個 img 元素，其 src 屬性包含一些初始值，稍后我們將使用 JavaScript 借助 src 屬性更改該值。

第 2 步 – 在下一步中，我們將添加一個帶有 onclick 事件的按鈕元素，該事件將在單擊按鈕時調(diào)用一個函數(shù)。

第 3 步 – 在這一步中，我們將定義 JavaScript 函數(shù)并通過其 id 獲取其中的 img 元素。

步驟 4 – 在最后一步中，我們將使用 src 屬性更改 src 屬性的值，并為其指定一個新值以在網(wǎng)頁上顯示一些新圖像。每次單擊該按鈕時，用戶都會在每次單擊時在兩個圖像之間切換。

示例

下面的示例將解釋 src 屬性如何使用新值來替換 src 屬性的先前值以及網(wǎng)頁上的先前圖像 –

<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>

登錄后復(fù)制

在上面的示例中，我們使用 src 屬性來更改 img 元素的 src 屬性值和網(wǎng)頁上的實際圖像。

在本文中，我們通過代碼示例詳細了解了使用 JavaScript 更改網(wǎng)頁上元素文本的兩種不同方法以及更改網(wǎng)頁上圖像的方法他們每一個人。這些示例將幫助您增強 JavaScript 的實踐知識。

以上就是如何通過單擊 JavaScript 中的按鈕來更改文本和圖像？的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！