Pass render template into popup (javascript)

Hi Im trying to build a guessing number game with Django 5 + python and javascript
and what I want is to happens → the guessed number is visible in pop in added screenshot
In views file python:

def locked_room(request):
       guessed_number = int(request.GET.get('number1'))
       generated_number = random.randint(0, 9)
       print(generated_number)
       if generated_number == guessed_number:
            print("Correct number guessed")
            return render(request, 'first_app/correct_number.html',{'guessed_number' : 
       guessed_number,
                                                                    'generated_number' : generated_number})
        else:
            print("Wrong number guessed")
            return render(request, 'first_app/wrong_number.html',{'generated_number' : 
           generated_number,
                                                                  'guessed_number' : guessed_number,})

My HTML file when asking for guessing number

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Locked room</title>
  <script src="myscript_part2.js"></script>
  <h1>In this room is locked and you needs to guess a number between 0-9 to open door again</h1>

  <form action="locked_room">
  <input type="number" name="number1" placeholder="Enter your first guess here">
   <button type="submit" name="first_name">Hey</button>

my javascript file:

alert("You guessed wrong number");

var a = "{{guessed_number}}"

and finally my result file

{% load static %}

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wrong number</title>
<script src="{% static 'myscript_part2.js' %}"></script>

<h1>This number was your guess {{guessed_number}} and its not match random number {{generated_number}}</h1>
<h1>The door is still locked and you need to do another guess</h1>    
Screenshot below

Screenshot 2024-07-10 203207|690x76

You’re not rendering your javascript file - it is not a template. That file is a static file being retrieved due to this html element.

If you want the JavaScript to access rendered data from the template, see the json_script filter.

Instead of directly relating the variable a to the guessed number why don’t you place the guessed number in wrapper like span and give it an id that way you can get the quessed number from your template

So instead you should do:

Then you JS can be structured this way:

var a = document.getElementById('guessed-number').value
var b = document.getElementById('generated-number').value

(I don’t really know how you have structured the logic)

Hi thanks for reply, I did as wrote but I cannot see popup with guessed number, but HTML is work really good :slight_smile:
Can I put this values into alert popup?
var a = document.getElementById(‘guessed-number’).value

var b = document.getElementById(‘generated-number’).value

Hi thanks I will try that json (Im newbie with this) please do you know simple example to json?

The simplest example - showing both what you need to do in the template and in the JavaScript - are in those docs.