Fernseher HTML

von **W3isserWolf** Mo Feb 05, 2018 11:10 am

index.html

Code:: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Fernseher</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1> Fernseher </h1> <div id="button1"> ARD </div> <div id="button2"> ZDF </div> <div id="button3"> WDR </div> <br/> <iframe id="Fenster" src="http://www.daserste.de/live/index.html"></iframe> <script src="myscript.js"></script> </body> </html>

myscript.js

Code:: document.addEventListener('DOMContentLoaded', init); function init() { document.getElementById('button1').addEventListener('click', ARD); document.getElementById('button2').addEventListener('click', ZDF); document.getElementById('button3').addEventListener('click', WDR); } function ARD(event) { document.getElementById("Fenster").src = "http://www.daserste.de/live/index.html"; } function ZDF(event) { document.getElementById("Fenster").src = "https://www.zdf.de/live-tv"; } function WDR(event) { document.getElementById("Fenster").src = "https://www1.wdr.de/mediathek/video/live/index.html"; }

mystyle.css

Code:: h1 { color: blue; background-color: black; border-style: solid; border-radius: 10px; border-width: 2px; border-color: black; text-align: center; } body { background-color: lightblue; } #button1 { height: 70px; width: 200px; color: black; margin-left: 5%; margin-top: 15px; background-color: red; border-style: solid; border-radius: 10px; border-width: 2px; border-color: black; cursor: pointer; text-align: center; float: left; } #button2 { height: 70px; width: 200px; color: black; margin-top: 15px; background-color: red; border-style: solid; border-radius: 10px; border-width: 2px; border-color: black; cursor: pointer; text-align: center; margin-left: 5%; float: left; } #button3 { height: 70px; width: 200px; color: black; margin-top: 15px; background-color: red; border-style: solid; border-radius: 10px; border-width: 2px; border-color: black; cursor: pointer; text-align: center; margin-left: 5%; float: left; } #Fenster { color: green; height: 600px; width: 800px; margin-top: 100px; border-style: solid; border-radius: 10px; border-width: 2px; border-color: red; margin-left: 5%; }