Смена текста по клику ( 3 варианта)

 Привет, друзья. Вопрос был от читателя, как сделать смену текста на странице, когда при нажатие на кнопку один текст меняется на другой и обратно.  Вариант достаточно распространённый и, часто встречающийся. Покажу несколько вариантов, как по клику быстро сменить текст на другой .  

Первые 2 будут просто менять текст, не возвращая прежний. Все пробуем в этом редакторе для наглядности. Копируйте код и вставляем в поле для просмотра. 


как поменять текст на странице по клику


1. Вариант. Использовать подготовленный текст, кнопку, с помощью которой будет осуществляться замена, и скрипт JS.


<p class="par">Здесь ваш тестовый текст</p>

<button onclick="fu()" type="text">Нажми на меня и посмотри .</button>

<script>

function fu(){

    var par = document.querySelector('.par');

    par.innerHTML = 'Получилось!!!! УРА, УРА, УРА';

}

</script>




2. Вариант. Смена текущего текст без кнопки.


<h1 onclick="changeText(this)">Попробуй кликнуть на меня!</h1>

<script>

function changeText(id) {

    id.innerHTML = "Получилось ! УРА, УРА, УРА";

}

</script>




3. Вариант. Как заменить содержимое блока на другое при клике, а при повторном, обратно.


<script type='text/JavaScript'>

     function verocultar(cual) {

          var c=cual.nextSibling;

          if(c.innerHTML=='второй текст второй текст') {

               c.innerHTML='первый текст первый текст';

          } else {

               c.innerHTML='второй текст второй текст';

          }

          return false;

     }

</script><a onclick="return verocultar(this);"

     href="javascript:void(0);">поменяем</a><div>

....... текст текст текст.......

</div>


Есть ещё вариант без кнопки. Работает туда и обратно, один раз
  

<script>function changeText(){ document.getElementById('boldStuff').innerHTML = (document.getElementById('boldStuff').innerHTML == 'Нажать') ? 'Вот вам и второй текст' : 'А это снова первый';</script>
<span id='boldStuff' onclick="changeText();">Жмём</span>


В каждом из вариантов, соответственно, меняйте текстовые поля на свои. Любой из кодов устанавливайте в сообщении в формате HTML.

Хочется надеяться, что именно это имел в виду читатель. Может и Вам пригодится.

✱✱✱✱✱✱

Дорогие, друзья. Скорее всего это последний пост в уходящем 2020 году. Всем спасибо за внимание к моим шпаргалкам. Всем желаю счастливого Нового года, незабываемых и радостных праздников. Крепкого здоровья и успехов во всех делах. Счастья Вам и Вашим близким. 

С наступающим Новым 2021 годом!!!


Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email


11 комментариев:

  1. Этот комментарий был удален администратором блога.

    ОтветитьУдалить
    Ответы
    1. Семён, приношу свои извинения. Комментарий Ваш случайной удалила.В списке рядом 2 спама было. Получилось совершенно случайно. Если будет желание, продублируйте, пожалуйста. Ещё раз извиняюсь.

      Удалить
  2. Честно говоря, я забыл, что там написал. Но там был вопрос об одной консультации. Это не срочно. Через неделю-две я его продублирую.

    ОтветитьУдалить
    Ответы
    1. Хорошо, Семён. Вот такая досадная накладка произошла.

      Удалить
  3. Здравствуйте, Вика. Очень нужна Ваша помощь. Пробовала в коде блога установить новогоднее украшение. Получилось плохо. Удалила. А в мобильной версии не удалилось и болтается. Что делать?

    ОтветитьУдалить
  4. Здравствуйте, Катерина. Посмотрела Ваш блог в углу шарики и бегущая картинка. То же самое вижу на мобильной версии. Хотела выслать Вам скриншот, но не нашла форму связи. Пришлите мне письмо на почту(в верху) перешлю вам снимок.

    ОтветитьУдалить
    Ответы
    1. Так и не смогла справиться с елочными шарами....

      Удалить
  5. Катерина. Просмотрела Ваш исходный код страницы. Такое впечатление, что Вы код шаров установили в гаджет Adsense. Ищите в макете вашего блога гаджет с таким кодом <img src="https://1.bp.blogspot.com/-WTsP_3A1zH8/X-YzpREkx1I/AAAAAAAAi-g/Q5MawvdTyWkMmq-oa2r8DQrfyqTiUaI3ACPcBGAYYCw/s320/59b3814b264d915e65310d95.png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;">
    Или непосредственно во вкладке ТЕМА.

    Только будьте внимательны, не удалите лишнее

    ОтветитьУдалить
    Ответы
    1. Спасибо! Вы волшебница! Пусть в Новом году все мечты исполнятся!

      Удалить
  6. Катерина, ни какого волшебства, поверьте мне. В следующий раз запомните только куда какой гаджет вставили. И Вас с наступающим. Если что, обращайтесь. Чем смогу помогу.

    ОтветитьУдалить
  7. Постараюсь быть повнимательней)))) Спасибо за помощь!☺

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML