javascript - JavaScript でテキストボックスの値に書き込めません

Question

編集みんなありがとう！

ページに Cookie があり、ページが読み込まれるときに、Cookie の値をデフォルト値として入力ボックスに入れたいと考えています。

しかし、それはうまくいかず、問題を見つけることができません。私もテスト div を作成し、それを変更しようとしましたが、うまくいきません。

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

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

ここにhtmlがあります

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

このコードも試しました（tester2というdivを作成しました

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

動作しません

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

動作しません

何も機能しません。この関数内の要素を変更することはできません。コード (つまり、document.etcetc.innerHTML = "hi") を別の関数に入れようとすると、完全に機能しますが、上記のようには実行されません。それは私を夢中にさせます。

何か案は？

score 1 · Accepted Answer

最初のステップはcheckCookie、あなたが望むものを正確に返すことを確認することです。空の場合、テキストエリアに空の値が設定されるため、何もしなかった場合と同じ効果があることは明らかです。

cookie正しい形式の値が含まれていると仮定すると、この行で問題ないはずです。

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

score 0 · Accepted Answer

関数が実行されるときcheckCookie、DOM はまだ準備ができておらず、入力が存在しないのではないかと思います。

そうでないことを確認するには、次のことを試してください。

 window.onload = checkCookie;

これによりcheckCookie、ウィンドウのコンテンツが読み込まれたときにのみ関数が実行されます。これは最も効率的な方法ではありませんが、使用しているブラウザーがわからないため、最も信頼できるテスト方法でした。

編集:コードを確認した後、問題は次の行です:

window.onload = checkCookie();

これにより、checkCookie関数がすぐに実行され、関数の結果がに代入されwindow.onloadます。

前の例をチェックして、どのように行うべきかを確認してください。

score 0 · Accepted Answer

;JSでは、すべてのステートメントがセミコロンで終わると思います

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

;最後に追加すればいいと思う

score 0 · Accepted Answer

ここに例があります

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

jsfiddleについて

したがって、コメントに基づいて、アクセスしようとする前に DOM がロードされるまで待っていなかった可能性があります。

これを行う方法の例を次に示します。

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

jsfiddleについて

見る：

window.onload