微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

在 Live Server 上运行的项目可以正确加载所有内容，但是当我从文件资源管理器或 GitHub 页面打开 index.html 时出现问题

分类：编程问答

如何解决在 Live Server 上运行的项目可以正确加载所有内容，但是当我从文件资源管理器或 GitHub 页面打开 index.html 时出现问题

我已经完成了我的项目，在上传到 GitHub 后注意到很多东西没有正确加载。第一个问题不是加载 vanilla js，而是通过弄乱目录在 html 中的链接方式快速解决了这个问题。现在我有一个不加载图像的错误。我得到一个 error 说明：

获取https://rickypoolay.github.io/images/bg-mobile-dark.jpg

我假设我的问题与图像相同。我在 scss 中创建了变量，并在每个主题的不同类中使用它们。任何帮助表示赞赏！

Live Server View（应该看起来像）

Github/Opened Locally

原生 JavaScript/SCSS/HTML

'use strict';

//Counter Variables
let taskCounter = 0;

//DOM Elements
const body = document.querySelector('body');
const inputField = document.querySelector('.input');
const tasksContainer = document.querySelector('.tasks-container ul');
const themeSwitchIMG = document.querySelector('.theme-switch');
const taskSpan = document.querySelector('.task-counter span');
const btnClearCompleted = document.querySelector('.clear-completed');
const btnFilters = document.querySelectorAll('.filter-btn');

let inputValue;
let label;
let check;

//Cache Memory

//Local Storage Theme
const theme = localStorage.getItem('theme');

if (theme) {
  body.classList.add(theme);
  if (theme == 'light') {
    themeSwitchIMG.src = 'images/icon-moon.svg';
  } else {
    themeSwitchIMG.src = 'images/icon-sun.svg';
    localStorage.setItem('theme','dark');
  }
} else {
  body.classList.add('dark');
}

//          Functions

//Switch Theme
const themeSwitch = function() {

  if (!body.classList.contains('light')) {
    //TO LIGHT
    body.classList.replace('dark','light');
    localStorage.setItem('theme','light');
    themeSwitchIMG.src = 'images/icon-moon.svg'
  } else {
    //TO DARK
    body.classList.replace('light','dark');
    localStorage.setItem('theme','dark');
    themeSwitchIMG.src = 'images/icon-sun.svg'
  }
}

//Task is created

const createTask = function(e) {
  //Grab the input value of User
  inputValue = inputField.value;

  if (inputValue.trim().length >= 1 && e.key === 'Enter' || e.key === 'enter') {
    taskCounter = document.querySelectorAll('.not-completed').length + 1;
    //Creating Task Container
    const createtodoDiv = document.createElement("li");
    createtodoDiv.classList.add('task-style','task',`task${taskCounter}`,'not-completed');
    tasksContainer.appendChild(createtodoDiv);

    //Creating CheckBox
    const createCheckBox = document.createElement("input");
    createCheckBox.type = 'checkBox';
    createCheckBox.classList.add(`check${taskCounter}`)
    createtodoDiv.appendChild(createCheckBox);

    //Todo Name/Label
    const createLabel = document.createElement("label");
    createLabel.innerText = inputValue;
    createLabel.classList.add(`label${taskCounter}`);
    createtodoDiv.appendChild(createLabel);

    //Create X img
    const createDeleteImg = document.createElement('img');
    createDeleteImg.src = './images/icon-cross.svg';
    createDeleteImg.classList.add('cross-style',`cross${taskCounter}`);
    createtodoDiv.appendChild(createDeleteImg);

    //Add Eventlistener to Created Task for completion or deletion
    createLabel.addEventListener('click',function() {
      if (createtodoDiv.classList.contains('not-completed')) {
        createLabel.style.textdecoration = 'line-through';
        createCheckBox.checked = true;
        createtodoDiv.classList.replace('not-completed','completed');
        taskCounter--;
        taskSpan.innerHTML = taskCounter;
      } else {
        createLabel.style.textdecoration = 'none';
        createCheckBox.checked = false;
        createtodoDiv.classList.replace('completed','not-completed');
        taskCounter++;
        taskSpan.innerHTML = taskCounter;
      }
    });

    createDeleteImg.addEventListener('click',function() {
      if (!createtodoDiv.classList.contains('completed')) {
        tasksContainer.removeChild(createtodoDiv);
        taskCounter--;
        taskSpan.innerHTML = taskCounter;
      } else {
        tasksContainer.removeChild(createtodoDiv);
      }
    });

    //Empty the Input Value of user
    inputField.value = '';

    //Set Items left
    taskSpan.innerHTML = taskCounter;
  }
}

//Clear Completed Tasks

const clearCompleted = function() {
  const listItems = document.querySelectorAll('.task');

  for (let i = 0; i < listItems.length; i++) {
    if (listItems[i].classList.contains('completed')) {
      tasksContainer.removeChild(listItems[i]);
    };
  }
}

//Filter Tasks

const taskFilter = function() {
  const listItems = document.querySelectorAll('.task');
  const btnAll = btnFilters[0];
  const btnActive = btnFilters[1];
  const btnCompleted = btnFilters[2];

  //If Active is selected
  if (this.innerText.includes("Active")) {
    btnAll.classList.remove('filter-select');
    btnActive.classList.add('filter-select');
    btnCompleted.classList.remove('filter-select');

    for (let i = 0; i < listItems.length; i++) {
      if (listItems[i].classList.contains('completed')) {
        listItems[i].style.display = 'none';
      } else {
        listItems[i].style.display = 'flex';
      };
    };


    //If Completed Is Selected
  } else if (this.innerText.includes("Completed")) {
    btnAll.classList.remove('filter-select');
    btnActive.classList.remove('filter-select');
    btnCompleted.classList.add('filter-select');

    for (let i = 0; i < listItems.length; i++) {
      if (!listItems[i].classList.contains('completed')) {
        listItems[i].style.display = 'none';
      } else {
        listItems[i].style.display = 'flex';
      };
    }


    //If All is selected
  } else if (this.innerText.includes('All')) {
    btnAll.classList.add('filter-select');
    btnActive.classList.remove('filter-select');
    btnCompleted.classList.remove('filter-select');

    for (let i = 0; i < listItems.length; i++) {
      listItems[i].style.display = 'flex';
    }
  }
}

//Adding Event Listeners

for (let i = 0; i < 3; i++) {
  btnFilters[i].addEventListener('click',taskFilter);
};
btnClearCompleted.addEventListener('click',clearCompleted);
themeSwitchIMG.addEventListener('click',themeSwitch);
inputField.addEventListener('keyup',createTask);
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');
//Breakpoints
@mixin breakpoint($point) {
  @if point==desktop {
    @media (min-width: 70em) {
      @content;
    }
  }
  @else if point==laptop {
    @media (min-width: 64em) {
      @content;
    }
  }
  @else if point==tablet {
    @media (min-width: 50em) {
      @content;
    }
  }
  @else if point==phablet {
    @media (min-width: 37.5em) {
      @content;
    }
  }
  @else if point==mobileonly {
    @media (max-width: 37.5em) {
      @content;
    }
  }
}

* {
  margin: 0;
  Box-sizing: border-Box;
  padding: 0;
  font-family: 'Josefin Sans';
  color: white;
  user-select: none;
}

:root {
  //Dark
  --bodyBackgroundDark: #161621;
  --taskContainersDark: rgb(37,39,60);
  --textColorDark: hsl(236,9%,61%);
  --textColorCrossedDark: hsl(233,11%,84%);
  --checkColorFilterLight: brightness(100%);
  --inputColor: #fff;
  //Light
  --bodyBackgroundLight: #e6e6e6;
  --taskContainersLight: #fff;
  --textColorLight: hsl(236,61%);
  --textColorCrossedLight: hsl(233,84%);
  --checkColorFilterLight: brightness(0%);
  --inputColor: hsl(236,61%);
}

//Color Themes
.light {
  --bgColor: var(--bodyBackgroundLight);
  --bgTasks: var(--taskContainersLight);
  --bgImage: url('images/bg-mobile-light.jpg');
  --checkColor: brightness(0%);
}

.dark {
  --bgColor: var(--bodyBackgroundDark);
  --bgTasks: var(--taskContainersDark);
  --bgImage: url('images/bg-mobile-dark.jpg');
  --checkColor: brightness(100%);
}

//Body
body {
  background-image: var(--bgImage);
  background-repeat: no-repeat;
  background-size: 100vw 12em;
  background-color: var(--bgColor);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  transition: all .5s ease-in-out;
}

//Main Container of App
.container {
  position: absolute;
  top: 2em;
  min-width: 20em;
  height: 45.5em;
  animation: fadeInUp .5s ease-in-out forwards;
}

//Header
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .theme-switch {
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;
  }
}

.todo-header {
  letter-spacing: .25em;
}

//Global Task Style
.task-style {
  transition: all .5s ease-in-out;
  display: flex;
  width: 100%;
  height: 3em;
  background-color: var(--bgTasks);
  align-items: center;
  border-bottom: 1px solid #38394a;
  .cross-style {
    width: .75em;
    margin: 0 1em;
    cursor: pointer;
  }
  input[type="checkBox"] {
    position: absolute;
    appearance: none;
    left: 1.4em;
    z-index: 5;
  }
  label {
    position: relative;
    margin-left: 4em;
    color: hsl(236,61%);
    font-size: .75rem;
    font-weight: 400;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
    user-select: text;
  }
  label::before {
    content: "";
    background-position: center;
    background-size: 10px 10px;
    background-repeat: no-repeat;
    width: 1.15em;
    height: 1.15em;
    left: -2.05em;
    top: -.25em;
    position: absolute;
    border: 1px solid #38394a;
    border-radius: 100%;
    font-size: 1rem;
  }
  label::after {
    content: "";
    background: url(/images/icon-check.svg);
    background-position: center;
    background-size: 10px 10px;
    background-repeat: no-repeat;
    filter: var(--checkColor);
    width: 1.15em;
    height: 1.15em;
    left: -2em;
    top: -.2em;
    position: absolute;
    border-radius: 100%;
    font-size: 1rem;
    z-index: 2;
    transform: scale(0) rotateZ(180deg);
    transition: all .3s cubic-bezier(.54,.01,1.49);
  }
  input[type='checkBox']:checked+label::after {
    transform: scale(1) rotateZ(0deg);
  }
}

// Input Field Task Bar
.task-input-container {
  transition: all .5s ease-in-out;
  margin-top: 2em;
  border-radius: 5px;
  border-bottom: hidden;
  .doneInput {
    appearance: none;
    border: solid 1px;
    border-radius: 100%;
    border-color: #38394a;
    width: 1.75em;
    height: 1.5em;
    margin-left: 1.25em;
    background-color: transparent;
  }
  .input {
    background-color: transparent;
    border-color: transparent;
    height: 100%;
    width: 100%;
    font-size: .75rem;
    font-weight: 400;
    ;
    color: var(--inputColor);
    margin-left: .75em;
    &::placeholder {
      color: hsl(236,61%);
    }
    &:focus {
      outline: none;
    }
  }
}

// Tasks Container
.tasks-container {
  transition: all .5s ease-in-out;
  width: 100%;
  height: 25em;
  background-color: var(--bgTasks);
  margin-top: 1em;
  border-radius: 5px 5px 0 0;
  overflow: auto;
}

.tasks-bottom-container {
  transition: all .5s ease-in-out;
  border-radius: 0 0 5px 5px;
  padding: 2em 2em;
  border: none;
  border-top: 1px solid #38394a;
  justify-content: space-between;
  font-size: .75em;
  .task-counter {
    span {
      color: rgb(88,91,114);
    }
  }
  p {
    color: rgb(88,114);
  }
  .clear-completed {
    cursor: pointer;
  }
}

#desktop-bottom {
  transition: all .5s ease-in-out;
  border-radius: 0 0 5px 5px;
  padding: 2em 2em;
  border: none;
  border-top: 1px solid #38394a;
  justify-content: space-between;
  font-size: .75em;
  p {
    color: rgb(88,114);
  }
  span {
    color: rgb(88,114);
  }
  h4 {
    color: rgb(88,114);
  }
}

//Bottom Floating Container
.footer {
  transition: all .5s ease-in-out;
  border: none;
  border-radius: 5px;
  margin-top: 1em;
  justify-content: space-around;
  padding: 0 3em;
  h4 {
    font-weight: 400;
    color: rgb(88,114);
  }
  .filter-btn {
    cursor: pointer;
  }
  .filter-select {
    color: #3c7af7;
  }
}

//Animation
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(2.5em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.completedAnim {
  transform: translateX(5em);
}

//Active Classes
.hidden {
  display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="styles/css/style.css">
  <title>Frontend Mentor | Todo app</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet ? -->
</head>

<body>
  <!-- Header Image Section -->
  <div class="container">

    <!-- Header -->
    <div class="header">
      <h1 class='todo-header'>Todo</h1>
      <img class="theme-switch" src="./images/icon-moon.svg" alt="sun">
    </div>

    <!-- Create Task Input-->
    <div class="task-style task-input-container">
      <input type="button" name="" class="doneInput">
      <input class="input" type="text" placeholder="Create a new todo...">
    </div>

    <div class="tasks-container">
      <ul>

      </ul>
    </div>

    <div class='tasks-bottom-container task-style' id='mobile-bottom'>
      <p class='task-counter'><span>0</span> Items left</p>
      <p class='clear-completed'>Clear Completed</p>
    </div>

    <!-- <div class="task-bottom-container task-style" id='desktop-bottom'>
      <p class='task-counter'><span>0</span> Items left</p>
      <h4 class="filter-btn all-btn filter-select">All</h4>
      <h4 class="filter-btn active-btn">Active</h4>
      <h4 class="filter-btn completed-btn">Completed</h4>
      <p class='clear-completed'>Clear Completed</p>
    </div> -->

    <div class="footer task-style">
      <h4 class="filter-btn all-btn filter-select">All</h4>
      <h4 class="filter-btn active-btn">Active</h4>
      <h4 class="filter-btn completed-btn">Completed</h4>
    </div>

  </div>
</body>
<script src="./index.js"></script>

</html>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot