Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 30.12.2022, 17:16   #1
123Ллла
Пользователь
 
Регистрация: 07.03.2021
Сообщений: 34
По умолчанию Кнопка JS

Хочу сделать кнопку после нажатия которой появляется текст, при этом чтобы на кнопку можно было бы нажать повторно и убрать текст. Как мне это сделать?


Текст: ("Признанными изобретателями кинематографа стали французы,
братья Луи и Огюст Люмьеры. Аппаратура Люмьеров оказалась
очень удобной, с её помощью можно было легко снимать и демонстрировать
фильмы на большом экране. Днём рождения кино считается 28 декабря 1895 г.,
когда состоялся первый коммерческий киносеанс. В своих сеансах Люмьеры
демонстрировали несколько коротких (всего 50 сек.) роликов, первыми из
которых был "Выход рабочих с фабрики", "Прибытие поезда”. Прежде чем в 1895 году братья
Люмьер представили широкой публике и научному сообществу свое детище – синематограф,
– были изобретены технологии фотофиксации, «волшебный фонарь» (нечто вроде советских
диафильмов, где с помощью проектора крутились статичные кадры с подписями, а рассказчик
их озвучивал). В 1891 году коллега Томаса Эдисона – Уильям Диксон – представил
прототип кинетоскопа. Это устройство напоминало шкаф с отверстиями для
глаз – сквозь них зритель мог увидеть пленочные кадры, которые прокручивались,
создавая иллюзию движения. Недостатков у кинетоскопа было несколько: демонстрация
коротких фильмов была возможна только для одного человека, кинетоскоп был чересчур
громоздкий и требовал электричества для работы. Тем не менее заработали кинетоскопические салоны – в них за деньги можно было посмотреть «фильмы» на индивидуальных сеансах.")



Код: но тут почему-то не работает
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="1.css">
<title> Возникновение кино</title>
</head>
<body>
<button onClick="Clickfunkcion()">Возникнов ение кино</button>
<script>
function Clickfunkcion () {
document.getElementById("hellotext" ).innerHTML = "Признанными изобретателями кинематографа стали французы,
братья Луи и Огюст Люмьеры. Аппаратура Люмьеров оказалась
очень удобной, с её помощью можно было легко снимать и демонстрировать
фильмы на большом экране. Днём рождения кино считается 28 декабря 1895 г.,
когда состоялся первый коммерческий киносеанс. В своих сеансах Люмьеры
демонстрировали несколько коротких (всего 50 сек.) роликов, первыми из
которых был "Выход рабочих с фабрики", "Прибытие поезда”. Прежде чем в 1895 году братья
Люмьер представили широкой публике и научному сообществу свое детище – синематограф,
– были изобретены технологии фотофиксации, «волшебный фонарь» (нечто вроде советских
диафильмов, где с помощью проектора крутились статичные кадры с подписями, а рассказчик
их озвучивал). В 1891 году коллега Томаса Эдисона – Уильям Диксон – представил
прототип кинетоскопа. Это устройство напоминало шкаф с отверстиями для
глаз – сквозь них зритель мог увидеть пленочные кадры, которые прокручивались,
создавая иллюзию движения. Недостатков у кинетоскопа было несколько: демонстрация
коротких фильмов была возможна только для одного человека, кинетоскоп был чересчур
громоздкий и требовал электричества для работы. Тем не менее заработали кинетоскопические салоны – в них за деньги можно было посмотреть «фильмы» на индивидуальных сеансах.";
}
</script>
<div id="text">
<p id="hellotext"></p>
</div>

</body>
</html>
123Ллла вне форума Ответить с цитированием
Старый 30.12.2022, 18:06   #2
Cuprum5
Форумчанин
 
Регистрация: 09.05.2017
Сообщений: 729
По умолчанию

Оберните текст в <div></div> и управляйте свойством display:none.
Cuprum5 на форуме Ответить с цитированием
Старый 30.12.2022, 20:34   #3
uberchel
Участник клуба
 
Аватар для uberchel
 
Регистрация: 19.01.2009
Сообщений: 1,455
По умолчанию

Как то так :
Код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="1.css">
<title> Возникновение кино</title>
<style>
#hellotext {display:none;}
</style>
</head>
<body>
<button onClick="Clickfunkcion()">Возникнов ение кино</button>
<script>
function Clickfunkcion () {
   var css= document.getElementById("hellotext" );
   css.style.display = css.style.display == 'none' ? '' : 'none';
}
</script>
<div id="text">
<p id="hellotext">
Признанными изобретателями кинематографа стали французы,
братья Луи и Огюст Люмьеры. Аппаратура Люмьеров оказалась
очень удобной, с её помощью можно было легко снимать и демонстрировать
фильмы на большом экране. Днём рождения кино считается 28 декабря 1895 г.,
когда состоялся первый коммерческий киносеанс. В своих сеансах Люмьеры
демонстрировали несколько коротких (всего 50 сек.) роликов, первыми из
которых был "Выход рабочих с фабрики", "Прибытие поезда”. Прежде чем в 1895 году братья
Люмьер представили широкой публике и научному сообществу свое детище – синематограф,
– были изобретены технологии фотофиксации, «волшебный фонарь» (нечто вроде советских
диафильмов, где с помощью проектора крутились статичные кадры с подписями, а рассказчик
их озвучивал). В 1891 году коллега Томаса Эдисона – Уильям Диксон – представил
прототип кинетоскопа. Это устройство напоминало шкаф с отверстиями для
глаз – сквозь них зритель мог увидеть пленочные кадры, которые прокручивались,
создавая иллюзию движения. Недостатков у кинетоскопа было несколько: демонстрация
коротких фильмов была возможна только для одного человека, кинетоскоп был чересчур
громоздкий и требовал электричества для работы. Тем не менее заработали кинетоскопические салоны – в них за деньги можно было посмотреть «фильмы» на индивидуальных сеансах.
</p>
</div>

</body>
</html>
uberchel вне форума Ответить с цитированием
Старый 01.01.2023, 17:58   #4
Падонак
Пользователь
 
Регистрация: 17.05.2022
Сообщений: 11
По умолчанию

Цитата:
Сообщение от 123Ллла Посмотреть сообщение
Как мне это сделать?
Можно сделать и несколько таких скрытых параграфов, показывать их по одному, пряча ранее "открытые" или не скрывать их. Что-то в таком духе:

Код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Возникновение кино</title>
<style>
button{
font-weight: bold;
cursor: pointer;
min-width: 150px;
}
button:hover{
color: blue;
}
div{
padding: 5px;
}
.hid{
display: none;
}
.vis{
display: initial;
}
</style>
</head>
<body>
<div class="notext">
<p class="hid">
Оберните текст в &lt;div&gt;&lt;/div&gt; и управляйте свойством display:none.
</p>
</div>
<div class="notext">
<p class="hid">
Признанными изобретателями кинематографа стали французы,
братья Луи и Огюст Люмьеры. Аппаратура Люмьеров оказалась
очень удобной, с её помощью можно было легко снимать и демонстрировать
фильмы на большом экране. Днём рождения кино считается 28 декабря 1895 г.,
когда состоялся первый коммерческий киносеанс. В своих сеансах Люмьеры
демонстрировали несколько коротких (всего 50 сек.) роликов, первыми из
которых был "Выход рабочих с фабрики", "Прибытие поезда”. Прежде чем в 1895 году братья
Люмьер представили широкой публике и научному сообществу свое детище – синематограф,
– были изобретены технологии фотофиксации, «волшебный фонарь» (нечто вроде советских
диафильмов, где с помощью проектора крутились статичные кадры с подписями, а рассказчик
их озвучивал). В 1891 году коллега Томаса Эдисона – Уильям Диксон – представил
прототип кинетоскопа. Это устройство напоминало шкаф с отверстиями для
глаз – сквозь них зритель мог увидеть пленочные кадры, которые прокручивались,
создавая иллюзию движения. Недостатков у кинетоскопа было несколько: демонстрация
коротких фильмов была возможна только для одного человека, кинетоскоп был чересчур
громоздкий и требовал электричества для работы. Тем не менее заработали кинетоскопические салоны – в них за деньги можно было посмотреть «фильмы» на индивидуальных сеансах.
</p>
</div>
<div class="notext">
<p class="hid">
Хочу сделать кнопку после нажатия которой появляется текст, при этом чтобы на кнопку можно было бы нажать повторно и убрать текст. Как мне это сделать?
</p>
</div>
<script>
function showHide(elem){
const p = elem.closest('div').querySelector('p');
p.classList.toggle('vis');
/*
Скрываем ранее открытые тексты(если есть)
Это действие можно отключить, если убрать или закомментировать строку кода ниже
*/
document.querySelectorAll('.vis').forEach( z => {if(z !== p) z.classList.remove('vis') });
}

document.querySelectorAll('.notext').forEach( x => {
        const txt = x.querySelector('p').textContent,
			  fragment = txt.substr(0, txt.indexOf(' ')) + '...';
        x.insertAdjacentHTML('afterbegin', '<button title="Показать текст" onclick="showHide(this)">' + fragment + '</button>');
	});
</script>
</body>
</html>
Падонак вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Разработайте проект, в котором при щелчке на кнопке «+» кнопка «Тест» растет во все стороны, при щелчке на кнопке «–» кнопка «Тест» сжимается Craizi8 Помощь студентам 1 26.05.2020 21:04
Если коннект то кнопка Button2 должна быть скрыта, и если дисконнект, то кнопка Button2 должна появляться/ компонент IdSMTP Almaz92 Помощь студентам 13 14.03.2016 00:31
Кнопка Obey177 Общие вопросы Delphi 24 02.09.2010 04:50
Что за кнопка? T-dayne Помощь студентам 9 08.02.2010 19:06