1

テキストボックスの値をローカルストレージに保存しようとしていますが、Uncaught TypeError: Cannot set property 'onclick' of null が発生し、正確な理由がわかりません。すべてが正しく参照されているようです。任意の洞察をいただければ幸いです。

<script type="text/javascript">
var save_button = document.getElementById('Save')
save_button.onclick = saveData;

function saveData()
{
    var input = document.getElementById("saveServer");
    localStorage.setItem("server", input.value);
    var storedValue = localStorage.getItem("server");
};
</script>    

<label for="serveri">Server:</label>
<input type='text' name="server" id="saveServer" />
<button onclick="saveData()" type="button" value="Save" id="Save">Save</button>

上記が私の問題を示していない場合は、JSFiddle の全体を以下に示します: http://jsfiddle.net/mGfeu/

4

4 に答える 4

1

コードはDOMの準備が整う前に実行されます（そのため、.getElementById要素が見つかりません）

コードを次のように変更します

// attach events for all browsers
var prefix = window.addEventListener ? "" : "on";
var eventName = window.addEventListener ? "addEventListener" : "attachEvent";
  document[eventName](prefix + "load", init, false);


function init() {
    var save_button = document.getElementById('Save');
    save_button.onclick = saveData;
}

function saveData() {
    var input = document.getElementById("saveServer");
    localStorage.setItem("server", input.value);
    var storedValue = localStorage.getItem("server");
    alert(storedValue);
}
于 2013-10-23T13:30:16.610 に答える
1

本文の後にスクリプトを記述します。スクリプトの実行時に DOM は読み込まれません。したがって、id 'Save' を持つ要素はありません。

于 2013-10-23T13:26:13.883 に答える
0

ページにレンダリングされる前に要素を探しています。

HTML マークアップと JavaScript パネルにスクリプト ブロックを含めたため、フィドルが台無しになりました。HTML マークアップの 1 つは、オンロードまたはドキュメントの準備ができていないため、エラーを発生させています。

于 2013-10-23T13:21:48.720 に答える
0

スクリプトを取り出して (本体から html を含める必要があるだけです)、それを js 領域にのみ配置すると、フィドルが機能します。これは、レンダリングに onload スクリプトを使用しているためです。

http://jsfiddle.net/spacebean/mGfeu/1/

localStorage 要素を正しく返し、すべてが正常に設定されています。

コードについては、onload イベントで必ずラップしてください。たとえば、次のようになります。

<script type="text/javascript">
//<![CDATA[
    window.onload=function(){ /* your js here */ }
//]]>

于 2013-10-23T13:32:41.910 に答える