Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
menampilkan variable setelah fungsi di jalankan, dengan global var.
ini html dan js
<html>
<head>
<title>Belajar css javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Effect Flip Card</h1>
<div class="container">
<div class="box-style putar1">
<div class="depan">Klik !</div>
<div id="nomor" class="belakang"></div>
</div>
</div>
<div class="box-style putar1">
<div class="bayangan"></div>
</div>
</body>
<script type="text/javascript">
var box1 = document.getElementsByClassName('box-style')[0];
var box2 = document.getElementsByClassName('box-style')[1];
var nomor = document.getElementsByClassName('belakang')[0];
var acak = Math.random() * 10 + 1;
var i = 0;
function putar() {
for (i; i <= 50; i++) {
box1.style.transform = "rotateY(" + i * 90 + "deg)";
box2.style.transform = "rotateY(" + i * 90 + "deg)";
}
setInterval(putar, 505);
if (i > 49) {
hasil = Math.floor(acak);
}
}
nomor.innerHTML = hasil;
box1.onclick = putar;
box2.style.height = 'auto';
</script>
</html>
ini CSSnya
/*Created : Bucekz Ershand
Date : 21 januari 2017*/
h1 {
text-align: center;
}
.container {
perspective: 1200px;
}
.box-style {
width: 200px;
height: 230px;
position: relative;
left: 50%;
margin-left: -100px;
transform-style: preserve-3d;
transition: transform 5s;
}
.putar1 {
transform: rotateY(0deg);
}
.putar2 {
transform: rotateY(180deg);
}
.depan, .belakang {
position: absolute;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 25px;
left: 0;
top: 0;
border-radius: 50%;
}
.depan {
background-color: yellow;
}
.belakang {
transform: rotateY(180deg);
background-color: green;
font-size: 50px;
}
.bayangan {
width: 200px;
height: 2px;
position: absolute;
box-shadow: 0 2px 5px black;
border-radius: 50%;
opacity: 0.5;
}
Pertanyaan :
Kenapa variable "hasil" yang ada pada fungsi "putar" ketika saya coba ambil pada method nomor.innerHTML= hasil; tidak muncul nomor acaknya, saya coba methodnya masukan ke baris fungsi , tapi nomor acak nya langsung muncul pada effect flipnya, ceritanya saya mau setelah effect flip selesai baru menampilkan nomor acaknya.
maaf banyak tanya, saya newbie banget, baru belajar program dari sekolah koding kurang lebih baru 1bulan, gk ada basic pemograman..
4 Jawaban:
coba nomor.innerHTML = hasil; letakan di bawah hasil = Math.floor(acak);
Biasakan untuk deklarasi nilai default variable terlebih dahulu. Coba kode ini di dalam javascriptnya
var hasil = window.hasil = 0 // deklarasi variabel hasil
var box1 = document.getElementsByClassName('box-style')[0];
var box2 = document.getElementsByClassName('box-style')[1];
var nomor = document.getElementsByClassName('belakang')[0];
var acak = Math.random() * 10 + 1;
var i = 0;
function putar() {
for (i; i <= 50; i++) {
box1.style.transform = "rotateY(" + i * 90 + "deg)";
box2.style.transform = "rotateY(" + i * 90 + "deg)";
}
setInterval(putar, 505);
if (i > 49) {
hasil = Math.floor(acak);
}
}
nomor.innerHTML = hasil;
box1.onclick = putar;
box2.style.height = 'auto';
@QaiserLab : kalo
nomor.innerHTML=hasil;
diletakan dibawah
hasil = Math.floor(acak);
dia langsung menampilkan nomor acaknya pada saat action fungsinya.
@ma4m : saya coba kode di atas tapi tetep hasilnya menampilkan langsung nomor acaknya. Sekalian mau tanya fungsi dari window buat apa?
thank's buat jawabannya.
kalo tujuannya menampilkan kode acak nya setelah fungsi di trigger, kode random nya harus di generate setelah event click di trigger.
coba kode di bawah.
var hasil = window.hasil = 0 // deklarasi variabel hasil
var box1 = document.getElementsByClassName('box-style')[0];
var box2 = document.getElementsByClassName('box-style')[1];
var nomor = document.getElementsByClassName('belakang')[0];
var acak = 0;
var i = 0;
function putar() {
for (i; i <= 50; i++) {
box1.style.transform = "rotateY(" + i * 90 + "deg)";
box2.style.transform = "rotateY(" + i * 90 + "deg)";
}
setInterval(putar, 505);
if (i > 49) {
acak = Math.random() * 10 + 1;
hasil = Math.floor(acak);
}
}
nomor.innerHTML = hasil;
box1.onclick = putar;
box2.style.height = 'auto';