Replace an element text with another text using javascript

Issue

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 class="row g-3">
  <!--render the books in within cards-->

  {% for book in books %}

    <div class="col-12 col-md-6 col-lg-4">

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

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

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

            

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

              <!--get the user rate-->
             <label class="custom-select">
              Give your rate
              <select class="book-rating custom-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" class="book-id form-control mx-auto w-auto" value="{{book.id}}" type="text">
            </label>

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

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

Solution

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;

Answered By – Ahmed Alagha

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.