Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.04.2024, 14:43
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 77

Не работает функция если id изображения меняю на clacc.
Всех с днем Смеха. Столкнулся с проблемой следующего характера. Если в HTML изображению присваиваю id? то функция работает, если присваиваю clacc, то не работает. В чем тут проблема спецы JS?
Вот мои коды:
Тут работает
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <style type='text/css'>
    #brevno {
    display:none;
}
  </style>
<script type='text/javascript'>
window.onload=function(){
var image = document.getElementById("brevno");
setTimeout(() => image.style.display = "block", 3000);//время задержки показа
setTimeout(() => image.style.display = "none", 10000);// время показа будет
</script>
</head>

<body>

 <img id="brevno"  src="pictures/brevno.gif">

</body>
</html


А тут нет
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <style type='text/css'>
    .brevno {
    display:none;
}
  </style>
<script type='text/javascript'>
window.onload=function(){
var image = document.querySelector("brevno");
setTimeout(() => image.style.display = "block", 3000);//время задержки показа
setTimeout(() => image.style.display = "none", 10000);// время показа
}
</script>
</head>

<body>

 <img class="brevno"  src="pictures/brevno.gif">

</body>
</html
Ответить с цитированием
  #2 (permalink)  
Старый 01.04.2024, 15:17
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,717

var image = document.querySelector("*!*.*/!*brevno");

В querySelector перед классом должна стоять точка, либо используйте вместо querySelector getElementsByClassName
var image = document.getElementsByClassName("brevno")?.at(0);
Ответить с цитированием
  #3 (permalink)  
Старый 01.04.2024, 15:54
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 77

Nexus, спасибо с точкой работает. Знаю же, что надо ставить точку, но как-то пропустил. Попутный вопрос. Как правильно дописать скрипт с классом, чтобы подобным образом, но естественно с разными временными показателями, появлялись и исчезали ещё четыре картинки?

Последний раз редактировалось III, 01.04.2024 в 16:03.
Ответить с цитированием
  #4 (permalink)  
Старый 01.04.2024, 17:50
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,717

Как-то так:
<img class="blink-image brevno"  src="pictures/brevno.gif">
<img class="blink-image brevno2"  src="pictures/brevno.gif">
<img class="blink-image brevno3"  src="pictures/brevno.gif">
<img class="blink-image brevno4"  src="pictures/brevno.gif">

<script>
document.querySelectorAll('.blink-image').forEach((image, index) => {
    setTimeout(() => image.style.display = "block", (index * 1000) + 3000);
    setTimeout(() => image.style.display = "none", (index * 1000) + 10000);
});
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 01.04.2024, 18:30
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 77

Nexus, и вновь Вы меня выручаете, сейчас попробовать не могу, занят, но уверен, что всё будет работать. Наберусь наглости, задам ещё один вопрос. Как тут в скрипте сделать , чтобы картинки плавно появлялись и исчезали? Приношу свои извинения, за то что задал так много вопросов.
Ответить с цитированием
  #6 (permalink)  
Старый 01.04.2024, 20:11
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 77

Nexus, сделал вроде так как Вы советовали, но что вновь пошло не так. Первая картинка (бревно)появляется как надо, а вот от второй и третьей на экран выводятся только их значки, но они появляются и исчезают. вот картинка
Вот код, который у меня получился

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Показать и скрыть</title>
  <link rel="stylesheet" href="styles/style.css">
<style type='text/css'>
 .brevno {
    display:none;
}
 .roza {
    display:none;
}

.lutik {
    display:none;
}

 </style>
</head>
<body>

<div class="container">
  <div class="image-stack">

<img class="зеленый"
src="pictures/зеленый.png" alt=""/>

<img class="черный"
src="pictures/черный.png" alt=""/>

<img class="blink-image brevno" src="pictures/brevno.gif" alt="бревно"/>
<img class="blink-image roza" src="pictures/roza.png" alt="роза"/>
<img class="blink-image lutik" src="pictures/lutik.png" alt="лютик"/>
	
</div>
	</div>

<script src="scripts/script.js"></script>
</html>

document.querySelectorAll('.blink-image').forEach((image, index) => {
    setTimeout(() => image.style.display = "block", (index * 1000) + 3000);
    setTimeout(() => image.style.display = "none", (index * 1000) + 10000);
});

я так понимаю, что показ и скрытие картинок будет происходить по в ременным показателям в скрипте, т.е. в одно и тоже время для всех картинок, а надо, чтобы временные показатели для каждой картинки были своими. Что я опять не так сделал?
Ещё раз спасибо за помощь, и мои извинения за назойливость.
Ответить с цитированием
  #7 (permalink)  
Старый 01.04.2024, 21:17
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 77

С показом картинок я разобрался. Всё работает. Осталось сделать временные показатели для каждой картинки и если возможно решить вопрос плавным появлением и скрытием.
Ответить с цитированием
  #8 (permalink)  
Старый 01.04.2024, 22:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

Сообщение от III
Осталось сделать временные показатели для каждой картинки и если возможно решить вопрос плавным появлением и скрытием.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Показать и скрыть</title>
    <link rel="stylesheet" href="styles/style.css">
    <style type='text/css'>
        .blink-image  {
            opacity: 0;
            width: 150px;
            transition: opacity 1.2s;
        }

        .brevno.open {
            opacity: 1;
            transition: opacity 1s;
        }

        .roza.open {
           opacity: 1;
           transition: opacity .3s;
        }

        .lutik.open {
           opacity: 1;
           transition: opacity .7s;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="image-stack">
            <img class="зеленый" src="pictures/зеленый.png" alt="" />
            <img class="черный" src="pictures/черный.png" alt="" />
            <img class="blink-image brevno" src="https://diomaks.com/images/tree.gif" alt="бревно" />
            <img class="blink-image roza" src="https://pngicon.ru/file/uploads/2_8-256x256.png" alt="роза" />
            <img class="blink-image lutik" src="https://cdn-icons-png.flaticon.com/256/8958/8958580.png" alt="лютик" />
        </div>
    </div>
    <script>
const arr = [{show : 1000, hide : 4000}, {show : 5000, hide : 8000}, {show : 3000, hide : 5000}];
document.querySelectorAll('.blink-image').forEach((image, index) => {
    let {show, hide} = arr[index];
    setTimeout(() => image.classList.add('open'), show);
    setTimeout(() => image.classList.remove('open'), hide);
});
</script>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 02.04.2024, 07:20
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 77

рони, Огромное Вам спасибо. Это то что надо. На другом форуме я так и не добился правильного результата на свои вопросы. Жаль, что тут на форуме нет оценки полученным ответам. Или я их просто не нашел?
Короче, для Вас и Nexus куча благодарностей. Живите долго и не болейте.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функция которая работает на OnLoad не хочет работать на OnClick libinstyle Элементы интерфейса 6 23.03.2010 01:42
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 13:31
Почему не работает функция? Vitaly jQuery 10 31.07.2009 17:01
не работает функц. календаря если в имение есть [] kotjke Я не знаю javascript 2 04.06.2009 11:43
Не работает функция Destrifer Элементы интерфейса 8 07.12.2008 01:34