I can’t write the second data in my object to div

I can’t write the second data in my object to div

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
    <style>
        button {
            width: 25px;
            height: 25px;
        }

        #ana {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            margin-top: 35vh;
        }

        #container {
            width: 10%;
            margin-inline: 25px;
        }

        #container .cmmt {
            width: 100%;
            height: 120px;
            background-color: yellow;
            padding: 5px;
            text-align: center;
        }

        #ana #container .name {
            width: 100%;
            height: 40px;
            background-color: yellowgreen;
            padding: 5px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="ana">
        <button onclick="geri()">←</button>
        <div id="container">
            <div class="cmmt"></div>
            <div class="name"></div>
        </div>
        <button onclick="ileri()">→</button>
    </div>

    <script>
        var comment = document.getElementsByClassName("cmmt")[0];
        var name = document.getElementsByClassName("name")[0];

        var comments = [{ yorum: "çok güzel bir ürün fakat paketlemesini beğenmedim", isim: "semih" }
            , { yorum: "paketlemesi çok iyi ama o kadar iyi ama o kadar da iyi değildi", isim: "mehmet" }
            , { yorum: "ürün fotoğrafta göründüğü gibi değil resmen dolandırıcılık bu", isim: "tolga" }
            , { yorum: "iyi ürün değil ama parasına göre iyi iş yapıyor fiyat-performans", isim: "can" }
            , { yorum: "ürün ptt kargo ile gönderilmesi dışında sıkıntı yok ", isim: "recep" }
            , { yorum: "bu ürün hakkında daha ne kadar yorum yapılabilir bilmiyorum", isim: "erdal" }];

         console.log(comments[0].isim)

        i = Math.round(Math.random() * 5);
        comment.innerHTML = comments[i].yorum;
        name.innerHTML = comments[i].isim;

        function geri() {
            if (i == 0) {
                i = 5;
                comment.innerHTML = comments[i].yorum;
                name.innerHTML = comments[i].isim;
            } else {
                i -= 1;
                comment.innerHTML = comments[i].yorum;
                name.innerHTML = comments[i].isim;
            }
        }

        function ileri() {
            if (i == 5) {
                i = 0;
                comment.innerHTML = comments[i].yorum;
                name.innerHTML = comments[i].i;
            } else {
                i += 1;
                comment.innerHTML = comments[i].yorum;
                name.innerHTML = comments[i].i;
            }
        }



    </script>

Note : i put here the css codes cause maybe should necessary

OUTPUT

despite can write “comments.yorum” , why ı cant write “comments.isim”

i’ve tried to write comments.isim to div , i can’t write comments.isim despite can write comments.yorum,I couldn’t see comments.isim

Answer

The issue was caused by your variable’s name. You cannot use name as a variable name. name is a property of window.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
    <style>
        button {
            width: 25px;
            height: 25px;
        }

        #ana {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            margin-top: 35vh;
        }

        #container {
            width: 10%;
            margin-inline: 25px;
        }

        #container .cmmt {
            width: 100%;
            height: 120px;
            background-color: yellow;
            padding: 5px;
            text-align: center;
        }

        #ana #container .name {
            width: 100%;
            height: 40px;
            background-color: yellowgreen;
            padding: 5px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="ana">
        <button onclick="geri()">←</button>
        <div id="container">
            <div class="cmmt"></div>
            <div class="name"></div>
        </div>
        <button onclick="ileri()">→</button>
    </div>

    <script>
        var comment = document.getElementsByClassName("cmmt")[0];
        var isim = document.getElementsByClassName("name")[0];

        var comments = [{ yorum: "çok güzel bir ürün fakat paketlemesini beğenmedim", isim: "semih" }
            , { yorum: "paketlemesi çok iyi ama o kadar iyi ama o kadar da iyi değildi", isim: "mehmet" }
            , { yorum: "ürün fotoğrafta göründüğü gibi değil resmen dolandırıcılık bu", isim: "tolga" }
            , { yorum: "iyi ürün değil ama parasına göre iyi iş yapıyor fiyat-performans", isim: "can" }
            , { yorum: "ürün ptt kargo ile gönderilmesi dışında sıkıntı yok ", isim: "recep" }
            , { yorum: "bu ürün hakkında daha ne kadar yorum yapılabilir bilmiyorum", isim: "erdal" }];

         console.log(comments[0].isim)

        i = Math.round(Math.random() * 5);
        comment.innerHTML = comments[i].yorum;
        isim.innerHTML = comments[i].isim;

        function geri() {
            if (i == 0) {
                i = 5;
                comment.innerHTML = comments[i].yorum;
                isim.innerHTML = comments[i].isim;
            } else {
                i -= 1;
                comment.innerHTML = comments[i].yorum;
                isim.innerHTML = comments[i].isim;
            }
        }

        function ileri() {
            if (i == 5) {
                i = 0;
                comment.innerHTML = comments[i].yorum;
                isim.innerHTML = comments[i].isim;
            } else {
                i += 1;
                comment.innerHTML = comments[i].yorum;
                isim.innerHTML = comments[i].isim;
            }
        }



    </script>

Advertisement

Answer