ローカルストレージエラー

Question

私が書いたコードの問題点を教えてください。

のJs

$("button").click(function() { 
      document.getElementById("demo").innerHTML = document.getElementById("asd").value; 
     }); 
     $(function() { 
      var edit = document.getElementById('demo'); 
      $(edit).blur(function() { 
       localStorage.setItem("data1", this.innerHTML) 
      }); 
      if (localStorage.getItem("data1")) { 
       edit.innerHTML = localStorage.getItem("data1"); 
      } 
     }); 

Htmlの

<input type="text" id="asd"> 
<button>asdsad</button> 
<p id="demo"></p> 

しかし、同じコードが、この中で完璧に働いている：

のJs

$(function() { 
      var edit = document.getElementById('demo'); 
      $(edit).blur(function() { 
       localStorage.setItem("data1", document.getElementById("demo").innerHTML) 
      }); 
      if (localStorage.getItem("data1")) { 
       edit.innerHTML = localStorage.getItem("data1"); 
      } 
     }); 

HTML

<div contenteditable="true" id="demo">Some text here</div> 

ここで何が問題になったか教えてください。

Answer 1

DOM要素を含む変数editを引数としてjQueryに渡すと、jQueryオブジェクトが返されます。これにより、blurイベント内のthisの範囲がjQueryオブジェクトに変更されます。 jQueryはinnerHTMLのプロパティを持っていないので、undefinedを返します。 JavaScriptのDOM要素にはもちろんinnerHTMLというプロパティがあります。そのため、2番目の例が機能します。あなたの最初の例を修正する

一つの方法は、これを交換することである。これにより

$(edit).blur(function() { 
    localStorage.setItem("data1", this.innerHTML) 
}); 

：スタックオーバーフローへ

$(edit).blur(function() { 
    localStorage.setItem("data1", $(this).html()); 
});