Wstawianie tekstu w textarea po kliknięciu przycisku na stronie

Cześć! Dzisiaj zajmiemy się prostym, ale bardzo przydatnym zagadnieniem w JavaScript – jak wstawić tekst do elementu <textarea> po kliknięciu przycisku. Jeśli jesteś początkujący w programowaniu frontendu, to świetny temat, żeby się trochę rozeznać w interakcji między HTML a JavaScript. A jeśli już masz pewne doświadczenie, przypomnisz sobie podstawy i dowiesz się, jak je wykorzystać w praktyce. Zaczynajmy!

Po co nam to?

Załóżmy, że tworzysz formularz, w którym użytkownik musi coś wpisać, ale chcesz ułatwić mu zadanie, np. wstawiając jakiś domyślny tekst lub podpowiedź. Albo masz aplikację, która wstawia wygenerowane dane – np. cytat, opis produktu czy informację kontaktową. Możliwości jest mnóstwo!

W skrócie: jest to częsty scenariusz, a jego implementacja jest banalnie prosta.

Potrzebne narzędzia

Żeby zrealizować nasz cel, potrzebujemy:

HTML – do stworzenia struktury strony.
CSS (opcjonalnie) – dla wyglądu, ale to już zależy od Ciebie.
JavaScript – do działania naszego mechanizmu.

Kod krok po kroku

Najpierw zajmijmy się bazową strukturą HTML, a potem dodamy odpowiedni kod JS. Zaczniemy od najprostszej wersji, a potem trochę ją rozbudujemy.

1. Tworzenie HTML-a

Potrzebujemy dwóch podstawowych elementów:

<textarea>, gdzie wstawimy tekst.
<button>, którego kliknięcie będzie aktywować nasz skrypt.

Oto kod:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wstawianie tekstu do textarea</title>
</head>
<body>
  <h1>Dodaj tekst do pola tekstowego!</h1>
  <textarea id="myTextarea" rows="5" cols="40" placeholder="Tutaj pojawi się tekst..."></textarea>
  <br>
  <button id="insertTextButton">Wstaw tekst</button>

  <script src="script.js"></script>
</body>
</html>

2. Dodanie JavaScriptu

W pliku script.js (lub w <script> w HTML, jeśli wolisz) umieścimy logikę. Po kliknięciu przycisku tekst zostanie wstawiony do <textarea>.

Oto kod:

// Pobieramy elementy z DOM
const textarea = document.getElementById('myTextarea');
const button = document.getElementById('insertTextButton');

// Dodajemy nasłuchiwanie na kliknięcie
button.addEventListener('click', () => {
  // Tekst, który chcemy wstawić
  const text = "Witaj! To jest przykładowy tekst wstawiony za pomocą JavaScript.";
  
  // Wstawiamy tekst do textarea
  textarea.value = text;
});

I to wszystko! Po kliknięciu przycisku tekst pojawi się w polu tekstowym.

Trochę ulepszeń

Jeśli czujesz, że chcesz iść krok dalej, oto kilka pomysłów, jak ulepszyć ten mechanizm.

1. Dodawanie tekstu zamiast zastępowania

Czasami nie chcesz, żeby nowy tekst nadpisywał to, co już jest w <textarea>. W takim przypadku wystarczy zmodyfikować nasz kod:

button.addEventListener('click', () => {
  const text = " Dodany tekst!";
  textarea.value += text; // Dodanie tekstu zamiast nadpisania
});

2. Wybór różnych tekstów

Możesz stworzyć kilka przycisków, które wstawiają różne teksty:

<button id="text1">Wstaw tekst 1</button>
<button id="text2">Wstaw tekst 2</button>

A w JavaScript:

document.getElementById('text1').addEventListener('click', () => {
  textarea.value = "To jest pierwszy tekst.";
});

document.getElementById('text2').addEventListener('click', () => {
  textarea.value = "To jest drugi tekst.";
});

3. Generowanie tekstu dynamicznie

Chcesz, żeby tekst był bardziej „inteligentny”? Na przykład wstawiał aktualną datę lub coś na podstawie akcji użytkownika? Nic prostszego:

button.addEventListener('click', () => {
  const currentDate = new Date().toLocaleString(); // Pobieranie aktualnej daty i czasu
  textarea.value = `Dzisiaj jest: ${currentDate}`;
});

Najczęstsze problemy i ich rozwiązania

Przycisk nie działa? Upewnij się, że:
- W pliku HTML poprawnie załadowano plik script.js (czy plik znajduje się w tej samej lokalizacji?).
- Elementy w HTML mają poprawne id, które odpowiadają tym w JS.
Tekst się nie pojawia?
- Sprawdź w konsoli przeglądarki, czy nie ma błędów JavaScript.
- Upewnij się, że używasz textarea.value, a nie np. textarea.innerHTML.
Chcesz używać kilku <textarea>? W takim przypadku użyj klas zamiast id i iteruj po elementach. Przykład:javascriptSkopiuj koddocument.querySelectorAll('.textareaClass').forEach((textarea, index) => { const button = document.getElementById(`button${index}`); button.addEventListener('click', () => { textarea.value = `To jest tekst dla pola nr ${index + 1}`; }); });

Wstawianie tekstu do <textarea> po kliknięciu przycisku to łatwy, ale bardzo praktyczny trik w JavaScript. Daje sporo możliwości, od ułatwiania życia użytkownikom po dynamiczne generowanie danych. Mam nadzieję, że ten artykuł pomógł Ci zrozumieć, jak to działa, i zainspirował do eksperymentowania.