Tengo este código que obtiene una imagen de la API de Minecraft a través de uuid o nombre de usuario. Obtiene el valor de una etiqueta de entrada.
HTML:
<input type="text" id="nameinput" placeholder="Username"/> <img src="" id="display"/> <script type="text/javascript" src="/JS/login-page.js"></script>js:
document.querySelector("#nameinput").oninput = function(){ var request = new XMLHttpRequest(); request.onload = function() { // Grab data and assing feilds var response = JSON.parse(request.responseText); var uuid = response.id; if (typeof(uuid) == "undefined") { response.id = "steve"; } document.querySelector("#display").src = "https://crafatar.com/avatars/" + uuid + "?overlay&size=512"; }; request.open("GET", "https://api.year4000.net/minecraft/" + document.querySelector("#nameinput").value, true); request.send(); }Básicamente, quiero mover la imagen de la API para mostrarla en la etiqueta de la imagen. ¿Cómo hago esto?
Recomiendo usar addEventListener en lugar de configurar el atributo oninput .
const nameInput = document.querySelector("#nameinput"); const img = document.querySelector("#display"); nameInput.addEventListener('input', function () { // Don't do anything if the value is empty if (this.value === '') return; const request = new XMLHttpRequest(); request.onload = function () { const response = JSON.parse(request.responseText); const { id } = response; img.setAttribute('src', `https://crafatar.com/avatars/${id}?overlay&size=512`); }; request.open("GET", "https://api.year4000.net/minecraft/" + this.value, true); request.send(); }); <input type="text" id="nameinput" placeholder="test123" /><br> <img id="display" src="" />