未捕获的类型错误：无法访问属性“id”，目标未定义答案

【问题标题】：Uncaught TypeError: can't access property "id", target is undefined未捕获的类型错误：无法访问属性“id”，目标未定义
【发布时间】：2020-07-13 19:48:03
【问题描述】：

我试图让用户通过使用 JS DOM 切换 theme.css 样式表来切换网站主题，然后将选定的主题保存到 cookie 以供以后访问网站。
我尝试关注a tutorial by Larry Ullman about 'Modern Javascript'，但我担心我关注的教程已经过时，因此在较新的时代效果不佳。

The error I get with Firefox Developer Edition:

Uncaught TypeError: can't access property "id", target is undefined
    setThemeCookie http://127.0.0.1:5500/js/index.js:52
    onload http://127.0.0.1:5500/js/index.js:68

这是我的代码：

Index.js：

function setTheme(theme) {  
  var css = null;
  if (document.getElementById('cssTheme')) {
    css = document.getElementById('cssTheme');
    css.href = 'css/' + theme + '.css';
  }else{
    css = document.createElement('link');
    css.rel = 'stylesheet';
    css.href = 'css/' + theme + '.css';
    css.id = 'cssTheme';
    document.head.appendChild(css);
  }
};

// make cookie when themeButton clicked
function setThemeCookie(e) {
  if (typeof e == 'undefined') e = window.event;

  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }

  var target = e.target || e.srcElement;

  // bake cookie
  var expire = new Date();
  expire.setDate(expire.getDate() + 7);
  COOKIE.setCookie('theme', target.id, expire);

  // update cookie recipe
  setTheme(target.id);
  return false;
}

// Use saved theme on window load:
window.onload = function () {
  document.getElementById('darkTheme').onclick = setThemeCookie;
  document.getElementById('lightTheme').onclick = setThemeCookie;
  document.getElementById('sdarkTheme').onclick = setThemeCookie;
  document.getElementById('slightTheme').onclick = setThemeCookie;

  var theme = COOKIE.getCookie('theme');
  if (theme) {
    setThemeCookie(theme);
  }
};

index.html的相关部分：

<!--head-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/darkTheme.css" id="cssTheme">
<script defer src="js/index.js"></script>
<script defer src="js/cookie.js"></script>

<!--body-->
<abbr title="dark"><button id="darkTheme"></button></abbr>
<abbr title="light"><button id="lightTheme"></button></abbr>
<abbr title="solarized dark"><button id="sdarkTheme"></button></abbr>
<abbr title="solarized light"><button id="slightTheme"></button></abbr>

darkTheme.css 作为 theme.css 文件外观的可视化：

:root{
  --text-1: #ddd;
  --text-2: #aaa;
  --text-3: #777;
  --bg-0: #101010;
  --bg-1: #111;
  --bg-2: #181818;
  --bg-3: #202020;
}
#footer-logo{
  filter: hue-rotate(0deg);
}

我怀疑从未指定 target.id 的问题，即使 e.id 或 css.id 是，它也无法从 target.id 检索 .id 值（如果这有意义的话）。我对 JavaScript 语言也很陌生，所以我可能不明白这一点。谢谢。

【问题讨论】：

你确定 index.html 正文中有 darkTheme, lightTheme ... 吗？
@Core972 我已更改问题以显示正文元素按钮及其 ID
尝试在fiddle 中创建，一切正常
你会尝试为元素调用getAttribute方法。
@faxterol 嘿，谢谢。但我不知道该怎么做。你能提供一个例子或一个sn-p你的意思吗？

标签： javascript html css dom javascript-objects

【解决方案1】：

你可以试试这个

const div1 = document.getElementById('div1');
const align = div1.getAttribute('align');

alert(align); // Shows the value of align for the element with id="div1"

来源：https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

【讨论】：