Tombala Oyunu için torba

Forum Sayfası javascript Web Tasarım ve Programlama

Çalışan Dosyaya ulaşmak için tıklayınız.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #torba {
            width: 90%;
            background-color: blue;
            float: left;
        }

        #disari {
            width: 10%;
            background-color: chartreuse;
            float: left;
        }

        .yuvarlak {
            border-radius: 50px;
            border: 1px solid black;
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            float: left;
            background-color: blueviolet;
            font-size: 40px;

        }
    </style>
</head>

<body>
    <button onclick="ekle()">ekle</button>
    <input type="button" value="Seç" onclick="sec();">
    <div id="torba"></div>
    <div id="disari">Dışarı</div>
    <script>
        function sec() {
            var eleman_sayisi = document.getElementById("torba").childElementCount;
            //alert(document.getElementById("torba").childNodes[4].innerHTML);
            var rastgele_secilen = Math.floor(Math.random() * eleman_sayisi);

            document.getElementById("disari").appendChild(document.getElementById("torba").childNodes[rastgele_secilen]);
        }
        function ekle() {


            for (let index = 1; index < 91; index++) {
                var say = document.createElement("div");
                var ss = document.createTextNode(index);
                say.appendChild(ss);
                say.className = "yuvarlak";
                document.getElementById("torba").appendChild(say);
            }
        }
    </script>
</body>

</html>         

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir