javaScript will not let me write to a textbox value

Question

EDIT thanks to everyone!

I have a cookie on a page and when the page loads I want to put the value from the cookie into a input box as its defualt value.

However it will not work and I cant find the problem. I even made a test div and tried to change that but it wont work.

function checkCookie() {
    var cookieName = getCookie("username");

    if (cookieName != null && cookieName != "") {
        alert(cookieName);
        document.getElementById("fname").value = cookieName
    } else {
        alert("else");
        return;
    }
}

Here is the html

<input type="text" name="fname" id="fname" onKeyUp="isName(this.value)">

I tried this code as well (I just made a div called tester2

document.getElementById("fname").value = "hello" 

doesnt work

document.getElementById("tester2").innerHTML = cookieName

doesnt work

Nothing works. It will not let me change a element within this function. If I try and put the code (ie document.etcetc.innerHTML = "hi") in another function then it works perfectly... however it will not run as shown above. Its driving me crazy.

Any ideas?

Answer 1

I suspect that when the checkCookie function executes, the DOM is not ready yet and your input doesn't exist.

To make sure it's not the case, try the following:

 window.onload = checkCookie;

This will execute the checkCookie function only when the window content has been loaded. It is not the most efficient way to do it, but since I don't know which browser you are using, it was the most reliable way to test.

EDIT: After taking a look at your code, the problem is this line:

window.onload = checkCookie();

That will execute the checkCookie function right away and try to assign the function's result to window.onload.

Check in my previous example to see how it should be done.

Answer 2

First step should be to make sure that checkCookie returns exactly what you want. If it's empty, it will obviously have the same effect as if it didn't do anything because it will put an empty value in the textarea.

You should be fine with this line, assuming that cookie contains the correctly formatted value:

document.getElementById("fname").value = cookie;

Answer 3

I think in JS, every statement ends with the ; semi colon

document.getElementById("fname").value = cookieName

I think you should add ; at the end

Answer 4

Here is an example

HTML

<input type="text" name="fname" id="fname">

Javascript

function getCookie(something) {
    var cookies = {
        "username": "John Smith"
    }

    return cookies[something];
}

function checkCookie() {
    var cookieName = getCookie("username");

    if (cookieName != null && cookieName != "") {
        alert(cookieName);
        this.value = cookieName;
    } else {
        alert("else");
    }
}

var fname = document.getElementById("fname");

fname.addEventListener("keyup", checkCookie, false);

On jsfiddle

So based on your comments it maybe that you have not waited until the DOM has loaded before trying to access it.

Here is an example of how to do that.

window.addEventListener("load", function onLoad() {
    this.removeEventListener("load", onLoad);

    function getCookie(something) {
        var cookies = {
            "username": "John Smith"
        }

        return cookies[something];
    }

    function checkCookie() {
        var cookieName = getCookie("username");

        if (cookieName != null && cookieName != "") {
            alert(cookieName);
            this.value = cookieName;
        } else {
            alert("else");
        }
    }

    var fname = document.getElementById("fname");

    fname.addEventListener("keyup", checkCookie, false);
}, false);

On jsfiddle

See:

window.onload

Notes

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

EventTarget.addEventListener

Summary

addEventListener() registers a single event listener on a single target. The event target may be a single element in a document, the document itself, a window, or an XMLHttpRequest.

Why is using onClick() in HTML a bad practice?

Unobtrusive JavaScript