HTML - OnChange обновляет URL источника изображения из поля ввода

Question

Хорошо, я работаю над своим финалом для класса дизайна веб-страниц. Мы можем использовать ТОЛЬКО HTML, CSS и JAVASCRIPT. Никакого AJAX или чего-либо еще.

Мне нужна небольшая помощь.

У меня есть текстовое поле. Я хочу, чтобы пользователь мог вставить в него URL-адрес (изображения), и он автоматически обновит изображение на странице до URL-адреса, который он вставил.

Возможно ли это?

Могу ли я использовать OnChange в текстовом поле для обновления URL моего изображения? Что я вкладываю в каждый?

Вот мое текстовое поле

<input id="usrimg" onChange="??(What do I put here)??" type="text"/>

и вот источник изображения, который я хочу изменить OnChange при вводе текста

        imageObj.src = "??What goes here??";

Answer 1

Я знаю, что это поздний ответ, но, ты пробовал что-то подобное? Я знаю, что это не лучшее решение, но это что-то ...

<script language="JavaScript" type="text/javascript">
function show_prompt() {
var image_url = prompt("Please enter an image url","http://hasselt-graphix.be/images/HGX.png");
  document.write("<!-- The rest of your html page --><img src=\"" + image_url +   "\" width=\"400px\"><!-- The rest of your html page-->"); 
}
</script>

<form>
  <input type="button" value="Change picture" onclick="show_prompt();" />
</form>

Надеюсь, это поможет

Answer 2

 <script language="JavaScript" type="text/javascript">
    function changeUrl(el) {
    var el = document.getElementById('inputid').value;
    var im = document.getElementsByTagName(img);
    im.src = el;
    }
    </script>


<input type="text" id="inputid" value="" onBlur="changeUrl(this.value)"/>