テキストフィールドからのユーザー入力に基づいてiframe URLを変更するにはどうすればよいですか？

Question

ユーザーがテキストフィールドに入力した内容に基づいて変更したいiframe URLがあります。だから私は持っている：

<iframe 
    src="http://player.twitch.tv/?channel={CHANNEL}" 
    height="720" 
    width="1280" 
    frameborder="0" 
    scrolling="no" 
    allowfullscreen="true"> 
</iframe> 

私が何をテキストフィールドにユーザーが入力してボタンを経由して提出すること{CHANNEL}を変更したいと思います。たとえば、ユーザーがテキストフィールドに「TestName」を入力すると、新しいiframe URLはsrc = "http://player.twitch.tv/?channel=TestName"になります

これを行う方法がわかりません。

Answer 1

これを試してください。入力が検証されていない/保護されていないことに注意してください。

function changeChannel(){ 
 
    document.getElementById("twitchFrame").src = "http://player.twitch.tv/?channel="+document.getElementById("channel").value; 
 
}

<input type="text" id="channel"></input> 
 
<button type="button" onClick="changeChannel();">Change Channel</button> 
 
<iframe 
 
    id="twitchFrame" 
 
    src="about:blank" 
 
    height="720" 
 
    width="1280" 
 
    frameborder="0" 
 
    scrolling="no" 
 
    allowfullscreen="true"> 
 
</iframe>