Beispiel:JS-String-slice.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;">  
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />  
  <title>String.slice()</title>
<style>
.teil1 { border-top: 1px solid black; }
.teil2 { border-bottom: 1px solid black; }
</style>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
 
  document.getElementById('button').addEventListener('click', extrahieren);	

 
function extrahieren() {
  var begriff = 'Garnele';
  var extrakt1 = begriff.slice(0, 4);
  var extrakt2 = begriff.slice(-4);
  ausgabe(extrakt1 + ", " + extrakt2);
}

function ausgabe(text){
  var ausgabe = document.getElementById('ausgabe');
  ausgabe.innerHTML = text;
  }
 
});
</script>
</head>

<body>
  <h1>Beispiel: String.slice()</h1>
 
  <main>
<p>Durch einen Klick auf den Button erzeugen sie aus dem Begriff zwei Teilzeichenketten.</p>
    <p>Begriff: <span class="teil1">Gar</span><span class="teil1 teil2">n</span><span class="teil2">ele</span></p>    <button type="button" id="button" >Los!</button>
    <p id="ausgabe"></p>
  </main>
 
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-String-slice.html&oldid=63402“