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

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 >\
    <ul>\
      <li>\
        <button  id="btnLike" onclick="btnLikefunction()"> Like </button>\
      </li>\
      <li>\
        <a href="#"><i ></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!";
}

CodePudding user response：

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 >\
                       <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 ></div>

CodePudding user response：

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>

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!";

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

CodePudding user response：

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

Working Example:

$('.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 ></div>

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

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