Кнопка JS - JavaScript, Ajax

123Ллла · 30.12.2022, 17:16

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

Текст: ("Признанными изобретателями кинематографа стали французы,
братья Луи и Огюст Люмьеры. Аппаратура Люмьеров оказалась
очень удобной, с её помощью можно было легко снимать и демонстрировать
фильмы на большом экране. Днём рождения кино считается 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>

Cuprum5 · 30.12.2022, 18:06

Оберните текст в <div></div> и управляйте свойством display:none.

uberchel · 30.12.2022, 20:34

Как то так :

Код:

<!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>

Падонак · 01.01.2023, 17:58

Цитата:

Сообщение от 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>

30.12.2022, 17:16	#1
123Ллла Пользователь Регистрация: 07.03.2021 Сообщений: 33	Кнопка 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>

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Разработайте проект, в котором при щелчке на кнопке «+» кнопка «Тест» растет во все стороны, при щелчке на кнопке «–» кнопка «Тест» сжимается	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

30.12.2022, 18:06	#2
Cuprum5 Форумчанин Регистрация: 09.05.2017 Сообщений: 684	Оберните текст в <div></div> и управляйте свойством display:none.