Skocz do zawartości
t9omek

Losowanie elementów JavaScript

Przez t9omek, w xHTML / CSS / Javascript

Polecane posty

t9omek    0

t9omek
Napisano

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

t9omek    0

t9omek
Napisano 

<!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ę
Przejdź do listy tematów xHTML / CSS / Javascript
×