|
|
21.01.2018, 13:27
|
|
Аспирант
|
|
Регистрация: 23.01.2017
Сообщений: 35
|
|
|
Cтранное поведение
Здравствуйте, подскажите, пожалуйста, почему в коде по ссылке ниже
https://jsfiddle.net/85uL4hq4/
в 8й строчке скрипта - span.style.opacity = 0 - выдается ошибка:
scripts.js:8 Uncaught TypeError: Cannot set property 'opacity' of undefined
at scripts.js:8 |
|
21.01.2018, 13:59
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Георгий777,
используйте обычный for и будет вам счастье
|
|
21.01.2018, 14:13
|
|
Аспирант
|
|
Регистрация: 23.01.2017
Сообщений: 35
|
|
|
да, спасибо большое, но все-таки странно, что так не работает)
|
|
21.01.2018, 14:24
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Георгий777,
вы перечислили все свойства обьекта, в том числе длину, у длины нет свойства style
|
|
21.01.2018, 14:54
|
|
Аспирант
|
|
Регистрация: 23.01.2017
Сообщений: 35
|
|
А подскажите, пожалуйста, почему не выводится содержимое массива ar
по этой же ссылке в скрите на 28й строчке во втором цикле for при попытке вывести в консоль
https://jsfiddle.net/85uL4hq4/1/ |
|
21.01.2018, 15:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Георгий777,
строка 4 arLength = 0 , поэтому нет никакого цикла в строке 24
|
|
21.01.2018, 15:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Георгий777,
что хотите сделать?
|
|
21.01.2018, 15:33
|
|
Аспирант
|
|
Регистрация: 23.01.2017
Сообщений: 35
|
|
|
В строке 21 в массив записывается 2 элемента , которые выводятся , если на 23й строке прописать console.log(ar);
А в целом хочу, кликая на любых двух ячейках,если значение их равны, то оставляю эти значения на экране, иначе вновь скрываю их
|
|
21.01.2018, 15:58
|
|
Аспирант
|
|
Регистрация: 23.01.2017
Сообщений: 35
|
|
|
в чем тут может быть дело?
|
|
21.01.2018, 18:44
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
игра открыть пару
Георгий777,
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Grid</title>
<style type="text/css">
.output {
display:flex;
flex-wrap: wrap;
justify-content: center;
width: 603px;
margin: 50px auto;
}
.inner {
display: flex;
flex-basis: 150px;
height: 80px;
background: #ccc;
border: 1px solid gray;
text-align: center;
line-height: 80px;
}
.inner:hover {
cursor: pointer;
}
.inner span {
font-size: 48px;
opacity: 0;
width: 100%;
height: 100%;
transition: 1s;
}
.inner.ok span {
transition: .4s;
opacity: 1;
}
</style>
</head>
<body>
<div class="output">
<div class="inner"><span>1</span></div>
<div class="inner"><span>3</span></div>
<div class="inner"><span>9</span></div>
<div class="inner"><span>5</span></div>
<div class="inner"><span>4</span></div>
<div class="inner"><span>1</span></div>
<div class="inner"><span>3</span></div>
<div class="inner"><span>8</span></div>
<div class="inner"><span>9</span></div>
<div class="inner"><span>5</span></div>
<div class="inner"><span>4</span></div>
<div class="inner"><span>8</span></div>
</div>
<script>
var ar = [], timer, duration = 1000;
[].forEach.call(document.querySelectorAll(".inner"), function(item) {
item.addEventListener("click", function() {
if (item.classList.contains("ok")) {
return;
}
window.clearTimeout(timer);
item.classList.add("ok");
ar.push(item);
if (ar.length == 2) {
if (ar[0].textContent == ar[1].textContent) {
ar = [];
} else {
ar[0].classList.remove("ok");
ar = [item];
}
}
if(ar.length) timer = window.setTimeout(function() {
ar[0].classList.remove("ok");
ar = [];
}, duration);
});
});
</script>
</body>
</html>
Последний раз редактировалось рони, 21.01.2018 в 20:25.
|
|
|
|
