Как при нажатии кнопки изменить класс p и убрать текст в нем

@M_arina · Регистрация: 13.11.2021

Студворк — интернет-сервис помощи студентам

Всем привет

Делаю задание по методичке. За условием нужно при нажатии кнопки input убрать текст в p и заменить его на изображение, которое находится в классе img (background) а также поменять value у input. У меня появляется изображение, но текст не исчезает. При запуске кода будет понятнее :

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>zadanie2</title>
</head>
<body>
    <input type="button" id="btn" value="Показать свечку" onclick="img();">
    <p>Иннокентий Анненский</p>
    <p>Свечку внесли</p>
    <p class="text" id="txt">
        Не мерещится ль вам иногда,<br>
        Когда сумерки ходят по дому,<br>
        Тут же возле иная среда,<br>
        Где живём мы совсем по-другому?<br>
        <br>
        С тенью тень там так мягко слилась,<br>
        Там бывает такая минута,<br>
        Что лучами незримыми глаз<br>
        Мы уходим друг в друга как будто.<br>
        <br>
        И движеньем спугнуть этот миг<br>
        Мы боимся иль словом нарушить,<br>
        Точно ухом кто возле приник,<br>
        Заставляя далекое слушать.<br>
        <br>
        Но едва запылает свеча,<br>
        Чуткий мир уступает без боя,<br>
        Лишь из глаз по наклонам луча<br>
        Тени в пламя сбегут голубое.
    </p>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    <style>
        body{
            background-color: darkblue;
            font-size: 22px;
            font-style: italic;
            color: white;
        }
        .text{
            border-color: #ffA089;
            border-style: outset;
            border-width: 5px;
            display: ;
        }
        .img{
            background: url('2.jpg') no-repeat;
            background-position: center;
            border-color: #ffA089;
            border-style: outset;
            border-width: 50px;
            padding: 5px;
            width: 205px;
            height: 205px;
        }
    </style>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <script>
        i = 0;
        function img(){
            r1 = document.getElementById('txt')
            r2 = document.getElementById('btn')
            if (i == 0){
                r1.style.display == 'none';
                r1.classList.add('img');
                r2.value = 'Показать текст';
                i = 1;
            }
            else{
                r1.style.display == 'block';
                r1.classList.remove('img');
                r2.value = 'Показать свечку';
                i = 0;
            }
        }
    </script>

@klyapa · 31.10.2022, 21:47

Не пренебрегайте ключевым словом let или const, а также ; в конце инструкций. Избежите множества ошибок.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let i = 0;
let r1 = document.getElementById('txt');
let r2 = document.getElementById('btn');
let html = r1.innerHTML;
 
function img(){
    if (i == 0){
        r1.classList.add('img');
        r1.innerHTML = '';
        r2.value = 'Показать текст';
        i = 1;
    } else {
        r1.classList.remove('img');
        r1.innerHTML = html;
        r2.value = 'Показать свечку';
        i = 0;
    }
}

@M_arina · 31.10.2022, 22:13 **[ТС]**

Спасибо большое

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@M_arina 0 / 0 / 0 Регистрация: 13.11.2021 Сообщений: 30
	31.10.2022, 22:13 [ТС]
	Спасибо большое 0

Как при нажатии кнопки изменить класс p и убрать текст в нем

Решение