将输入URL提取到img scr

Question

i am trying to get the URL from the input field to the SRC of img tag.

<input id="load"> // here we type the URL of image
<input type="submit">
  <img id="my-image" onclick="doit()" src='' />

Answer 1

 function doit() { // get the value of the input const {value} = document.getElementById('load'); // set the src on the img document.getElementById('my-image').src = value; } 

 img { display: block; } input { min-width: 200px; } 

 <input id="load" value="http://placekitten.com/200" /> <button onClick="doit()">go</button> <img id="my-image" src="" /> 

Answer 2

Move your function up to the submit button rather than the image.

 function doit(){ // grab the url from the input var url = document.getElementById("load").value; // load the image from the input url document.getElementById("my-image").src = url; } 

 <input id="load"> // here we type the URL of image <input type="submit" onclick="doit()"> <img id="my-image" src='' />