How can I change the .innerHTML property of an appended button text using Javascript?

Question

I'm trying to make a "Like" button for a post which was fetched by AJAX using jQuery. Here, I want to change button text while clicked. But it's not changing.

Here is my Like button codes:

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

Here is my onClick event for the "Like" button:

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

`.btnLike` isn’t an ID; `btnLike` is an ID. Please also see [Event binding on dynamically created elements?](/q/203198/4642212). — Sebastian Simon, Nov 03 '22 at 03:47
Are you adding multiple `
` items to the DOM? If so, each must have a unique ID. — kmoser, Nov 03 '22 at 04:16

score 0 · Answer 1 · answered Nov 03 '22 at 03:49

let html = $(`<div class="posted-footer">
                       <ul>
                            <li>
                             <button class="btnLike btn-danger" id="btnLike"> Like </button>
                           </li>
                            <li>
                             <a href="#"><i class="fa fa-comments-o"></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>

This is method is to use jquery to wrap your html first, then you can use jquery event listener on on the html.

Problem with your code is you use the wrong JS selector, where you use select by ID function but you pass a class name into it, since you are using jquery, you can change from:

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

to

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

4b0 · Answer 2 · 2022-11-03T04:12:50.063

Here you go. Find your button inside appended div and change your text.

Working Example:

$('.posted-area').append('\
                   <div class="posted-footer">\
                       <ul>\
                            <li>\
                             <button class="btnLike btn-danger" id="btnLike" onclick="btnLikefunction()"> Like </button>\
                           </li>\
                            <li>\
                             <a href="#"><i class="fa fa-comments-o"></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>

To change text color you can use addClass like above example.

_{Note: Don't mismatch JavaScript and jQuery.}

its working. can you tell me how can I change texts color? – client BD Nov 03 '22 at 04:05 — client BD, Nov 03 '22 at 04:05

score 0 · Accepted Answer · answered Nov 03 '22 at 04:07

You just need 2 changes

onclick="btnLikefunction(this)"

and

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

Example

$('.posted-area').append('\
                   <div class="posted-footer">\
                       <ul>\
                            <li>\
                             <button class="btnLike btn-danger" id="btnLike" onclick="btnLikefunction(this)"> Like </button>\
                           </li>\
                            <li>\
                             <a href="#"><i class="fa fa-comments-o"></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>

can you solve? - https://stackoverflow.com/questions/74273741/how-can-i-show-user-has-liked-post-as-facebook-style-in-jquery-ajax-laravel — client BD, Nov 03 '22 at 07:41

How can I change the .innerHTML property of an appended button text using Javascript?

3 Answers3