Как изменять содержимое блока при вводе текста в input?

Question

[Евгений Шевцов]

Есть ссылка на изображение, которое генерируется на сервисе и выглядит она вот так
https://crafatar.com/renders/body/RattleSneyk
Как мне во первых отобразить эту картинку, а во вторых как мне сделать так, чтобы при вводе текста в input последняя часть url менялась и соответственно менялась картинка. ?

Answer 1

[Денис Инешин]

Как то так:

var $input = $(".input"),
    $img = $(".img");

$input.on("change", function () {
    var val = $(this).prop("value"),
        src = $img.prop("src"),
        temp = src.split("/");

    temp[temp.length - 1] = val;
    $img.prop("src", temp.join("/"));
});

Comments

[Евгений Шевцов]

чет не совсем понимаю как это применить.

[Евгений Шевцов]

Виноват.
Понял как-)) )
Но вот меняется только когда закончил вводить, а как сделать, чтобы менялась во время ввода
?

[Денис Инешин]

Евгений Шевцов: замените change на keyup

[Иван Соломенников]

Евгений Шевцов: Событие input например послушать или keyup, вместо change.