Javascript куки не работают

Question

Javascript куки не работают

1

Я пытаюсь использовать файл cookie, чтобы сохранить выбранный пользователем цвет, чтобы установить тело моих страниц сайта. Теперь cookie настроен отлично, но по какой-то причине мне кажется, что он работает. Может ли кто-нибудь увидеть, где я здесь ошибся?

Благодарю.

Ошибка консоли:

Uncaught TypeError: Невозможно установить свойство 'className' из null

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
var bgColour = getCookie('bgColour');

if (bgColour == "01") {
  document.getElementById("body").className = "bgColor01";
}
if (bgColour == "02") {
  document.getElementById("body").className = "bgColor02";
}
if (bgColour == "03") {
  document.getElementById("body").className = "bgColor03";
}
if (bgColour == "04") {
  document.getElementById("body").className = "bgColor04";
}
if (bgColour == "05") {
  document.getElementById("body").className = "bgColor05";
}

function color1() {
  document.cookie = "bgColour=01";
}

function color2() {
  document.cookie = "bgColour=02";
}

function color3() {
  document.cookie = "bgColour=03";
}

function color4() {
  document.cookie = "bgColour=04";
}

function color5() {
  document.cookie = "bgColour=05";
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.bgColor00 {
  background-color: #f6f4fb;
}

.bgColor01 {
  background-color: #80b3ff;
}

.bgColor02 {
  background-color: #afe9af;
}

.bgColor03 {
  background-color: #ffb380;
}

.bgColor04 {
  background-color: #ffaaaa;
}

.bgColor05 {
  background-color: #eeaaff;
}

<html>

<body id="body">
  <button onClick="color1()">Blue</button>
  <button onClick="color2()">Green</button>
  <button onClick="color3()">Orange</button>
  <button onClick="color4()">Red</button>
  <button onClick="color5()">Purple</button>
</body>

</html>

G.Hamton 06 июнь 2017, в 19:14

Источник

Теги:

javascript

cookies

1 ответ

Ещё вопросы

JP. Aulet · Answer 1 · 2017-06-06T16-36-00.000Z

Я думаю, что ваша проблема заключается в том, что вы размещаете скрипт вне <html>. Я пробовал делать вот так:

<html>
<style>
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.bgColor00 {
  background-color: #f6f4fb;
}

.bgColor01 {
  background-color: #80b3ff;
}

.bgColor02 {
  background-color: #afe9af;
}

.bgColor03 {
  background-color: #ffb380;
}

.bgColor04 {
  background-color: #ffaaaa;
}

.bgColor05 {
  background-color: #eeaaff;
}
</style>
<body id="body">
  <button onClick="color1()">Blue</button>
  <button onClick="color2()">Green</button>
  <button onClick="color3()">Orange</button>
  <button onClick="color4()">Red</button>
  <button onClick="color5()">Purple</button>
</body>

<script type='text/javascript'>

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
var bgColour = getCookie('bgColour');

if (bgColour == "01") {
  document.getElementById("body").className = "bgColor01";
}
if (bgColour == "02") {
  document.getElementById("body").className = "bgColor02";
}
if (bgColour == "03") {
  document.getElementById("body").className = "bgColor03";
}
if (bgColour == "04") {
  document.getElementById("body").className = "bgColor04";
}
if (bgColour == "05") {
  document.getElementById("body").className = "bgColor05";
}

function color1() {
  document.cookie = "bgColour=01";
}

function color2() {
  document.cookie = "bgColour=02";
}

function color3() {
  document.cookie = "bgColour=03";
}

function color4() {
  document.cookie = "bgColour=04";
}

function color5() {
  document.cookie = "bgColour=05";
}
</script>
</html>

И он работает (ошибка не возникает), единственная проблема заключается в том, что это не динамическое изменение, вам нужно обновить страницу. Возможно, location.reload будет работать для вас, или вам нужно будет вызвать:

document.getElementById("body").className = "bgColor0X";

внутри каждый colorX() функция. Затем цвет будет меняться в момент щелчка, а не только при перезагрузке.

Я сделал этот рабочий пример: https://codepen.io/jpaulet/pen/LLVjGO Надеюсь, это поможет!