I can’t write the second data in my object to div
JavaScript
x
97
97
1
<head>2
<meta charset="UTF-8">3
<meta http-equiv="X-UA-Compatible" content="IE=edge">4
<meta name="viewport" content="width=device-width, initial-scale=1.0">5
<title>document</title>6
<style>7
button {8
width: 25px;9
height: 25px;10
}11
12
#ana {13
display: flex;14
justify-content: center;15
align-items: center;16
position: relative;17
margin-top: 35vh;18
}19
20
#container {21
width: 10%;22
margin-inline: 25px;23
}24
25
#container .cmmt {26
width: 100%;27
height: 120px;28
background-color: yellow;29
padding: 5px;30
text-align: center;31
}32
33
#ana #container .name {34
width: 100%;35
height: 40px;36
background-color: yellowgreen;37
padding: 5px;38
text-align: center;39
}40
</style>41
</head>42
43
<body>44
<div id="ana">45
<button onclick="geri()">←</button>46
<div id="container">47
<div class="cmmt"></div>48
<div class="name"></div>49
</div>50
<button onclick="ileri()">→</button>51
</div>52
53
<script>54
var comment = document.getElementsByClassName("cmmt")[0];55
var name = document.getElementsByClassName("name")[0];56
57
var comments = [{ yorum: "çok güzel bir ürün fakat paketlemesini beğenmedim", isim: "semih" }58
, { yorum: "paketlemesi çok iyi ama o kadar iyi ama o kadar da iyi değildi", isim: "mehmet" }59
, { yorum: "ürün fotoğrafta göründüğü gibi değil resmen dolandırıcılık bu", isim: "tolga" }60
, { yorum: "iyi ürün değil ama parasına göre iyi iş yapıyor fiyat-performans", isim: "can" }61
, { yorum: "ürün ptt kargo ile gönderilmesi dışında sıkıntı yok ", isim: "recep" }62
, { yorum: "bu ürün hakkında daha ne kadar yorum yapılabilir bilmiyorum", isim: "erdal" }];63
64
console.log(comments[0].isim)65
66
i = Math.round(Math.random() * 5);67
comment.innerHTML = comments[i].yorum;68
name.innerHTML = comments[i].isim;69
70
function geri() {71
if (i == 0) {72
i = 5;73
comment.innerHTML = comments[i].yorum;74
name.innerHTML = comments[i].isim;75
} else {76
i -= 1;77
comment.innerHTML = comments[i].yorum;78
name.innerHTML = comments[i].isim;79
}80
}81
82
function ileri() {83
if (i == 5) {84
i = 0;85
comment.innerHTML = comments[i].yorum;86
name.innerHTML = comments[i].i;87
} else {88
i += 1;89
comment.innerHTML = comments[i].yorum;90
name.innerHTML = comments[i].i;91
}92
}93
94
95
96
</script>97
Note : i put here the css codes cause maybe should necessary
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
Advertisement
Answer
The issue was caused by your variable’s name. You cannot use name as a variable name. name is a property of window.
JavaScript
1
96
96
1
<head>2
<meta charset="UTF-8">3
<meta http-equiv="X-UA-Compatible" content="IE=edge">4
<meta name="viewport" content="width=device-width, initial-scale=1.0">5
<title>document</title>6
<style>7
button {8
width: 25px;9
height: 25px;10
}11
12
#ana {13
display: flex;14
justify-content: center;15
align-items: center;16
position: relative;17
margin-top: 35vh;18
}19
20
#container {21
width: 10%;22
margin-inline: 25px;23
}24
25
#container .cmmt {26
width: 100%;27
height: 120px;28
background-color: yellow;29
padding: 5px;30
text-align: center;31
}32
33
#ana #container .name {34
width: 100%;35
height: 40px;36
background-color: yellowgreen;37
padding: 5px;38
text-align: center;39
}40
</style>41
</head>42
43
<body>44
<div id="ana">45
<button onclick="geri()">←</button>46
<div id="container">47
<div class="cmmt"></div>48
<div class="name"></div>49
</div>50
<button onclick="ileri()">→</button>51
</div>52
53
<script>54
var comment = document.getElementsByClassName("cmmt")[0];55
var isim = document.getElementsByClassName("name")[0];56
57
var comments = [{ yorum: "çok güzel bir ürün fakat paketlemesini beğenmedim", isim: "semih" }58
, { yorum: "paketlemesi çok iyi ama o kadar iyi ama o kadar da iyi değildi", isim: "mehmet" }59
, { yorum: "ürün fotoğrafta göründüğü gibi değil resmen dolandırıcılık bu", isim: "tolga" }60
, { yorum: "iyi ürün değil ama parasına göre iyi iş yapıyor fiyat-performans", isim: "can" }61
, { yorum: "ürün ptt kargo ile gönderilmesi dışında sıkıntı yok ", isim: "recep" }62
, { yorum: "bu ürün hakkında daha ne kadar yorum yapılabilir bilmiyorum", isim: "erdal" }];63
64
console.log(comments[0].isim)65
66
i = Math.round(Math.random() * 5);67
comment.innerHTML = comments[i].yorum;68
isim.innerHTML = comments[i].isim;69
70
function geri() {71
if (i == 0) {72
i = 5;73
comment.innerHTML = comments[i].yorum;74
isim.innerHTML = comments[i].isim;75
} else {76
i -= 1;77
comment.innerHTML = comments[i].yorum;78
isim.innerHTML = comments[i].isim;79
}80
}81
82
function ileri() {83
if (i == 5) {84
i = 0;85
comment.innerHTML = comments[i].yorum;86
isim.innerHTML = comments[i].isim;87
} else {88
i += 1;89
comment.innerHTML = comments[i].yorum;90
isim.innerHTML = comments[i].isim;91
}92
}93
94
95
96
</script>