getElementById() не возвращает правильную строку

Question

Я пытаюсь захватить текст из текстового поля, и он возвращает что-то, но ничего не возвращает, нет строки. Когда я ввожу строку в текстовое поле и нажимаю кнопку, он все равно ничего не возвращает ,

var name; 
name = document.getElementById('username').value; 

function action() { 
document.getElementById("theIMG").src = "https://crafatar.com/avatars/" + name; 
console.log("Working"); 
} 

HTML:

<textarea rows="4" cols="50" id="username" placeholder="Enter your username here!"></textarea> <br /> 
     <button id="submit" onClick="action()">Submit</button> 
     <br /> 
     <img id="theIMG"></img> 

Answer 1

Вы должны вызвать getElementById внутри метода action - что value не будет сохраняться по мере изменения TextBox:

function action() { 
    var name = document.getElementById('username').value; 
    document.getElementById("theIMG").src = "https://crafatar.com/avatars/" + name; 
    console.log("Working"); 
} 

Answer 2

Во время выполнения кода, значение "" только. И это не изменится, независимо от того, вы измените значение в html, поскольку вы не обновляете его в своем скрипте. Следовательно, вам нужно обновить свой код к следующему

function action() { 
    var name = document.getElementById('username').value; 
    document.getElementById("theIMG").src = "https://crafatar.com/avatars/" + name; 
    console.log("Working"); 
} 

Answer 3

Вы должны определить имя сама функция, как это:

var name; 


function action() { 
name = document.getElementById('username').value; 
document.getElementById("theIMG").src = "https://crafatar.com/avatars/" + name; 
console.log("Working"); 
}