why str dosen't showed in the surface when i click the button?

Question

**********why string(ping) dosen't showed in the screen (surface(win)) when i clicked the button? it showed exactly like few second and it disappear this my code and i don,t know where is the problem i exactly who can help me? (qfdfqsdfqdqqqqqqqqdqdfqsdsdffsqfqfsfqsdfsqfqfsqfsq)this nothing just for the abilty to post this question**********

import pygame


pygame.init()
win = pygame.display.set_mode((384,539))
win.fill((0,0,0))
black_color = (0,0,0)
white_color = (255,255,255)
gris_color = (59,59,59)
red = (229,67,45)
yellow = (236,199,76)


pygame.display.set_caption("Tunisian Internet Speed")

police = pygame.font.SysFont("arial", 40)



class button():
    def __init__(self, color, x,y,width,height, text=''):
        self.color = color
        self.x = x
        self.y = y
        self.width = width
        self.height = height
        self.text = text

    def draw(self,win,outline=None):
        #Call this method to draw the button on the screen
        if outline:
            pygame.draw.rect(win, outline, (self.x,self.y,self.width,self.height))

        pygame.draw.rect(win, self.color, (self.x,self.y,self.width,self.height),2)

        if self.text != '':
            font = pygame.font.SysFont('arial', 60)
            text = font.render(self.text, 1, red)
            win.blit(text, (self.x + (self.width/2 - text.get_width()/2), self.y + (self.height/2 - text.get_height()/2)))

    def isOver(self, pos):
        #Pos is the mouse position or a tuple of (x,y) coordinates
        if pos[0] > self.x and pos[0] < self.x + self.width:
            if pos[1] > self.y and pos[1] < self.y + self.height:
                return True
        return False

def redrawWindow():
    win.fill(gris_color)
    blueButton.draw(win)


run = True
blueButton = button(yellow,65,200,250,100,"Start")

while run:

    pygame.display.flip()
    redrawWindow()
    rec1 = pygame.Rect(0,400,100,150)
    pygame.draw.rect(win, yellow, rec1,2)
    rec2 = pygame.Rect(100,400,142,155)
    pygame.draw.rect(win, yellow, rec2,2)
    rec3 = pygame.Rect(241,400,142,155)
    pygame.draw.rect(win,yellow, rec3,2)
    rec4 = pygame.Rect(284,0,100,25)
    pygame.draw.rect(win, yellow, rec4,2)

    for event in pygame.event.get():
        pos = pygame.mouse.get_pos()

        if event.type == pygame.QUIT:
            run = False
            pygame.quit()
            quit()

        if event.type == pygame.MOUSEBUTTONDOWN:
            text_ping = police.render("Ping", True, white_color)
            win.blit(text_ping,[5,300])
            pygame.display.update()
            pygame.display.flip()
            if blueButton.isOver(pos):
                print('clicked Button')
                pygame.display.flip()
                text_ping = police.render("Ping", True, white_color)
                win.blit(text_ping,[5,300])
                pygame.display.update()
                pygame.display.flip()





        if event.type == pygame.MOUSEMOTION:
            if blueButton.isOver(pos):
                blueButton.color = red
            else:
                blueButton.color = yellow


pygame.display.flip()

Answer 1

First of all, pygame.display.update() and pygame.display.flip() both do the same thing, you do not need both. Also you should also only have one of them in the game loop as it can cause stuttering.

You want the "ping" to stay on the screen once you click the button. well currently you are clearing the screen every frame, so you need to draw it every frame, so in the button class make a variable called clicked

class button():
    def __init__(self, color, x,y,width,height, text=''):
        self.color = color
        self.x = x
        self.y = y
        self.width = width
        self.height = height
        self.text = text
        self.clicked = False #right here

and when you click the button, set it to True

if blueButton.isOver(pos):
    print('clicked Button')
    blueButton.clicked = True

and draw the "Ping" when its True

redrawWindow()
rec1 = pygame.Rect(0,400,100,150)
pygame.draw.rect(win, yellow, rec1,2)
rec2 = pygame.Rect(100,400,142,155)
pygame.draw.rect(win, yellow, rec2,2)
rec3 = pygame.Rect(241,400,142,155)
pygame.draw.rect(win,yellow, rec3,2)
rec4 = pygame.Rect(284,0,100,25)
pygame.draw.rect(win, yellow, rec4,2)

if blueButton.clicked:  #if you clicked the button
    text_ping = police.render("Ping", True, white_color) #draw the text
    win.blit(text_ping,[5,300])  

Now because we are drawing the button here, drawing it again will make no difference, only slow down the computer slightly so let get rid of it

if event.type == pygame.MOUSEBUTTONDOWN:

    if blueButton.isOver(pos):
        print('clicked Button')
        blueButton.clicked = True

If you want the button to toggle this, you can change blueButton.clicked = True to blueButton.clicked = not blueButton.clicked

now your program works, and looks cleaner

import pygame


pygame.init()
win = pygame.display.set_mode((384,539))
win.fill((0,0,0))
black_color = (0,0,0)
white_color = (255,255,255)
gris_color = (59,59,59)
red = (229,67,45)
yellow = (236,199,76)


pygame.display.set_caption("Tunisian Internet Speed")

police = pygame.font.SysFont("arial", 40)



class button():
    def __init__(self, color, x,y,width,height, text=''):
        self.color = color
        self.x = x
        self.y = y
        self.width = width
        self.height = height
        self.text = text
        self.clicked = False

    def draw(self,win,outline=None):
        #Call this method to draw the button on the screen
        if outline:
            pygame.draw.rect(win, outline, (self.x,self.y,self.width,self.height))

        pygame.draw.rect(win, self.color, (self.x,self.y,self.width,self.height),2)

        if self.text != '':
            font = pygame.font.SysFont('arial', 60)
            text = font.render(self.text, 1, red)
            win.blit(text, (self.x + (self.width/2 - text.get_width()/2), self.y + (self.height/2 - text.get_height()/2)))

    def isOver(self, pos):
        #Pos is the mouse position or a tuple of (x,y) coordinates
        if pos[0] > self.x and pos[0] < self.x + self.width:
            if pos[1] > self.y and pos[1] < self.y + self.height:
                return True
        return False

def redrawWindow():
    win.fill(gris_color)
    blueButton.draw(win)


run = True
blueButton = button(yellow,65,200,250,100,"Start")

while run:

    redrawWindow()
    rec1 = pygame.Rect(0,400,100,150)
    pygame.draw.rect(win, yellow, rec1,2)
    rec2 = pygame.Rect(100,400,142,155)
    pygame.draw.rect(win, yellow, rec2,2)
    rec3 = pygame.Rect(241,400,142,155)
    pygame.draw.rect(win,yellow, rec3,2)
    rec4 = pygame.Rect(284,0,100,25)
    pygame.draw.rect(win, yellow, rec4,2)

    if blueButton.clicked:
        text_ping = police.render("Ping", True, white_color)
        win.blit(text_ping,[5,300])        

    for event in pygame.event.get():
        pos = pygame.mouse.get_pos()

        if event.type == pygame.QUIT:
            run = False
            pygame.quit()
            quit()

        if event.type == pygame.MOUSEBUTTONDOWN:

            if blueButton.isOver(pos):
                print('clicked Button')
                blueButton.clicked = not blueButton.clicked

        if event.type == pygame.MOUSEMOTION:
            if blueButton.isOver(pos):
                blueButton.color = red
            else:
                blueButton.color = yellow


    pygame.display.update()