如何使用Javascript更改附加按鈕文本的.innerHTML屬性？

我正在嘗試為 AJAX 使用 jQuery 獲取的帖子制作一個“喜歡”按鈕。在這里，我想在單擊時更改按鈕文本。但它沒有改變。

這是我的喜歡按鈕代碼：

$('.posted-area').append('\
  <div >\
    <ul>\
      <li>\
        <button  id="btnLike" onclick="btnLikefunction()"> Like </button>\
      </li>\
      <li>\
        <a href="#"><i ></i> </a>\
          <span>15 comments</span>\
      </li>\                         
    </ul>\
  </div>\
');

這是我onClick的“喜歡”按鈕的事件：

function btnLikefunction(){
   var btnTextChange = document.getElementById(".btnLike");
   btnTextChange.innerHTML= "Liked!";
}

uj5u.com熱心網友回復：

您只需要 2 處更改

onclick="btnLikefunction(this)"

和

function btnLikefunction(elm) {
  $(elm).text("Liked").css('color', 'red'); // set text and color
}

例子

$('.posted-area').append('\
                   <div >\
                       <ul>\
                            <li>\
                             <button  id="btnLike" onclick="btnLikefunction(this)"> Like </button>\
                           </li>\
                            <li>\
                             <a href="#"><i ></i> </a>\
                             <span>15 comments</span>\
                           </li>\ </ul>\ </div>\
    ');


function btnLikefunction(elm) {
  $(elm).text("Liked").css('color', 'red'); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="posted-area"></div>

uj5u.com熱心網友回復：

let html = $(`<div >
                       <ul>
                            <li>
                             <button  id="btnLike"> Like </button>
                           </li>
                            <li>
                             <a href="#"><i ></i> </a>
                             <span>15 comments</span>
                           </li>                        
                       </ul>
                   </div>
                   `)

html.appendTo('#post-wrapper')
html.find(".btnLike").on("click",e=>{
  $(e.target).html("Liked!")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="post-wrapper"></div>

這個方法是先用jquery包裝你的html，然后你可以on在html上使用jquery事件監聽器。

您的代碼的問題是您使用了錯誤的 JS 選擇器，您在其中使用按 ID 函式選擇但您將類名傳遞給它，因為您使用的是 jquery，您可以更改：

var btnTextChange = document.getElementById(".btnLike");
btnTextChange .innerHTML= "Liked!";

至

$(".btnLike").html("Liked!")

uj5u.com熱心網友回復：

干得好。在附加的 div 中找到您的按鈕并更改您的文本。

作業示例：

$('.posted-area').append('\
                   <div >\
                       <ul>\
                            <li>\
                             <button  id="btnLike" onclick="btnLikefunction()"> Like </button>\
                           </li>\
                            <li>\
                             <a href="#"><i ></i> </a>\
                             <span>15 comments</span>\
                           </li>\ </ul>\ </div>\
    ');


function btnLikefunction() {
  var btnTextChange = $(".posted-area").find(".btnLike")
  $(btnTextChange).addClass("red");
  $(btnTextChange).html("Liked!")
}

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="posted-area"></div>

要更改文本顏色，您可以使用addClass上面的示例。

_{注意：不要使 JavaScript 和 jQuery 不匹配。}

標籤：javascriptjQuery

上一篇：tryexcept，例外錯誤后如何重試？

下一篇：在字串引號內列印變數值