Javascript Image Source Changer

Question

私は名前を入力することができ、写真をポップアップ表示する簡単なページを作ろうとしていますが、私はjavascriptの初心者であり、助けが必要です（ここに私のコードです：

<img id="myImg" 
src="https:placeholderlink" 
width='500' 
alt='Not Loaded' onmouseOver="this.width=550" onmouseOut="this.width=500" /> 
CBName: <input type="text" id="CBName" name="CBNameBox"> 
<button onclick="myFunction()">Submit</button> 

<script> 
function CBNameChanger() { 
var Source = document.getElementById("CBName").value; 
var itemName; 
{ 
    document.write(itemName); 
} 
function myFunction() { 
document.getElementById("myImg").src = "https:placeholderlink" + itemName ; 
} 
} 
</script> 

あなたは私が私の入力を取り、私はあなたがIMGのときに動作も上にマウスを置くと私のイメージを拡大するためにしようとしていたのimg URL の最後に追加コーディングする必要が見るように私はカントをロードするにはイメージを取得し、何が間違っているのかわからない笑これはスラッシュコードをハックです私は一緒にGoogle検索からつながった

どんな援助も感謝するでしょう！

Answer 1

あなたはほとんどそれを持っているだけで、両方の機能を結合し、中括弧の間に奇妙なdocument.writeを削除する必要があります。

function CBNameChanger() { 
 
    var Source = document.getElementById("CBName").value; 
 
    document.getElementById("myImg").src = "http://lorempixel.com/" + Source; 
 
}

#myImg { 
 
    width: 50px; 
 
    height: 50px; 
 
}

<img id="myImg" src="http://lorempixel.com/" width='500' alt="Not Loaded" onmouseOver="this.width=550" onmouseOut="this.width=500" /> 
 
<br> CBName: <input type="text" id="CBName" name="CBNameBox" value="50/50/"> 
 
<button onclick="CBNameChanger()">Submit</button>