Javascript Image Source Changer

Question

我试图做一个简单的页面，让我输入一个名字和一张照片弹出想通过JavaScript将完成，但我是一个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是目前，但我不能得到一个图像加载和不知道什么即时通讯做错了大声笑这是黑客一个斜杠代码我拼凑起来谷歌搜索

任何帮助都将不胜感激！

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>