getElementById() 没有返回正确的字符串

Question

我试图从文本区域中获取文本，但它 returns 什么都没有，没有字符串。当我在文本区域中输入一个字符串并单击按钮时，它还是returns什么都没有。

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

在执行您的代码时，值仅为“”。而且，无论您更改 html 中的值，它都不会更改，因为您没有在脚本中更新它。因此，您需要将代码更新为以下

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

Answer 2

您应该在 action 方法中调用 getElementById - value 不会随着文本框的更改而持续存在：

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");
}

getElementById() 没有返回正确的字符串

getElementById() not returning correct string

javascript

textarea

getelementbyid