Jump to content
Please Use CODE Tags

Changing Iframe elements with javascript.

Bob van Daal
 Share
Posted

Hello,

 

I am making a website that allows you to watch different Twitch chats at the same time by using the Twitch chat iframe which, at the moment I am trying to alter iframe elements using Javascript but I cant get it to work. 

<html>
<head>
<title>Dual Twitch chat overview</title>
<link rel="stylesheet" type="text/css" href="clean.css">
</head>
<body>

<div id="navbar">
<ul>
  <li style="float:left"><a href="xo.html">Home</a></li>
  <li><a href="dualchat.html">Dual Chat</a></li>
  <li><a href="vierchat.html">Quadrupple chat</a></li>
  <li><a href="achtchat.html">Dual Quadrupple chat</a></li>
  <li><a href="prayforfns.html">#PrayforFNS</a></li>
  <li style="float:right"><a href="twitch.com">About</a></li>
</ul>
</div>

<button id="clickMe">Choose</button>
<button id="clickMe2">Choose</button>
<script>
document.getElementById("clickMe").onclick = functie1;
function functie1() {
var x = prompt("Which chat do you want to see?", "Shroud");
window.alert( x );
document.getElementById("lirik").src = x;
document.getElementById("lirik").id = x;
}
document.getElementById("clickMe2").onclick = functie2;
function functie2() {
var y = prompt("Which chat do you want to see?", "Shroud");
window.alert( y );
document.getElementById("shroud").src = y;
document.getElementById("shroud").id = y;
}
</script>

<div id="chatlinks">
<iframe frameborder="0px"
        scrolling="yes"
        id="lirik"
        src="https://www.twitch.tv/lirik/chat?popout=" id="source"
        height="100%"
        width="100%">
</iframe>
</div>

<div id="chatrechts">
<iframe frameborder="0px"
        scrolling="yes"
        id="shroud" 
        src="https://www.twitch.tv/shroud/chat?popout=" id="source"
        height="100%"
        width="100%">
</iframe>
</div>
</body>
</html>

I get the prompt and afterwards the popup with the variable but the iframes stay the same.

Could anyone tell me what's wrong with the code?

 

Thank you in advance!

 

Bobster345589

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Sorry for the late response, I know very little about html syntax, but I got it to work I think. 

<html>
<head>
<title>Dual Twitch chat overview</title>
<link rel="stylesheet" type="text/css" href="clean.css">
</head>
<body>

<div id="navbar">
<ul>
  <li style="float:left"><a href="xo.html">Home</a></li>
  <li><a href="dualchat.html">Dual Chat</a></li>
  <li><a href="vierchat.html">Quadrupple chat</a></li>
  <li><a href="achtchat.html">Dual Quadrupple chat</a></li>
  <li><a href="prayforfns.html">#PrayforFNS</a></li>
  <li style="float:right"><a href="twitch.com">About</a></li>
</ul>
</div>

<button id="clickMe">Choose</button>
<button id="clickMe2">Choose</button>
<script>
document.getElementById("clickMe").onclick = functie1;
function functie1() {
var x = prompt("Which chat do you want to see?", "Shroud");
window.alert( x );
document.getElementById("lirik").src = "https://www.twitch.tv/shroud/chat?popout=";
document.getElementById("lirik").id = "shroud";
}
document.getElementById("clickMe2").onclick = functie2;
function functie2() {
var y = prompt("Which chat do you want to see?", "Shroud");
window.alert( y );
document.getElementById("shroud").src = "https://www.twitch.tv/lirik/chat?popout=";
document.getElementById("shroud").id = "lirik";
}
</script>

<div id="chatlinks">
<iframe frameborder="0px"
        scrolling="yes"
        id="lirik"
        src="https://www.twitch.tv/lirik/chat?popout=" id="source"
        height="100%"
        width="100%">
</iframe>

there are still some problems with it that I have no idea how to fix but it works usually

CPU: Ryzen 1700@3.9ghz; GPU: EVGA 560 Ti 1gb; RAM: 16gb 2x8 Corsair Vengeance LPX DDR4-3000; PCPP: https://pcpartpicker.com/list/b3xzzM

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
6 hours ago, Thermosman said:

Sorry for the late response, I know very little about html syntax, but I got it to work I think. 


<html>
<head>
<title>Dual Twitch chat overview</title>
<link rel="stylesheet" type="text/css" href="clean.css">
</head>
<body>

<div id="navbar">
<ul>
  <li style="float:left"><a href="xo.html">Home</a></li>
  <li><a href="dualchat.html">Dual Chat</a></li>
  <li><a href="vierchat.html">Quadrupple chat</a></li>
  <li><a href="achtchat.html">Dual Quadrupple chat</a></li>
  <li><a href="prayforfns.html">#PrayforFNS</a></li>
  <li style="float:right"><a href="twitch.com">About</a></li>
</ul>
</div>

<button id="clickMe">Choose</button>
<button id="clickMe2">Choose</button>
<script>
document.getElementById("clickMe").onclick = functie1;
function functie1() {
var x = prompt("Which chat do you want to see?", "Shroud");
window.alert( x );
document.getElementById("lirik").src = "https://www.twitch.tv/shroud/chat?popout=";
document.getElementById("lirik").id = "shroud";
}
document.getElementById("clickMe2").onclick = functie2;
function functie2() {
var y = prompt("Which chat do you want to see?", "Shroud");
window.alert( y );
document.getElementById("shroud").src = "https://www.twitch.tv/lirik/chat?popout=";
document.getElementById("shroud").id = "lirik";
}
</script>

<div id="chatlinks">
<iframe frameborder="0px"
        scrolling="yes"
        id="lirik"
        src="https://www.twitch.tv/lirik/chat?popout=" id="source"
        height="100%"
        width="100%">
</iframe>

there are still some problems with it that I have no idea how to fix but it works usually

Thank you for your response!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
3 hours ago, Bob van Daal said:

Thank you for your response!

Its missing </div> </body> and </html> at the bottom btw

CPU: Ryzen 1700@3.9ghz; GPU: EVGA 560 Ti 1gb; RAM: 16gb 2x8 Corsair Vengeance LPX DDR4-3000; PCPP: https://pcpartpicker.com/list/b3xzzM

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

You would be much better off embedding twitch.

 

https://dev.twitch.tv/docs/embed

 

Then use JavaScript yo change the stream. Iframes  are so 95. 

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×