Beispiel:JS-Funktionen-parseInt.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">

<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('#eingabe').addEventListener('keyup', eingabeVerarbeitung); 
 
    var Elemente = ['007', '18', '18.1', '18,9', '-18', '-0018', 'abc', '1a'];
    for (var i = 0; i < Elemente.length; ++i) {
		zeileEinfuegen();
	}

   function zeileEinfuegen () { 
      var tabelle = document.querySelector('tbody');	
      // schreibe Tabellenzeile
	   var Reihe = tabelle.insertRow(0);
       Reihe.insertCell().innerText = Elemente[i];
       Reihe.insertCell().innerText = parseInt(Elemente[i]);
   }

  function eingabeVerarbeitung () {
	  var eingabe = document.getElementById('eingabe');
      document.querySelector('output').innerText = parseInt(eingabe.value);
  }
	  
});
	
</script>
<style>
table, tr, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 0.2em;
}
th {
  background-color: grey;
  color: white;
  padding: 0.5em 1em;
}

td {
  text-align: right;
  padding: .5em;
}
</style>
  <title>parseInt() - Zeichenketten in Zahlen umwandeln</title>
</head>
<body>
  <h1>parseInt() - Zeichenketten in Zahlen umwandeln</h1>
 
<main>
    <table id="tabelle">
    <thead>
        <tr><th>Wert</th><th>parseInt(Wert)</th></tr>
    </thead>
    <tbody>
    <tr id="reihe"><td><input id="eingabe" autofocus placeholder="Ihre Eingabe"></td><td><output id="ausgabe"></output></td></tr>
    </tbody>
    </table>
    

</main>

</body>
</html>