Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
9 / 9 / 3
Регистрация: 16.03.2020
Сообщений: 72
1

Как подружить innerHTML и onclick?

27.10.2020, 10:48. Показов 900. Ответов 2

Доброго времени суток, извиняюсь, если вопрос покажется глупым, только начал изучать innerHTML, возник вопрос: как код ниже изменить, чтобы текст на выход не пропадал сразу после появления (запустив код, вы поймете, о чем я)
PHP/HTML
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Капс</title>
</head>
<body>
    <div class="sidebar">
        <form method="post" action="#" id="for_caps" >
            <label for = "text"> Ваш текст: </label>
            <input type="text" class="form-control" id="text">
            <button onclick="writing()"  class="btn" >Получить текст КАПСОМ</button>
        </form>
    </div>
    <div id="output" class = "out">
        Тут будет результат. 
    </div>
    <style type="text/css">
        *{
            background-image: url(img/bg.jpg)
        }
    </style>
    <script>
        function writing(){
            document.getElementById("output").innerHTML = document.getElementById("text").value.toUpperCase();
        }
    </script>
</body>
</html>
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
27.10.2020, 10:48
Ответы с готовыми решениями:

Как правильно использовать innerHTML в событии onclick
Всем привет! Кликаем по одной картинке (иконке), в другом месте страницы меняется картинка. ...

Двойной onclick и innerHTML
function rez () { if(document.getElementById(&quot;text&quot;)==&quot;sample text&quot;) {...

innerHTML, как запретить ввод текста?
День добрый! Нужна помощь вот в каком деле: У меня есть редактор на базе IE, я загружаю во...

Как запретить дописывание тегов в свойстве innerHTML ?
В этом коде умышленно созданы ошибки: не закрыт тег &lt;p&gt;; написан неверный тег &lt;fg&gt; &lt;div...

2
Модератор
2636 / 1561 / 474
Регистрация: 07.09.2019
Сообщений: 2,394
27.10.2020, 11:02 2
Лучший ответ Сообщение было отмечено rim41 как решение

Решение

Здравствуйте. При отправке формы по умолчанию осуществляется переход по адресу, указанному в атрибуте action; в данном случае это приводит к обновлению страницы.
PHP/HTML
1
<button onclick="writing(); return false"  class="btn" >Получить текст КАПСОМ</button>
1
235 / 219 / 110
Регистрация: 14.03.2015
Сообщений: 863
Записей в блоге: 1
27.10.2020, 11:05 3
rim41, У все все обернуто в form, а у кнопки явно не указан type, поэтому она распознается как type="submit", поэтому выполняется действие отправки формы.

Вы либо контейнер поменяйте либо явно задайте у кнопки type="button"
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
27.10.2020, 11:05

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Как работает innerhtml после ajax загрузки контента?
покажет ли он подгруженный контент?

innerHTML. Как же мне получить доступ к содержимому фрейма?
Народ, помогите плз!!! По ссылке http://exper.ural.ru/0075.phtml есть описание того, как...

InnerHTML не добавляет содержимое а стирает и перезаписывает новое. Как просто добавить?
В общем у меня такое задание: Добавить под элементом DIV поле для текстового ввода (&lt;input...

innerHTML как сделать чтобы неочищал поля в диве при добавлении нового
document.getElementById('add_form').innerHTML += &quot;&lt;input type=text name=text&gt;&quot;; таким способом...

Как спарсить со страницы объект добавленный через сторонний скрипт с помощью innerHTML?
Всем привет! Появился вопрос: Как спарсить со страницы объект добавленный через сторонний скрипт с...

Как подружить VB и 1С?
А никто из здешних не пытался сдружить 1С и ВБ? Насколько это реально и имеет смысл? Я хотел бы всю...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.