How to set value on page load using javascript?

Question

I have to set dynamically text value when page was load. The code is..

$(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>

I get value from my local session but why they are not set on my loginname field? I don't know why, please help me.

Could you perhaps include your form? - And why is this tagged as PHP? — Epodax
– Epodax, Commented Jun 1, 2015 at 8:02
There's nothing obviously wrong with the code you've shown. Does the loginname element exist in the DOM on load? Is the username value set in localStorage? — Rory McCrossan
– Rory McCrossan, Commented Jun 1, 2015 at 8:02
<span class="text-muted text-xs block" id="loginname"> </span> — piyush
– piyush, Commented Jun 1, 2015 at 8:02
@piyush put this statement alert(localStorage.getItem("username")); in setname() see what you get. — ozil
– ozil, Commented Jun 1, 2015 at 8:03
document.getElementById('loginname').innerHTML= localStorage.getItem("username"); — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Jun 1, 2015 at 8:03

Rory McCrossan · Accepted Answer · 2015-06-01 08:03:33Z

6

span elements do not have a value property - you need to set innerText:

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

Alternatively, you can use jQuery exclusively:

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

answered Jun 1, 2015 at 8:03

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

piyush Over a year ago

Thanks Rory McCrossan

Jeremy C. · Accepted Answer · 2015-06-01 08:07:23Z

4

Try using the jquery operators to set the value:

EDIT: appearantly span doesn't have the val attribute instead you need to set the text attribute, edited in solution

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

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

edited Jun 1, 2015 at 8:07

answered Jun 1, 2015 at 8:03

Jeremy C.

2,4651 gold badge14 silver badges28 bronze badges

4 Comments

Jeremy C. Over a year ago

could you guys please give me feedback as to why you downvote this? this is how I do it so is there something wrong with it?

Rory McCrossan Over a year ago

It's been downvoted because the val() method is for use on elements which have a value property, which span do not.

Epodax Over a year ago

The reason I down voted was/is because as stated in the other answers, spans doesn't have a value and should use innterText instead, secondly, the code OP used wasn't wrong as such, so changeing to jQuery wouldn't have solved the issue.

Jeremy C. Over a year ago

When I was writing this answer there were no other answers and I didn't know about spans not having val but it's been edited now :D

Death-is-the-real-truth · Accepted Answer · 2017-01-31 08:05:19Z

4

Since it is span elements so you can not have value property for it.you need to set innerText:

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

You can do it through innerHTML also like this:-

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

edited Jan 31, 2017 at 8:05

answered Jun 1, 2015 at 8:05

Death-is-the-real-truth

72.3k10 gold badges59 silver badges106 bronze badges

Collectives™ on Stack Overflow

How to set value on page load using javascript?

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related