Function mit Select auswählen?

~Laba~ · 07/18/2019, 20:24

Hallo,

ich bin gerade dabei JS, xHtml etc. zu lernen.
Habe eine Function geschrieben die mir per Button eine Tabelle ausspuckt. Die klappt auch wunderbar.

Wollte das jetzt weiterführen. Und eine weitere Function schreiben die mir eine andere Tabelle ausgibt.

Diese wollte ich dann im Body bereich mit select/option auswählen und per Button bestätigen damit er die jeweilige Tabelle anzeigt.

Spoiler

So sieht mein script aus (die zweite function ist noch nicht geschrieben, kommt aber noch). Wie baue ich jetzt mein select/option ein. Habe vieles probiert kam aber leider nie zum Ergebnis.

krankheit · 07/19/2019, 18:07

Wieso xhtml ?
Naja meinst du sowas ?

Spoiler

Quote:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Seitentitel</title>
</head>
<body>
<div>
<input type="button" value="Klick" onclick="BIP()" />
</div>
<input onclick="selectBox(1)" id="cb1" type="checkbox" />
<input onclick="selectBox(2)" id="cb2" type="checkbox" />
<div id="tab1"></div>
<script>
var i;

var ausgabe;
var ausgabe2;

var Laender = [
'Baden-WÃ¼rttemberg',
'Bayern',
'Hessen',
'Niedersachsen',
'NRW',
'Rheinland-Pflaz',
'Saarland',
'Schleswig-Holstein',
'Brandenburg',
'Mecklbg.-Vorp.',
'Sachsen',
'Sachsen Anhalt',
'ThÃ¼ringen',
'Berlin',
'Bremen',
'Hamburg'
];

var Zahlen = [
'28305',
'23112',
'21356',
'73192',
'23799',
'21387',
'2163',
'8797897',
'789789',
'1244636',
'153251',
'123124',
'0',
'423543',
'455435',
'231313'
];

ausgabe =
"<table border='1' style ='border:2px solid;'><tr><th> LÃ¤nder </th>" +
'<th> Brutto-Inlandsprodukt</th></tr>';

i = 0;

do {
ausgabe += `<tr> <td> ${Laender[i]} </td> <td> ${Zahlen[i]}</td> </tr>`;
i = i + 1;
} while (i < Laender.length);

ausgabe += '</table>';
ausgabe2 = `
<table>
<tr>
<td>Hallo</td>
<td>Mimimi</td>
</tr>
<tr>
<td>GG</td>
<td>BLA</td>
</tr>
</table>
`;
function BIP() {
document.getElementById('tab1').innerHTML =
document.getElementById('cb1').checked ? ausgabe : ausgabe2;
}
function selectBox(value) {
if (value == 1) document.getElementById('cb2').checked = false;
else document.getElementById('cb1').checked = false;
}
</script>
</body>
</html>