如何使用JavaScript在页面加载时设置值？

Question

当页面加载时，我需要动态设置文本值。 代码是...

$(document).ready(function() {
    //Function call
    setname();
});

function setname() {
  document.getElementById('loginname').value = localStorage.getItem("username");
}

<span class="text-muted text-xs block" id="loginname"></span> 

我从本地会话中获取了值，但为什么它们没有设置在我的loginname字段上呢？我不知道原因，请帮忙解决。

- piyush

---

你能否包含你的表单？为什么这被标记为PHP？ - Epodax

你所展示的代码似乎没有明显的问题。loginname元素是否在页面加载时存在于DOM中？username值是否已经被设置在localStorage中了？ - Rory McCrossan

<span class="text-muted text-xs block" id="loginname"> </span> - piyush

@piyush 在 setname() 中加入这个语句 alert(localStorage.getItem("username")); 看看你得到了什么。 - ozil

document.getElementById('loginname').innerHTML= localStorage.getItem("username"); 将localStorage中存储的"username"获取并赋值给id为"loginname"的元素。 - Alive to die - Anant

我会尽快尝试并更新您。 - piyush

Answer 1

span元素没有value属性 - 您需要设置innerText：

function setname() {
    document.getElementById('loginname').innerText = localStorage.getItem("username");
}

或者，您可以仅使用jQuery：

$(function() {
    $('#loginname').text(localStorage.getItem('username'));
});

- Rory McCrossan

---

感谢Rory McCrossan。 - piyush

@piyush 没问题，很高兴能帮助。 - Rory McCrossan

Answer 2

尝试使用jquery运算符来设置值：

编辑：显然span没有val属性，而是需要设置text属性，在解决方案中进行了编辑

$(document).ready(function() {
    //Function call
    setname();
});

function setname() {
    $('#loginname').text(localStorage.getItem("username"));
}

- Jeremy C.

---

你们能否给我一些反馈，告诉我为什么你们要踩这个帖子？我是按照我的方法来做的，难道有什么不对的地方吗？ - Jeremy C.

它被downvote了，因为val()方法是用于具有value属性的元素上的，而span没有该属性。 - Rory McCrossan

我投反对票的原因是，正如其他答案中所述，span元素没有值，应该使用innerText代替。其次，OP使用的代码并没有错，因此改用jQuery也无法解决问题。 - Epodax

当我写这个答案时，还没有其他答案，我不知道 span 没有 val，但现在已经被编辑了 :D - Jeremy C.

Answer 3

由于它是 span 元素，因此您无法为其设置 value 属性。您需要设置 innerText：

function setname() {
    document.getElementById('loginname').innerText = localStorage.getItem("username");
}

你也可以通过 innerHTML 来实现，像这样：

function setname() {
    document.getElementById('loginname').innerHTML = localStorage.getItem("username");
}

- Anant - Alive to die