前提
JavaScriptの入門書でプライバシーポリシー認証パネルを勉強しています。
実現したいこと
「認証する」ボタンが押されるとクッキーを保存し、「テスト用 cookie削除」ボタンが押されるとクッキーを削除するようにしたいです。
発生している問題・エラーメッセージ
Refused to apply style from 'http://localhost:4245/_common/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Failed to load resource: the server responded with a status of 404 (Not Found) Uncaught ReferenceError: Cookies is not defined at (index):44:15 Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:1 Refused to apply style from 'http://localhost:4245/_common/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
該当のソースコード
自分が書いたコード
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1"> 6<title>テンプレート</title> 7<link href="../../_common/images/favicon.ico" rel="shortcut icon"> 8<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet"> 9<link href="../../_common/css/style.css" rel="stylesheet"> 10<link rel="stylesheet" href="panel.css"> 11</head> 12<body> 13<header> 14<div class="container"> 15<h1>タイトル</h1> 16<h2>サブタイトル</h2> 17</div><!-- /.container --> 18</header> 19<main> 20<div class="container"> 21<section> 22 23 24<p><button id="testbtn">テスト用 cookie削除</button></p> 25 26</section> 27</div><!-- /.container --> 28</main> 29<footer> 30<div class="container"> 31<p>JavaScript Samples</p> 32</div><!-- /.container --> 33</footer> 34 35<div id="privacy-panel"> 36<p>当サイトではユーザーエクスペリエンス向上のためクッキーを使用しています。</p> 37<button id="agreebtn">承認する</button> 38</div> 39 40<script src="../../_common/scripts/js.cookie.js"></script> 41 42<script> 43'use strict'; 44const agree = Cookies.get('cookie-agree'); 45// const panel = document.getElementById('privacy-panel'); 46 47if(agree === 'yes') { 48 console.log('クッキーを確認しました'); 49} else { 50 console.log('クッキーを確認できません'); 51 document.getElementById('agreebtn').onclick = function() { 52 Cookies.set('cookie-agree', 'yes', {expires: 7}); 53 }; 54} 55 56//MEMO 57// Cookies.set('key', 'value'); 58// 14日後に消える 59// Cookies.set('key', 'value', {expires: 14}); 60// ユーザーの使用言語を日本語に指定 61// Cookies.set('locale', 'ja-JP'); 62 63 64//クッキー削除 65document.getElementById('testbtn').onclick = function() { 66 Cookies.remove('cookie-agree'); 67}; 68 69</script> 70 71 72</body> 73</html> 74
お手本
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1"> 6<title>5-03_cookie</title> 7<link href="../../_common/images/favicon.ico" rel="shortcut icon"> 8<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet"> 9<link href="../../_common/css/style.css" rel="stylesheet"> 10<link href="panel.css" rel="stylesheet"> 11</head> 12<body> 13<header> 14<div class="container"> 15<h1>プライバシーポリシー承認パネルを作る</h1> 16<h2>クッキーの読み・書き・削除</h2> 17</div><!-- /.container --> 18</header> 19<main> 20<div class="container"> 21<section> 22 <p><button id="testbtn">テスト用 cookie削除</button></p> 23</section> 24</div><!-- /.container --> 25</main> 26<footer> 27<div class="container"> 28<p>JavaScript Samples</p> 29</div><!-- /.container --> 30</footer> 31 32<div id="privacy-panel"> 33 <p>当サイトではユーザーエクスペリエンス向上のためクッキーを使用しています。また、匿名でアクセス状況のデータを収集しています。詳しい情報は当サイトのプライバシーポリシーをご覧ください。</p> 34 <button id="agreebtn">承認する</button> 35</div> 36 37<script src="../../_common/scripts/js.cookie.js"></script> 38<script> 39'use strict'; 40 41const agree = Cookies.get('cookie-agree'); 42if(agree === 'yes') { 43 console.log('クッキーを確認しました'); 44} else { 45 console.log('クッキーを確認できません'); 46 document.getElementById('agreebtn').onclick = function() { 47 Cookies.set('cookie-agree', 'yes', {expires: 7}); 48 }; 49} 50 51// クッキー削除(テスト用) 52document.getElementById('testbtn').onclick = function() { 53 Cookies.remove('cookie-agree'); 54}; 55</script> 56</body> 57</html>
試したこと
vscodeの比較機能でチェックしましたが、文字列・空白以外の違いはありませんでした。
補足情報(FW/ツールのバージョンなど)
本の案内通り、served.exeを使用しています。
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/09/27 00:16 編集
2022/09/27 00:16