Javascript запросСелектор вопрос вход радио

Я работаю над javascript star review для моего приложения django, комментарий работает, однако моя проблема в том, что JS код не подхватывает селектор input radio.

error: Uncaught TypeError: Невозможно прочитать свойства null (чтение 'value') at HTMLButtonElement.

вот мой JS файл:

  text_f = document.querySelector("#add-text");
  book = document.querySelector("#book");
  btn = document.querySelector("#add-btn");
  root = document.querySelector("#root");
  star = document.querySelector("input[type=radio]:checked");

  btn.addEventListener("click", () => {
    text = text_f.value;
    book = book.value;
    star = star.value;

    if (text.length != 0) {
form = new FormData();
form.append("post", text.trim());
form.append("book", book.trim());
form.append("star", star.trim());

fetch("/addpost/", {
  method: "POST",
  body: form,
})
  .then((res) => res.json())
  .then((res) => {
    if (res.status == 201) {
      add_html(
        res.post_id,
        res.username,
        text.trim(),
        star.trim(),
        res.post_date,
      );
      text_f.value = "";
    }
  });
    }
  });

вот мой html файл

 <h2>Reviews</h2>
 <div class="card">
   <div class="card-body my-card">
Did you read the book? Add your Review
<div class="stars">
<input class="star star-5" id="star-5" value="5" type="radio" name="star"/>
<label class="star star-5" for="star-5"></label>
<input class="star star-4" id="star-4" value="4"  type="radio" name="star"/>
<label class="star star-4" for="star-4"></label>
<input class="star star-3" id="star-3" type="radio" value="3" name="star"/>
<label class="star star-3" for="star-3"></label>
<input class="star star-2" id="star-2" type="radio" value="2" name="star"/>
<label class="star star-2" for="star-2"></label>
<input class="star star-1" id="star-1" type="radio" value="1" name="star"/>
<label class="star star-1" for="star-1"></label>
   </div>
 <textarea class="mt-2 form-control" id="add-text" rows="3"></textarea>
    
<input name="book" id="book" value="{{book.id}}" type="hidden">
<div class="mt-2 d-flex justify-content-end">
  <button type="submit" id="add-btn" class="btn btn-success">Post</button>
</div>
   </div>
 </div>

мой файл views.py

 @csrf_exempt
 def addpost(request):
if request.method == "POST":
    post = request.POST.get('post')
    if len(post) != 0:
        obj = Comment()
        obj.text = post
        obj.user = request.user
        obj.book = request.POST.get('book')
        obj.star = request.POST.get('star')
        obj.save()
        context = {
            'status': 201,
            'post_id': obj.id,
            'username': request.user.username,
            'book': obj.book,
            'star': obj.star,

        }
        return JsonResponse(context, status=201)
 return JsonResponse({}, status=400)

Есть идеи, как это исправить?

Вернуться на верх