Beispiel:HTML meter-Element.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visualisierung von Werten</title>
<style>
table {table-layout: fixed; border-collapse: collapse;}
th, td {border: 1px solid; padding: 0 .5em; text-align: center;}
</style>
<script async>
document.addEventListener('DOMContentLoaded', function () {
function erhöheWert(ev) {
if (ev.target.nodeName == "BUTTON") {
var ID = ev.target.getAttribute('data-for'),
meter = document.querySelector('#' + ID),
td = document.querySelector('#val-' + ID);
meter.value < 100 ? meter.value += 10 : meter.value = 0;
td.textContent = meter.value;
}
}
document.querySelector('table').addEventListener('click', erhöheWert);
});
</script>
</head>
<body>
<h1>Beispiele zur Verwendung des meter-Elements</h1>
<table>
<thead>
<tr>
<th></th>
<th>value</th>
<th></th>
<th>min</th>
<th>low</th>
<th>optimum</th>
<th>high</th>
<th>max</th>
</tr>
</thead>
<tbody>
<tr>
<td><meter id="m1" value="10" min="0" max="100"></meter></td>
<td id="val-m1">10</td>
<td><button type="button" data-for="m1">erhöhen</button></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td>100</td>
</tr>
<tr>
<td><meter id="m2" value="10" min="0" low="25" high="75" max="100"></meter></td>
<td id="val-m2">10</td>
<td><button type="button" data-for="m2">erhöhen</button></td>
<td>0</td>
<td>25</td>
<td></td>
<td>75</td>
<td>100</td>
</tr>
<tr>
<td><meter id="m3" value="10" min="0" low="25" optimum="50" high="75" max="100"></meter></td>
<td id="val-m3">10</td>
<td><button type="button" data-for="m3">erhöhen</button></td>
<td>0</td>
<td>25</td>
<td>50</td>
<td>75</td>
<td>100</td>
</tr>
<tr>
<td><meter id="m4" value="10" min="0" low="25" optimum="75" high="50" max="100"></meter></td>
<td id="val-m4">10</td>
<td><button type="button" data-for="m4">erhöhen</button></td>
<td>0</td>
<td>25</td>
<td>75</td>
<td>50</td>
<td>100</td>
</tr>
<tr>
<td><meter id="m5" value="10" min="0" low="50" optimum="25" high="75" max="100"></meter></td>
<td id="val-m5">10</td>
<td><button type="button" data-for="m5">erhöhen</button></td>
<td>0</td>
<td>50</td>
<td>25</td>
<td>75</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>
