Вывод аватарки при вводе логина

Question

задался таким вопросом

В index.html у меня есть блок с формами ввода и пароля, выглядит он вот так:

Что я хочу сделать: Хочу чтобы поле с вводом логина постоянно слушалось и подставляла то, что находится в поле - в ссылку, а картинку сразу же выводило если по адресу имеется картинка.

Код:

<form>
  <label>Логин</label>
  <input type="text" name="login" placeholder="Введите свой логин"> /// Хочу, чтобы это поле всегда прослушивалось даже без нажатия кнопки "Войти", а то что будет введено сразу выводило в переменную PHP, например.
  <label>Пароль</label>
  <input type="password" name="password" placeholder="Введите пароль">
  <button type="submit" class="login-btn">Войти</button>
  <p>
    Не получается войти? - <a href="#" target="_blank">зарегистрируйтесь на сервере</a>!
  </p>
  <p class="msg none">Важно. Вводить нужно логин и пароль от аккаунта на сервере</p>
</form>
<footer>
  <img class="avatarkaauth" src="https://minotar.net/avatar/$inputlogin" alt="Картинка">
</footer>

Первый раз задаю вопросы на подобных форумах, так что если что-то плохо описал или объяснил, не судите строго пожалуйста :)

Answer 1

<form>
    <label>Логин</label>
    <input type="text" name="login" placeholder="Введите свой логин" oninput="loginChanged(this)">
    <label>Пароль</label>
    <input type="password" name="password" placeholder="Введите пароль">
    <button type="submit" class="login-btn">Войти</button>
    <p>
        Не получается войти? - <a href="#" target="_blank">зарегистрируйтесь на сервере</a>!
    </p>
    <p class="msg none">Важно. Вводить нужно логин и пароль от аккаунта на сервере</p>
</form>

<footer>
    <img id="avatar" class="avatarkaauth" src="https://minotar.net/avatar/default.png" alt="Картинка">
</footer>

<script>
    function loginChanged(e)
    {
        var avatar = document.getElementById("avatar");
        avatar.src = "https://minotar.net/avatar/" + e.value;
    }
</script>

Но я бы так не делал. Лучше передавать данные скрипту на сервере, который будет возвращать изображение.

Answer 2

Изначально вставил no-avatar.png как заглушку, которую заменит реальный аватар, если при вводе логина в поле name="login", домен аватара отдаст ответ 200. Если аватар отдаст ответ 404, img тег снова начнет выводит дефолтный no-avatar.png.

let form = document.querySelector('#form');
let inputName = form.querySelector('[name="login"]');

let avatarAuth = document.querySelector('#avatar-auth');
let defaultAvatar = avatarAuth.src;
let xhr = new XMLHttpRequest();

inputName.addEventListener('input', (ev) => {
  xhr.open('GET', `https://minotar.net/avatar/${ev.target.value}.png`);
  xhr.send();
  xhr.onload = function() {
    if (this.status == 200) {
      avatarAuth.src = this.responseURL;
    } else {
      avatarAuth.src = defaultAvatar;
    }
  };
});

<form id="form">
  <label>Логин</label>
  <input type="text" name="login" placeholder="Введите свой логин">
  <label>Пароль</label>
  <input type="password" name="password" placeholder="Введите пароль">
  <button type="submit" class="login-btn">Войти</button>
  <p>
    Не получается войти? - <a href="#" target="_blank">зарегистрируйтесь на сервере</a>!
  </p>
  <p class="msg none">Важно. Вводить нужно логин и пароль от аккаунта на сервере</p>
</form>
<footer>
  <img id="avatar-auth" class="avatarkaauth" src="https://crowd-literature.eu/wp-content/uploads/2015/01/no-avatar.gif" alt="Картинка">
</footer>

БЛОГ НА HUSL

Вывод аватарки при вводе логина

Ответы (2 шт):