使用javascript和css将任务列表添加到我的HTML_Javascript_Html_Css_Tasklist

使用javascript和css将任务列表添加到我的HTML

javascript html css

使用javascript和css将任务列表添加到我的HTML,javascript,html,css,tasklist,Javascript,Html,Css,Tasklist,因此，我正在为我的html制作一个任务列表，就像你在这个链接中看到的一样，但是我必须将css和js分开到它们各自的文件夹中，并将它们链接到我的主html（这里有注释）我的问题是，它为什么适用于第一个链接而不是第二个链接 -Js var myNodelist=document.getElementsByTagName（“LI”）； var i；对于（i=0；i

因此，我正在为我的html制作一个任务列表，就像你在这个链接中看到的一样，但是我必须将css和js分开到它们各自的文件夹中，并将它们链接到我的主html（这里有注释）

我的问题是，它为什么适用于第一个链接而不是第二个链接

-Js

var myNodelist=document.getElementsByTagName（“LI”）；
var i；
对于（i=0；i


-css

身体{
保证金：0；
最小宽度：250px；
}
/*在元素的总宽度和总高度中包含填充和边框*/
* {
框大小：边框框；
}
/*从列表中删除边距和填充*/
保险商实验室{
保证金：0；
填充：0；
}
/*设置列表项的样式*/
ulli{
光标：指针；
位置：相对位置；
填充：12px 8px 12px 40px；
列表样式类型：无；
背景：#eee；
字号：18px；
过渡：0.2s；
/*使列表项不可选择*/
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
/*将所有奇数列表项设置为其他颜色（斑马条纹）*/
第n个孩子（单数）{
背景#f9f9f9；
}
/*悬停时背景颜色较深*/
ulli：悬停{
背景：ddd；
}
/*单击后，添加背景色并删除文本*/
保险商实验室检查{
背景：#888；
颜色：#fff；
文字装饰：线条贯通；
}
/*单击时添加“选中”标记*/
ul li.已检查：：之前{
内容：''；
位置：绝对位置；
边框颜色：#fff；
边框样式：实心；
边框宽度：0 2px 2px 0；
顶部：10px；
左：16px；
变换：旋转（45度）；
高度：15px；
宽度：7px；
}
/*设置关闭按钮的样式*/
.结束{
位置：绝对位置；
右：0；
排名：0；
填充：12px 16px 12px 16px；
}
.关闭：悬停{
背景色：#f44336；
颜色：白色；
}
/*标题样式*/
.标题{
背景色：#f4a3dc；
填充：30px 40px；
颜色：白色；
文本对齐：居中；
}
/*清除标题后的浮动*/
.标题：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*为输入设置样式*/
输入{
保证金：0；
边界：无；
边界半径：0；
宽度：75%；
填充：10px；
浮动：左；
字体大小：16px；
}
/*设置“添加”按钮的样式*/
.addBtn{
填充：50px；
宽度：15%；
背景#d9d9d9；
颜色：#555；
浮动：左；
文本对齐：居中；
字体大小：16px；
光标：指针；
过渡：0.3s；
边界半径：0；
}
.addBtn:悬停{
背景色：#bbb；
}


MainHtml









.中心{
显示：块；
左边距：自动；
右边距：自动；
宽度：20%；
边框：4px黑色；
}





















评价我的页面
不错的一页
喜欢它
我喜欢它
提交
我的任务清单
添加





首先，您必须创建一个.js文件，并在其中保存所有javascript代码。然后
创建一个.css文件将所有css代码复制到该文件中
<html>
<head>
   <script src="myscripts.js"></script> //path of javascript file to src
   <link rel="stylesheet" href="styles.css"> //path of css file in href
</head>

</html>


//javascript文件到src的路径
//href中css文件的路径

帮助完整链接：
Move所以我这样做了，但仍然没有做任何事情，我试图隔离任务列表，看看问题出在哪里，这里你可以看到@RickardElimäää，这些是js和cs文件，使用它与我最初在t中放置的milestonetest链接进行比较
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  min-width: 250px;
}

/* Include the padding and border in an element's total width and height */
* {
  box-sizing: border-box;
}

/* Remove margins and padding from the list */
ul {
  margin: 0;
  padding: 0;
}

/* Style the list items */
 ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;
  
  /* make the list items unselectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
 ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Darker background-color on hover */
ul li:hover {
  background: #ddd;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style the close button */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

/* Style the header */
.header {
  background-color: #f4a3dc;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
  padding: 50px;
  width: 15%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #bbb;
}
</style>
</head>
<body>

    <style>
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    border: 4px outset black;

  }
  </style>
    </head>
    <body>
      <nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <!-- Brand -->
    <a class="navbar-brand" href="#">Wingit</a>

    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="https://github.com/jualston/wingit" target="_blank">Github</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>

      <!-- Dropdown -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Menu
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#profile_page">Profile</a>
          <a class="dropdown-item" href="#education_summary">Education </a>
          <a class="dropdown-item" href="#work_experience">Work/Experience </a>
            <a class="dropdown-item" href="#program_knowledge">Programming </a>
            <a class="dropdown-item" href="#personal_interest">Hobbies </a>
            <a class="dropdown-item" href="#websites_used">Most Used Websites </a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
          Project 1
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="https://jualston.github.io/wingit/milestone1.html" target="_blank">Assignment Milestone 1</a>
          <a class="dropdown-item" href="https://jualston.github.io/wingit/milestone2.html"target="_blank">Assignment Milestone 2</a>
          <a class="dropdown-item" href="https://jualston.github.io/wingit/milestone3.html" target="_blank">Assignment Milestone 3</a>
        </div>
      </li>
    </ul>
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown navbar-dark">
          Project 2
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="https://jualston.github.io/wingit/P2milestone1.html" target="_blank">Assignment Milestone 1</a>
        </div>
      </li>
    </ul>
  </nav>
  <br>







  <div class="goldborder">
    <a id="profile_page">.</a>
    <div id="Pinkfont">Welcome to my Profile Page:</div>
    <p class="a">Name: Julius Alston     Major: Computer Science      Year:Senior.</p>
  </div>
  <title>Julius Alston Profile</title>
   <img src="headshot.jpg" alt="Paris" class="center"  border=0px   witdh= 300 height= 400>
  <div class="goldborder">
  <a id="education_summary">.</a>
   <div id="Pinkfont">Education Summary:</div>
  </div>
  <p class="a"> My only education experiences fall under K-12 and Undergraduate.</p>
  <ul> 
  <li> Degree/Diplomas: </li>
  <li> High School Diploma </li>
  <li> (May 2021) Degree:Bacherlors in Computer Science </li>
  </ul>
  <div class="goldborder">
  <a id="work_experience">.</a>
  <div id="Pinkfont">Work Experience:</div>
  </div>
  <hr> 
    <table class="table table-dark table-hover">
      <thead>
        <tr>
          <th>Company</th>
          <th>Occupation Title</th>

        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Harmon Discount</td>
          <td>Cashier</td>

        </tr>
        <tr>
          <td>Hudson Pool Management</td>
          <td>Lifeguard</td>

        </tr>
        <tr>
          <td>OnewayMoving</td>
          <td>Hauler</td>

        </tr>
      </tbody>
    </table>
  </div>
  </table>
  <div class="goldborder">
  <a id="program_knowledge"></a>
   <div id="Pinkfont">Programming Skills:</div>
  </div>
  <ul> Programming languages: 
  <li><span style="color:gold;font-weight:bold font-size: large;">Java</span>: Adequate:</li>
  <li><span style="color:gold;font-weight:bold font-size: large;">Python</span>:Beginner </li>
  <li> <span style="color:gold;font-weight:bold font-size: large;">R</span>: Beginner</li>
  <li> <span style="color:gold;font-weight:bold font-size: large;">SQL</span>: beginner</li>
  </ul>
  <div class="goldborder">
  <a id="personal_interest"></a>
   <div id="Pinkfont">Personal Interest/Favorite things in life:</div>
  </div>

  <p> I like to call myself a dabbler because i tried alot out and ended up liking it. The main things i do though:
  <ul>
  <li class="a"> Play basketball</li>
  <li class="a"> Stream on Twitch</li>
  <li class="a"> Hiking(Summer)</li>
  <li class="a"> Code</li>
    <div class="containe<div class="row">
          <div class="row">
          <div class="col-md-3">
         <p class="a"> <div class="a">
                               Twitch Clip:</div>  <video width="400" height="350" controls>
    <source src=" vod-707438149-offset-21798.mp4
  " type="video/mp4">
   </video> </p>
          </div>
          <div class="col-md-3">
            <p > <div class="a">
                               Favorite TV show:</div>  <iframe width="360" height="300" src="https://www.youtube.com/embed/gIKPC-JE2E0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
   </p>
          </div>
          <div class="col-md-3">
            <p class="a"> <div class="a">
                               Favorite Song:</div>  <iframe width="360" height="300" src="https://www.youtube.com/embed/ZPCAvzIFY-s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </p>
          </div>
          <div class="col-md-3">
        <p class="a"> <div class="a">
                               Favorite Movie:</div> <iframe width="360" height="300" src="https://www.youtube.com/embed/WR7cc5t7tv8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </p>
          </div>
        </div>


  <div class="goldborder">
  <h2> Most used Websites:</h2>
  </div>
  <a id="websites_used">.</a>
  <ul> 
  <li><i class="fab fa-twitch"></i><a href="https://www.Twitter.com/" target="_blank">Twitter</a> </li>
  <li><i class="fab fa-twitter"></i><a href="https://www.Twitch.tv/Euphony.com/" target="_blank">Twitch</a> </li>
  <li><i class="fab fa-youtube"></i><a href="https://www.youtube.com/" target="_blank">Definitley Youtube!</a> </li>
  </ul>
    <br>
                                                                                      <div class="container mt-3">


  <div class="container mt-3">


  <div class="container mt-3">


      <select name="cars" class="custom-select mb-3">
        <option selected>Rate my page</option>
        <option value="Like">Pretty good page</option>
        <option value="love">Loved it</option>
        <option value="Love^2">I loved it^2</option>
      </select>
      <button type="submit" class="btn btn-dark">Submit</button>
    </form>
  </div>
     <div id="myDIV" class="header">
    <h2 style="margin:5px">My To Do List</h2>
    <input type="text" id="myInput" placeholder="Insert task">
    <input type="number" id="myInput1" placeholder="Insert Priority Number (1 being lowest to 3 being highest) ">
    <span onclick="newElement()" class="addBtn">Add</span>
  </div>

  <ul id="myUL">
               <li></li>
  </ul>

      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    </body>
  </html>

<html>
<head>
   <script src="myscripts.js"></script> //path of javascript file to src
   <link rel="stylesheet" href="styles.css"> //path of css file in href
</head>

</html>