cookie.htmlからgetCookie.jsを呼び出していますが何も表示されません

JavaScriptを勉強中です。XAMPPとnotepad++を使用しています。
cookie.htmlからgetCookie.jsを呼び出していますが何も表示されません
はじめてのJavaScriptです。どこが間違っているのかさっぱりわからないので、
教えてください。お願いいたします。

JavaScript
1//cookie.html
2
3<!DOCTYPE html>
4
5<html lang='ja'>
6<head>
7  <meta charset='UTF-8' />
8  <title>Cookieのデータを取り出す関数</title>
9
10  <script src="getCookie.js"></script>
11</head>
12
13<body>
14  
15  <h4>Cookieのデータを取り出す関数</h4>
16
17  
18  <script>
19    document.cookie = 'COUNTORY=Japan';
20    document.cookie = 'USER=' + encodeURIComponent('秀和太郎');
21
22    var user = getCookie('USER');
23    
24    document.write(user);
25    
26    document.write('<br>');
27    
28    var country = getCookie('COUNTORY');
29    
30    document.write(country);
31    
32  </script>
33  
34</body>
35</html>

javascript
1//getCookie.js
2function getCookie(name) {
3  
4      // セミコロン(;)で分割
5      var data = document.cookie.split(';');
6    
7      //個々のデータを順番に処理
8      for(var i=0;i<data.length; i++){
9        
10        //キーと値を＝で分割
11        var keyvalue = data[i].split('=');
12          
13        //キーの文字列とパラメーターnameが一致すれば値の前後の空白を除去してデコードする
14        if(trim(keyvalue[0]==name)){
15          
16          return decodeURIComponent(trim(keyvalue[1]))
17          //キーの文字列とパラメーターnameが一致すればキーの値であるkeyvalue[1]の前後の空白を除去してデコードする
18        }
19      }
20      //該当するキーがなければNULLを返す
21      return null;
22 }
23 
24 function trim(value){
25    return value.replace(/^\s*　|　\s*$/g,'');
26 }
27

行動規範の内容に同意します

回答2件

ベストアンサー

今回の問題は２点

javascript
1if(trim(keyvalue[0]==name)){
2↓↓↓
3if(trim(keyvalue[0])==name){

および

javascript
1function trim(value){
2  return value.replace(/^[\s　]+|[\s　]+$/g,'');
3}

cookieを自前で処理しているのは勉強のためでしょうか？
jsにおけるcookieは意外に面倒なので初心者の方なら特に
なにかライブラリに任せてしまう方が現実的かも知れません
(もし自前でやるなら、setCookieとdelCookie、可能ならhasCookieを用意してください)

またhtmlをdocument.writeで処理するのはあまりにレガシーな方法なので
やめたほうが良いでしょう。可能な限りDOMを意識して処理するようにしてください

投稿2019/09/25 01:11

編集2019/09/25 02:01

yambejp

総合スコア116694

退会済みユーザー

2019/09/25 02:22

ありがとうございます。参考書を使っているので、それに沿って勉強しています。DOMについてはこの後出てくるみたいなので、今勉強している章の課題を消化したいのですが。何もわからずに先に進みたくないので、このコードについて説明していただければありがたいです。

yambejp

2019/09/25 02:25

> このコードについて説明 1番目はtrimの使い方がおかしいので、調整しています 2番目はtrim自体の機能が不全なので調整しました。やっていることは先頭や末尾の空白文字（全角半角スペース、タブ、ほか）をとっぱら処理です。

退会済みユーザー

2019/09/25 03:02

ありがとうございました。教えていただいたように修正して実行できました。参考書のコードをvalue.replace(/(^\s*)|　(\s*$)/g,''); のように修正しても実行出来るようになりました。

行動規範の内容に同意します

検証はしておりませんが。

getCookie.jsの

js
1//キーの文字列とパラメーターnameが一致すれば値の前後の空白を除去してデコードする
2if(trim(keyvalue[0]==name)){

これ、カッコのくくり方がおかしいようです。

trimした値を比較したいところが、trim出来ていないので、
一致せずに、何も出力されないのでは？

投稿2019/09/25 00:57

mix-peach

総合スコア1910

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

cookie.htmlからgetCookie.jsを呼び出していますが何も表示されません

関連した質問