Javascript ile random liste elemanı oluşturmak

sahin 1624 gün önce

547 defa görüntülendi


<div class="container">
    <ul class="veriler">
        <a href="#"><li>0</li></a>
    </ul>

        <button id="calistir">TEMİZLE</button>

</div>

 ul li {
        list-style: none;
        padding:15px;
      
    }
    ul{
        display: flex;
    }
    a{
        text-decoration: none;
        color:black;
        font-size: 30px;
        background-color: bisque;
        margin: 0 5px;
        color:red;
    }
    .container{
        width: 600px;
        margin:0 auto;
    }

    <script>
        btn = document.querySelector('#calistir'); 
       
        let veriler = document.querySelector('.veriler'); 
        console.log(veriler); 
let dongu = setInterval(() => {

let rand = Math.random(); 
let rand2 = Math.floor(rand*300);     
     //rand bir sayı 
let li = document.createElement('li'); 
let a = document.createElement('a'); 
li.appendChild(document.createTextNode(rand2));
a.setAttribute('href','#'); 
a.appendChild(li); 
veriler.appendChild(a); 



}, 1000);


btn.addEventListener('click',()=>{
    clearInterval(dongu); 
    document.querySelector('.veriler').innerHTML = ''; 
})





    </script>

Yapamadığım şey liste elemanlarının container' dan taşmaması. Liste elemanları sağa doğru uzayıp gidiyor bunu nasıl engelleyebilirim.

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

1
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (2)

umutkorkmaz

1624 gün önce

@makifgokce'nin paylaşımı işine yarayacaktır. Ek olarak veriler class'ı için overflow:auto tanımlaması yapabilirsin.

#002272

makifgokce

1624 gün önce

   .veriler{
        display: flex;
        flex-wrap: wrap;
      
    }
    .veriler li{
        list-style: none;
        padding:15px;
    }
    a{
        text-decoration: none;
        color:black;
        font-size: 30px;
        background-color: bisque;
        margin: 0 5px;
        color:red;
    }
    .container{
        width: 600px;
        margin:0 auto;
    }

#002268