尝试在本地复制Codepen代码

时间:2017-06-27 18:04:37

标签: javascript html

尝试从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: "/" })
};

1 个答案:

答案 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文件。 (页面右下角)

enter image description here

正如您将注意到的,该脚本包含在导出的index.html

的底部

enter image description here