Всем привет! Собственно мой вопрос состоит в следующем. Есть код:
<head>
<meta http-equiv="Cache-Control" content="no-cache">
<meta charset="utf-8">
<title>Lessons</title>
<link rel="stylesheet" href="styles19.css">
</head>
<style>
#Cards{
background-image: url(images/oom.jpg);
width: 300px;
height: 400px;
border: 1px solid black;
border-radius: 5px;
float: left;
}
.Card{
background-color: #98FB98;
width: 300px;
height: 400px;
border: 1px solid black;
border-radius: 5px;
display: none;
font-size: 25px;
float: right;
}
h1 {
color: #696969;
}
</style>
<body>
<div class="main">
<h1>Cards</h1>
<br>
<input type="button" id="Cards">
<div class = "Card">
<img src="images/pool.jpg">
<label>I swim in a pool</label><br>
<label>I am swimming in a pool</label><br>
<label>I have swum in a pool</label>
</div>
<div class = "Card">
<label>I walk along the river</label><br>
<label>I am walking along the river</label><br>
<label>I have walked along the river</label>
</div>
<div class = "Card">
<label>I wait for you</label><br>
<label>I am waiting for you</label><br>
<label>I have waited for you</label>
</div>
<div class = "Card">
<label>I look at the cat</label><br>
<label>I am looking at the cat</label><br>
<label>I have looked at the cat</label>
</div>
<div class = "Card">
<label>I enter by the door</label><br>
<label>I am entering by the door</label><br>
<label>I have entered by the door</label>
</div>
<div class = "Card">
<label>I show it</label><br>
<label>I am showing it</label><br>
<label>I have showed it</label>
</div>
<div class = "Card">
<label>I read a book</label><br>
<label>I am reading a book</label><br>
<label>I have read a book</label>
</div>
<div class = "Card">
<label>I run fast</label><br>
<label>I am running fast</label><br>
<label>I have run fast</label>
</div>
<div class = "Card">
<label>I eat </label><br>
<label>I am eating</label><br>
<label>I have eaten</label>
</div>
<div class = "Card">
<label>I write it</label><br>
<label>I am writing it</label><br>
<label>I have written it</label>
</div>
<div class = "Card">
<label>I went to the park</label><br>
<label>I was going to the park</label><br>
<label>I have gone to the park</label>
</div>
<div class = "Card">
<label>I ate a pizza</label><br>
<label>I was eating a pizza</label><br>
<label>I have eaten the pizza</label>
</div>
</div>
</body>
<script>
var cards = document.getElementsByClassName("Card");
var cardsArray = Array.from(cards);
Cards.onclick = function() {
for(var i=0; i<1; i++) {
var ran = Math.floor(Math.random() * cardsArray.length);
cardsArray[ran].style.display = "block";
cardssArray.splice(ran,1);
}
}
</script>
</html>
Задача состоит в следующем: при каждом нажатии на кнопку , должна рандомно показываться одна из карт .
Я пытался реализовать это вот таким образом:
var cards = document.getElementsByClassName("Card");
var cardsArray = Array.from(cards);
Cards.onclick = function() {
for(var i=0; i<1; i++) {
var ran = Math.floor(Math.random() * cardsArray.length);
cardsArray[ran].style.display = "block";
cardssArray.splice(ran,1);
}
}
при обновлении страницы эта функция работает, но если привязывать ее к кнопке, то получается, что он просто выдает мне в случайном порядке все карты, пока те не кончатся, а мне нужно, чтобы при каждом нажатии на кнопку открывалась лишь одна случайная карта из колоды, при этом других быть не должно.
Можно конечно реализовать это через window.location.reload(); но меня не очень устраивает это решение, хотелось бы сделать более правильно.
Сразу говорю, что я новичок в программировании, но догадываюсь, что какой-то косяк с счетчиком.
Надеюсь понятно сформулировал вопрос.
Заранее спасибо!
Простой
