Skocz do zawartości

Polecane posty

Cześć, chciałbym napisać program w JS który by losował liczby z przedziału 1-49 (to już mam). Liczby powinny być losowane po kliknięciu przycisku losuj, po każdym kliknięciu powinny pokazywać się nowe liczby. Nie wiem jak sobie z tym poradzić, próbowałem wykorzystać reload jednak on przeładowuje całą stronę i nie wykonuje się następna funkcja.

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>losowanie
    </title>
    
    
    <style>
        
       html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
        
        
        html {
            font-family: arial;
        }
        
        button1 {
            display: block;
            margin: 0 auto;
            background-color: #fff;
            border: 3px solid black;
            padding: 10px 20px;
            font-size: 20px;
            font-family: arial;  
            transition: .3s;
             width: 60px;
            height: 60px;
        }    
        button1:hover{
            background-color: #000;
            color: white;
        }
        
        button2 {
            display: block;
            margin: 0 auto;
            background-color: #fff;
            border: 3px solid black;
            padding: 10px 20px;
            font-size: 20px;
            font-family: arial;  
            transition: .3s;
             width: 60px;
            height: 60px;
        }    
        button2:hover{
            background-color: #000;
            color: white;
        }
        
        
        
        div {
            float: left;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: crimson;
            margin: 10px;
            line-height: 60px;
            text-align: center;
            font-weight: bold;
            color: white;
         
        }
    </style>
    
</head>

<body>
  
    <button2>losuj</button2>
   
   <!-- <div>23</div> -->
    
    
    <script>
        const result = [];
        let kbutton = 0;
        
        const reload = function(){
            
            javascript:location.reload()
            
              
          
        }
        
      
        
        const KBF = function(){
            kbutton++;
            spr();
            
        }
        
        
        
  const spr = function(){
            
            if(result.length === 6 && kbutton > 0){
               
                
                reload();
                losowanie();
            
            }
            else{
                losowanie();
               
            }
                
            
            
        }
        
        
        
        
        //tworzymy element div
        const losowanie = function(){
            
        for( let i = 0; i < 6; i++){    
        
        if(result.length === 6) return;   
            
        const div = document.createElement("div");
        const wynikLosowania = Math.floor(Math.random() *49 + 1); 
            
            
        for(let i = 0; i < result.length; i++){
            
            if(wynikLosowania === result[i]){
                return losowanie();
            }
        } 
            
         div.textContent = wynikLosowania;
            document.body.appendChild(div);
            result.push(wynikLosowania); // dodajemy do tablicy wyniku
          
        }
        }
        
       
        
        const button2 = document.querySelector("button2");
        
        //nasłuchiwanie na zdarzenie
    button2.addEventListener("click", KBF);
    
    
    </script>
</body>
</html>

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>losowanie
    </title>
    
    
    <style>
        
       html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
        
        
        html {
            font-family: arial;
        }
        
        button1 {
            display: block;
            margin: 0 auto;
            background-color: #fff;
            border: 3px solid black;
            padding: 10px 20px;
            font-size: 20px;
            font-family: arial;  
            transition: .3s;
             width: 60px;
            height: 60px;
        }    
        button1:hover{
            background-color: #000;
            color: white;
        }
        
        button2 {
            display: block;
            margin: 0 auto;
            background-color: #fff;
            border: 3px solid black;
            padding: 10px 20px;
            font-size: 20px;
            font-family: arial;  
            transition: .3s;
             width: 60px;
            height: 60px;
        }    
        button2:hover{
            background-color: #000;
            color: white;
        }
        
        
        
        div {
            float: left;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: crimson;
            margin: 10px;
            line-height: 60px;
            text-align: center;
            font-weight: bold;
            color: white;
         
        }
    </style>
    
</head>

<body>
  
    <button2>losuj</button2>
 
    
 
    
    
    <script>
        let result = [];
        let kbutton = 0;
        
        
        const reload = function(){
          
            
         for( let i = 0; i < 6; i++){    
         let x = document.getElementById("blo");
             x.remove(); 
         }
            
  result.length = 0;
          
        }
        
      
        
        const KBF = function(){
            kbutton++;
            spr();
            
        }
        
        
        
  const spr = function(){
            
            if(result.length === 6 && kbutton > 0){
               
                
               reload();
               losowanie();
            
            }
            else{
                losowanie();
               
            }
                
            
            
        }
        
        
        
        
        //tworzymy element div
        const losowanie = function(){
            
        for( let i = 0; i < 6; i++){    
        
        if(result.length === 6) return;   
       
        const div = document.createElement("div");
            div.id = 'blo';
        const wynikLosowania = Math.floor(Math.random() *49 + 1); 
            
            
        for(let i = 0; i < result.length; i++){
            
            if(wynikLosowania === result[i]){
                return losowanie();
            }
        } 
            
         div.textContent = wynikLosowania;
            document.body.appendChild(div);
            result.push(wynikLosowania); // dodajemy do tablicy wyniku
          
        }
        }
        
       
        
        const button2 = document.querySelector("button2");
        
        //nasłuchiwanie na zdarzenie
    button2.addEventListener("click", KBF);
    
    
    </script>
</body>
</html>

działa

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się


×