Блог

Главная - Вопросы по программированию - Как мне выполнить две противоположные функции с помощью «onclick» для одного элемента

Как мне выполнить две противоположные функции с помощью «onclick» для одного элемента

#javascript #html

#javascript #HTML

Вопрос:

У меня есть текстовое поле html. Мне нужен JavaScript, который расширяет текстовое поле при первом щелчке и возвращает его к исходному размеру при втором щелчке. Ps: Я новичок в JS.

Комментарии:

1. Вы получите больше помощи, если поделитесь соответствующим кодом. Что вы пробовали до сих пор?

Ответ №1:

Попробуйте использовать toggle() функцию HTMLElement.classList следующим образом.

 document.querySelector('div').addEventListener('click', ({ target }) => {
  target.classList.toggle('blue');
});  
 div {
  color: red;
}

.blue {
  color: blue;
}  
 <div>My Text</div>

Комментарии:

1. Вы можете указать разные свойства высоты и ширины для ваших divs, чтобы переключать изменение размера.

2. @moritzsalla абсолютно, просто пытался дать очень простую демонстрацию toggle

3. Мой комментарий предназначался для автора 🙂

Ответ №2:

Вы можете использовать переменную count = 0 . При каждом нажатии вы можете сделать count .

Таким образом, логика расширения будет выглядеть так :

 if (count % 2 === 1) {  
  // for odd number of clicks
  // will expand my text box
} else {
  // for even number of clicks
  // will shrink
}

Комментарии:

1. Салман Сантино, мне нравится эта идея. Жаль, что я не могу реализовать это на данном этапе.