テキストボックスの入力を使用してiframe URLの一部を変更するにはどうすればよいですか？

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
    body{ 
     background-color:#ffffff 
    } 
    </style> 
    </head> 
    <body> 
<!-- im attempting to make an iframe display a video the user types into 
the prompt.--> 
<input id="txtUrl" style="width:82%;" placeholder="youtube.com/watch?v=(finish the url)" name="url" type="text" /> 

<iframe src="www.youtube-nocookie.com/embed/(I WANT THE USERS INPUT 
HERE)" allowfullscreen></iframe> 
    </body> 
</html>

私はこれを遠くに持っていて、私の心は空白になります。私は可能な解決策を考えるたびに、それはちょうど私の心を去り、私は混乱に戻ります。これはおそらく本当に簡単に修正することができ、私はばかだが、どんな助けもありがたい。テキストボックスの入力を使用してiframe URLの一部を変更するにはどうすればよいですか？

出典

2017-11-29 Useless

iframeのsrc属性を設定します。 keyupイベントでそれを試してみてください。変更をすぐに見ることができます。

私はコードをテストしていませんが、あなたが望むものを達成するための基本的な考え方を得る必要があります。

出典

2017-11-29 23:54:05 entio

入力の値を取得し、この値をiframeのsrc属性（既存の値に追加）に追加するだけです。

function changeSrc() { 
 
    const elem = document.getElementsByTagName("iframe")[0]; 
 
    const inputVal = document.getElementById("txtUrl").value; 
 
    elem.src += inputVal 
 
    console.log(elem); 
 
}

<input id="txtUrl" style="width:82%;" placeholder="youtube.com/watch?v=(finish the url)" name="url" type="text" /> 
 
<button onclick="changeSrc()">Change src</button> 
 
<iframe src="www.youtube-nocookie.com/embed/" allowfullscreen></iframe>

出典

2017-11-29 23:55:52

私はJavaScriptを置く： - （お気軽に何が明確でない場合）ここで解決策はありますか？私はの冒頭に

テキストボックスの入力を使用してiframe URLの一部を変更するにはどうすればよいですか？

答えて

関連する問題