尝试从codepen https://codepen.io/oxla/pen/awmMYY开始在本地工作 除了我可以使用的功能之外的所有功能。
我正在调用JS文件和最新的Jquery。
<head>
<link type="text/css" rel="stylesheet" href="styles.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
我错过了什么?
THE JS
const checkboxValues = JSON.parse(localStorage.getItem("checkboxValues")) || {},
buttons = Array.from(document.querySelectorAll(".checklist-item__expand")),
labels = Array.from(document.querySelectorAll(".checklist-item__title")),
checkboxes = Array.from(document.querySelectorAll('input[type="checkbox"]')),
checkboxesLength = checkboxes.length,
progress = document.querySelector(".progress__bar"),
counter = document.querySelector(".progress__count"),
reset = document.querySelector(".progress__reset");
function loadIds() {
for (let a = 0; a < checkboxesLength; a += 1) {
const b = a => a.replace(/[ ,.!?;:'-]/g, "");
(checkboxes[a].id = `${b(
checkboxes[a].nextSibling.nextSibling.innerText
).toLowerCase()}`), checkboxes[a].nextSibling.setAttribute(
"for",
`${b(checkboxes[a].nextSibling.nextSibling.innerText).toLowerCase()}`
);
}
}
function updateStorage(a) {
(checkboxValues[a.id] = a.checked), localStorage.setItem(
"checkboxValues",
JSON.stringify(checkboxValues)
);
}
function countChecked() {
if ("checkbox" === this.type) {
const a = this.parentNode.parentNode.parentNode,
b =
a.querySelectorAll("input:checked").length /
a.querySelectorAll(".checklist-item").length;
a.querySelector(
".checklist__percentage-border"
).style.transform = `scaleX(${b})`;
} else
Array.from(document.querySelectorAll(".checklist")).forEach(a => {
const b =
a.querySelectorAll("input:checked").length /
a.querySelectorAll(".checklist-item").length;
a.querySelector(
".checklist__percentage-border"
).style.transform = `scaleX(${b})`;
});
let a = 0;
Array.from(document.querySelectorAll("input:checked")).forEach(() => {
a += 1;
}), (counter.innerText = `${a}/${checkboxesLength}`), (progress.style.transform = `scaleX(${a /
checkboxesLength})`), (checkboxValues.globalCounter = a), updateStorage(this);
}
function loadValues() {
const a = checkboxValues.globalCounter || 0;
(counter.innerText = `${a}/${checkboxesLength}`), Object.keys(
checkboxValues
).forEach(a => {
"globalCounter" !== a &&
(document.getElementById(a).checked = checkboxValues[a]);
}), countChecked();
}
function toggleExpand() {
const a = this.parentNode;
a.querySelector(".line").classList.toggle("closed"), a.classList.toggle(
"open"
);
}
function resetCheckboxes() {
this.classList.add("progress__reset--pressed"), checkboxes.forEach(
a => (a.checked = !1)
), Object.keys(checkboxValues).forEach(
a => delete checkboxValues[a]
), countChecked();
}
window.onload = function() {
loadIds(), loadValues(), checkboxes.forEach(a =>
a.addEventListener("click", countChecked)
), buttons.forEach(a =>
a.addEventListener("click", toggleExpand)
), labels.forEach(a =>
a.addEventListener("click", toggleExpand)
), reset.addEventListener("click", resetCheckboxes), reset.addEventListener(
"animationend",
function() {
this.classList.remove("progress__reset--pressed");
},
!1
), "serviceWorker" in navigator &&
navigator.serviceWorker.register("/sw.js", { scope: "/" })
};
答案 0 :(得分:0)
实际上并没有使用jQuery,你可能会混淆的是使用$ template literals。
当您将脚本包含在头部时,JavaScript将会执行。你得到的错误是
Uncaught TypeError: Cannot set property 'innerText' of null
因为innerText试图在空对象上设置(第52行)
(counter.innerText = `${a}/${checkboxesLength}`), Object.keys(
计数器为空,因为在实际加载文档之前,尝试设置计数器(第7行)
counter = document.querySelector(".progress__count")
要解决此问题,请将脚本放在body标记下方。
此外,在本地获取CodePen的最快方法是导出到Zip文件。 (页面右下角)
正如您将注意到的,该脚本包含在导出的index.html
的底部