Как изменить текст по нажатию кнопки?

Question

Как сделать что бы в тексте было написано допустим "мальчик", а по нажатию кнопки стало "девочка".

<span>Мальчик</span>
<!-- При нажатии изменить на "Девочка" -->

Answer 1

    $('span').click(function() {
        $(this).text('девочек');
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Сегодня вход только для <span>мальчиков</span>

Answer 2

Можно использовать для этого input type="checkbox":

label > input[type="checkbox"] {
  display: none;
}

label > span:nth-child(3),
input:checked ~ span:nth-child(2) {
  display: none;
}

label > span:nth-child(2),
input:checked ~ span:nth-child(3) {
  display: inline-block;
}

/* Для визуализации */
label > span {font-size: 4em; font-weight: bold; cursor: pointer;}
label > span:nth-child(2) {color: lightblue;}
label > span:nth-child(3) {color: lightpink;}

<label for="toggle">
  <input type="checkbox" id="toggle">
  <span>Мальчик</span>
  <span>Девочка</span>
</label>

И ещё вариант на JS.

[...document.querySelectorAll('[data-toggle]')].forEach(function(e) { // На все вешаем обработчик
  e.addEventListener('click', function(e) { // Чтобы по клику выполнять следующее:
    let toggle = e.target.getAttribute('data-toggle'); // получаем текущее значение атрибута data-toggle
    e.target.setAttribute('data-toggle', e.target.innerText.trim()); // сразу заменяем значение атрибута на текущее текстовое содержимое
    e.target.innerText = toggle; // а текстовое содержимое на полученное заранее значение data-toggle
  });
});

span {font-size: 4em; font-weight: bold; cursor: pointer;}
span[data-toggle="Мальчик"] {color: lightpink;}
span[data-toggle="Девочка"] {color: lightblue;}

<span data-toggle="Девочка">Мальчик</span>
<!-- Я бы хранил записи в data-атрибуте, чтобы сделать более простое редактирование -->

Добавлю ещё вариант на jQuery, который аналогичен варианту выше:

$('[data-toggle]').on('click', function(){
  let toggle = $(this).attr('data-toggle');
  $(this).attr('data-toggle', $(this).text().trim()).text(toggle);
});

span {font-size: 4em; font-weight: bold; cursor: pointer;}
span[data-toggle="Мальчик"] {color: lightpink;}
span[data-toggle="Девочка"] {color: lightblue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-toggle="Девочка">Мальчик</span>
<!-- Я бы хранил записи в data-атрибуте, чтобы сделать более простое редактирование -->

БЛОГ НА HUSL

Как изменить текст по нажатию кнопки?

Ответы (2 шт):