Pygame not drawing rectangle while clicking

I am new to pygame I am making a simple game. In this code, I am trying to draw a rectangle when the mouse is at a certain position but it is not drawing it works when I print anything

import pygame

pygame.init()

res = (600,600)

screen = pygame.display.set_mode(res)

pygame.display.set_caption("Tic Tac Toe")

background = (255,150,150)

color_light = (170,170,170)

color_dark = (100,100,100)

hover_color = (255, 204, 203)

width = screen.get_width()

height = screen.get_height()

def draw_line():

    pygame.draw.rect(screen, line_color, (190,10,10,580))
    pygame.draw.rect(screen, line_color, (390, 10, 10, 580))
    pygame.draw.rect(screen, line_color, (10, 200, 580, 10))
    pygame.draw.rect(screen, line_color, (10, 390, 580, 10))



def highlight():

    if 10 <= mouse[0] <= 10+180 and 10 <= mouse[1] <= 10+190:
        pygame.draw.rect(screen, hover_color, (10, 10, 180, 190))  # X,Y,WIDTH,HEIGHT

    if 205 <= mouse[0] <= 205+180 and 10 <= mouse[1] <= 10+190:
        pygame.draw.rect(screen, hover_color, (200, 10, 190, 190))  # X,Y,WIDTH,HEIGHT

    if 400 <= mouse[0] <= 400+190 and 10 <= mouse[1] <= 10+190:
        pygame.draw.rect(screen, hover_color, (400, 10, 190, 190))  # X,Y,WIDTH,HEIGHT

    if 10 <= mouse[0] <= 10+180 and 210 <= mouse[1] <= 210+180:
        pygame.draw.rect(screen, hover_color, (10, 210, 180, 180))  # X,Y,WIDTH,HEIGHT

    if 200 <= mouse[0] <= 200+180 and 210 <= mouse[1] <= 210+180:
        pygame.draw.rect(screen, hover_color, (200, 210, 200, 180))  # X,Y,WIDTH,HEIGHT

    if 400 <= mouse[0] <= 400+190 and 210 <= mouse[1] <= 210+180:
        pygame.draw.rect(screen, hover_color, (400, 210, 190, 180))  # X,Y,WIDTH,HEIGHT

    if 10 <= mouse[0] <= 10+180 and 400 <= mouse[1] <= 400+200:
        pygame.draw.rect(screen, hover_color, (10, 400, 180, 190))  # X,Y,WIDTH,HEIGHT

    if 200 <= mouse[0] <= 200+190 and 400 <= mouse[1] <= 400+200:
        pygame.draw.rect(screen, hover_color, (200, 400, 190, 190))  # X,Y,WIDTH,HEIGHT

    if 400 <= mouse[0] <= 400+190 and 400 <= mouse[1] <= 400+190:
        pygame.draw.rect(screen, hover_color, (400, 400, 190, 190))  # X,Y,WIDTH,HEIGHT



while True:

    screen.fill(background)

    mouse = pygame.mouse.get_pos()
    for ev in pygame.event.get():
        if ev.type == pygame.QUIT:
            pygame.quit()
        if ev.type == pygame.MOUSEBUTTONDOWN:
            if 10 <= mouse[0] <= 10 + 180 and 10 <= mouse[1] <= 10 + 190:
                pygame.draw.rect(screen,background,(10,10,180,190))
                pygame.display.update()
    line_color = (212, 212, 255)
    draw_line()
    highlight()
    pygame.display.update()

Solution

To make the rectangle permanent, you need to draw the rectangle in the application loop. The event occurs only once in a single frame. Add a variable clicked = False. Set the variable when the event occurs. And draw the rectangle dependent on the state of the variable:

clicked = False
while True:

    screen.fill(background)

    mouse = pygame.mouse.get_pos()
    for ev in pygame.event.get():
        if ev.type == pygame.QUIT:
            pygame.quit()
        if ev.type == pygame.MOUSEBUTTONDOWN:
            if 10 <= mouse[0] <= 10 + 180 and 10 <= mouse[1] <= 10 + 190:
                clicked = True
    line_color = (212, 212, 255)
    draw_line()
    highlight()
    if clicked:
        pygame.draw.rect(screen,background,(10,10,180,190))
    pygame.display.update()

Simplify your code:

Create a list of pygame.Rect objects for the rectangles
```
rect_list = [pygame.Rect(10, 10, 180, 190), ...]
```
Create a list for the stated of the fields
```
clicked_list = [0 for _ in rect_list]
```

Use collideponit to test if the mouse is on a rectangle:

for rect in rect_list:
    if rect.collidepoint(mouse):
        pygame.draw.rect(screen, hover_color, rect)

Use collidepoint to evaluate whether a field is clicked and to change the state of the field

if ev.type == pygame.MOUSEBUTTONDOWN:
    for i, rect in enumerate(rect_list):
        if rect.collidepoint(ev.pos):
            clicked_list[i] = 1

Draw the field in a loop depending on its state:

for i, rect in enumerate(rect_list):
    if clicked_list[i]:
        pygame.draw.rect(screen,background,rect)

Complete code:

import pygame
pygame.init()

res = (600,600)
screen = pygame.display.set_mode(res)
pygame.display.set_caption("Tic Tac Toe")

background = (255,150,150)
color_light = (170,170,170)
color_dark = (100,100,100)
hover_color = (255, 204, 203)
width = screen.get_width()
height = screen.get_height()

def draw_line():

    pygame.draw.rect(screen, line_color, (190,10,10,580))
    pygame.draw.rect(screen, line_color, (390, 10, 10, 580))
    pygame.draw.rect(screen, line_color, (10, 200, 580, 10))
    pygame.draw.rect(screen, line_color, (10, 390, 580, 10))

rect_list = [
    pygame.Rect(10, 10, 180, 190),
    pygame.Rect(200, 10, 180, 190),
    pygame.Rect(400, 10, 180, 190),
    pygame.Rect(10, 210, 180, 190),
    pygame.Rect(200, 210, 180, 190),
    pygame.Rect(400, 210, 180, 190),
    pygame.Rect(10, 400, 180, 190),
    pygame.Rect(200, 400, 180, 190),
    pygame.Rect(400, 400, 180, 190)]
clicked_list = [0 for _ in rect_list]

def highlight():
    for rect in rect_list:
        if rect.collidepoint(mouse):
            pygame.draw.rect(screen, hover_color, rect)

while True:
    mouse = pygame.mouse.get_pos()
    for ev in pygame.event.get():
        if ev.type == pygame.QUIT:
            pygame.quit()
        if ev.type == pygame.MOUSEBUTTONDOWN:
            for i, rect in enumerate(rect_list):
                if rect.collidepoint(ev.pos):
                    clicked_list[i] = 1
    
    line_color = (212, 212, 255)
    screen.fill(background)
    draw_line()
    highlight()
    for i, rect in enumerate(rect_list):
        if clicked_list[i] == 1:
            pygame.draw.rect(screen,background,rect)
    pygame.display.update()