Script: Maak een generator

Hiermee kun je een script maken met ingevulde waardes.

Voorbeeld:

Tekstgenerator met Kopieerfunctie

Vul de gegevens in:

Keuze 1: Keuze 2: Keuze 3: Naam: Plaats: Bericht:

Voorbeeld

Kopie script

Select & Copy Code #1 Chrome

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Tekstgenerator met Kopieerfunctie</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    label, select, input { display: block; margin-bottom: 10px; }
    #result-container { margin-top: 20px; }
    #result {
      margin-bottom: 10px;
      padding: 10px;
      background: #f0f0f0;
      border: 1px solid #ccc;
      min-height: 40px;
    }
  </style>
</head>
<body>
  <h2>Vul de gegevens in:</h2>
  <label for="dropdown1">Keuze 1:</label>
  <select id="dropdown1">
    <option value="Blauw">Blauw</option>
    <option value="Rood">Rood</option>
    <option value="Groen">Groen</option>
  </select>
  <label for="dropdown2">Keuze 2:</label>
  <select id="dropdown2">
    <option value="Appel">Appel</option>
    <option value="Banaan">Banaan</option>
    <option value="Citroen">Citroen</option>
  </select>
  <label for="dropdown3">Keuze 3:</label>
  <select id="dropdown3">
    <option value="Auto">Auto</option>
    <option value="Fiets">Fiets</option>
    <option value="Boot">Boot</option>
  </select>
  <label for="input1">Naam:</label>
  <input type="text" id="input1" placeholder="Typ een naam">
  <label for="input2">Plaats:</label>
  <input type="text" id="input2" placeholder="Typ een plaats">
  <label for="input3">Bericht:</label>
  <input type="text" id="input3" placeholder="Typ een bericht">
  <button onclick="generateText()">Genereer Tekst</button>
  <div id="result-container" style="display:none;">
    <div id="result"></div>
    <button onclick="copyText()">Kopieer Tekst</button>
    <span id="copiedMsg" style="color: green; margin-left: 10px; display: none;">Gekopieerd!</span>
  </div>
  <script>
    function generateText() {
      const d1 = document.getElementById("dropdown1").value;
      const d2 = document.getElementById("dropdown2").value;
      const d3 = document.getElementById("dropdown3").value;
      const i1 = document.getElementById("input1").value;
      const i2 = document.getElementById("input2").value;
      const i3 = document.getElementById("input3").value;
      const output = `${i1} uit ${i2} koos voor een ${d1} ${d3} met een ${d2} en zei: "${i3}"`;
      document.getElementById("result").innerText = output;
      document.getElementById("result-container").style.display = "block";
      document.getElementById("copiedMsg").style.display = "none";
    }
    function copyText() {
      const text = document.getElementById("result").innerText;
      navigator.clipboard.writeText(text).then(() => {
        document.getElementById("copiedMsg").style.display = "inline";
        setTimeout(() => {
          document.getElementById("copiedMsg").style.display = "none";
        }, 2000);
      });
    }
  </script>
</body>
</html>

Script: Maak een generator

Vul de gegevens in:

Voorbeeld

Kopie script

Geef een reactie Reactie annuleren