'I want to create a input box that takes a url of a picture and when i click the button i need to dispaly the image in the same window using JavaScript

enter your url

click

function display()

{

var myimage=document.createElement("img"); myimage.src=document.getElementById("image"); document.body.appendChild(myimage); }

B/htm

javascripthtml


Solution 1:[1]

This is how you can show the image on the same window See the code below:

let submitForm = document.getElementById('submit')
submitForm.addEventListener('click', function(){
  let imageUrl = document.getElementById('getUrl').value;
  if (imageUrl) {
      document.getElementById('uploadedImage').setAttribute('src', imageUrl);
      document.getElementById('uploadedImage').style.display = 'block';
  }
});
<label>Enter Image Url:</label>
<input type='url' id='getUrl'>
<input type='submit' id='submit'/>

<img id="uploadedImage" src="#" alt="Uploaded Image" accept="image/png, image/jpeg" style="display:none;">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Suraj Sanwal

Related Questions