50 lines
1.6 KiB
HTML
50 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Farbenlehre</title>
|
|
</head>
|
|
<body>
|
|
<label for="rot">Rot: </label>
|
|
<input id="rot" name="rot" type="number">
|
|
</br>
|
|
<label for="gruen">Grün: </label>
|
|
<input id="gruen" name="gruen" type="number">
|
|
</br>
|
|
<label for="blau">Blau: </label>
|
|
<input id="blau" name="blue" type="number">
|
|
</br>
|
|
<button id="calcbutton">Berechnen</button>
|
|
</br>
|
|
|
|
<table id="farben"></table>
|
|
|
|
<script>
|
|
let btn = document.getElementById("calcbutton");
|
|
let rot = document.getElementById("rot");
|
|
let gruen = document.getElementById("gruen");
|
|
let blau = document.getElementById("blau");
|
|
|
|
btn.addEventListener("click", updateTable);
|
|
|
|
function updateTable() {
|
|
let table = document.getElementById("farben");
|
|
let row = table.insertRow(0);
|
|
let cell1 = row.insertCell(0);
|
|
let cell2 = row.insertCell(1);
|
|
let cell3 = row.insertCell(2);
|
|
let cell4 = row.insertCell(3);
|
|
|
|
let r = rot.value;
|
|
let g = gruen.value;
|
|
let b = blau.value;
|
|
|
|
cell1.innerHTML = r;
|
|
cell2.innerHTML = g;
|
|
cell3.innerHTML = b;
|
|
cell4.innerHTML = "farbwert";
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|