クッキーを使用する際に問題が発生する

Question

クッキーを設定して、ユーザーの入力に応じてテキストの色を設定するのが難しいです。これは私が今までに持っているものであり、どんな助けも大いに評価されるだろう。

$(document).ready(function() { 
    $("#pageColor").change(function(event) { 
     //Retrieves the value of the user entered color 
     var name = event.target.value; 
     //Add code to set cookie 
     Cookie.set("color", name); 
     $("name").css("color", color); 
    }); 
}); 

私のHTMLコードは、クッキーのを使用できるようにするには、この

<main> 
    <form action="Lab1-p2.html" method="post"> 

     <h3>What color do you want your text to be? </h3> 
     <label for="pageColor">Text color: </label> 
     <input id="pageColor" type="text" name="pageColor" /> 

     <input id="submit" type="submit" value="Submit" /> 
    </form> 
</main> 

Answer 1

1. のように見える、あなたはhttps://github.com/js-cookie/js-cookie

ようなJS-プラグインを読み込む必要があります

2. 最後の行：$("name").css("color", color)。セレクターに間違いがあります。 ID ('#name')またはクラス('.name')または入力名('[name="color"]')のように指定してください。そして、あなたはの色をという変数に設定しませんでした（の名前である必要があります）。

Answer 2

あなたのプロジェクトでCookieを使用する前に、クッキーのライブラリをロードする必要がまず第一に、今、このコードをコピーして貼り付け、それが動作します。ライブラリがコードの一番下に追加されました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.js"></script> 
</script> 
<script> 
    $(document).ready(function(){ 
    $("#setcolor").click(function(){ 
    //Add code to set cookie 
    var text = $('#pageColor').val();  
    Cookies.set("color", text); 
    var color = Cookies.get("color");  
    $("#changed").css("color", color); 
    }); 

}); 
</script> 

<main> 
    <form action="#" method ="post" > 

    <h3>What color do you want your text to be? </h3> 
     <label for ="pageColor" id="changed">Text color: </label> 
     <input id="pageColor" type="text" name="pageColor" /> 

     <input id="setcolor" type="button" value="Submit" /> 

    </form> 
</main> 

SetメソッドでCookieを設定する場合は、GetメソッドでもCookieの値を取得する必要があります（コードを参照）。