Replace an element text with another text using javascript-CodePudding

EDIT:(below)

I have a web app that contains this template which render number of books using the returnd books from the server which implemented using python(flask) the titles of the books,IDS, and authors' names all of these are in the variable "books" which as you can see here I loop over to print all of that. I also give the users the ability to rate the books, but When the user rate a book I'm sending ajax request,I'm getting back only the rate of book that just get rated . I'm trying to append every rate to its book, the problem in my code that of the user tried to rate again the new get concatenate with the old rate (i.e if the old rate is 3 and the user rate again with 4 the book's rate will be 34). I tried to use replaceWith but 8 got undefined.

Here is the javascript code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <script>



jQuery(function ($) {
  $(".book-rating").on("change", function 
  (event) {
  const $target = $(event.target);
  const rating = $target.val(); // value of select.
  const bookId = $target.next().val(); // value of input
  // console.log(bookId);
  // console.log($(this).attr('book-rating'));
  var $rated =  this.form.querySelector(".rated");
 $.ajax({
    url: /rate/${bookId}/${rating},
    success: function(all_rates){
        console.log('success', all_rates);
        $.each(all_rates, function(i, r){
            // if(this.form.querySelector(".rated")
            $rated.append(r.rate);
        });


    }
   });
  });

});

           </script>

And here is the html code:

<div >
  <!--render the books in within cards-->

  {% for book in books %}

    <div >

        <div style="background-color:#6e6b64" >
           {% if book.volumeInfo.imageLinks.smallThumbnail %}

            <img src="{{book.volumeInfo.imageLinks.smallThumbnail}}">
           {% endif %}

           <div  >
           <h5 style="color:red" >{{book.volumeInfo.title}}</h5>
           <p style="color:blue" >{{book.volumeInfo.authors}}</p>

            

           <form style="margin-bottom:5px" action="/addcomment" method="get">
              <h4 ></h4>
              <input name="book" type ="hidden"  id="book_id"  value="{{book.id}}" type="text">
              <a href="{{book.volumeInfo.infoLink}}" >More Info</a>
              <button type="submit" >add comment</button>

              <!--get the user rate-->
             <label >
              Give your rate
              <select  style="width:200px;" >
               <option value="">rate</option>
               <option value="1">1</option>
               <option  value="2">2</option> <option value="3">3</option>
               <option value="4">4</option>
               <option value="5">5</option>
             </select>
             <input name="book" type="hidden"  value="{{book.id}}" type="text">
            </label>

          </form>
            </div>
         </div>
       </div>

       {% endfor %}
   </div>
</div>

CodePudding user response：

I found an answer here Replace an element text with another text from DOM

All I had to do is to change $rated.append to $rated.innerText=r.rate;