时间戳

首页 > 解决方案 > 我的“推送”论点和我的待办事项 css 可能有什么问题？

css - 我的“推送”论点和我的待办事项 css 可能有什么问题？

问题描述

问题是当我单击“添加注释”按钮以及在标题字段和注释字段中键入数据并点击提交控制台时，我的取消 div 没有出现，将错误宣布为“无法读取属性”推送“为空”。有什么问题？这是我的 html 文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet"  href="notes.css">
    
    
</head>
<body>
    <div class="add-note">
        <a href="#myModel" class="add-note">Add note</a>
    </div>
    <div class="model" id="myModel">
        <div class="model-content">
            <h1 class="header">Add note</h1>
            <form class="note-form" action="">
                <label for="">Title</label></br>
                <input class="title" type="text"></br>
                <label for="">Note</label></br>
                <input class="note" type="text"></br>
                <input type="submit">
                <div class="cancel">
                    <a href="#close" class="cancel-btn">Cancel</a>
                </div>
            </form>
        </div>
    </div>
    </br>
    <table class="note-table">
        <tr>
            <td class="header">Title</td>
            <td class="note">Note</td>
        </tr>
    </table>>
    
    <script src="note.js"></script>
</body>
</html>

这是我的 js 文件：

let model=document.querySelector('.model')
let noteForm=document.querySelector('.note-form')
let noteTable=document.querySelector('.note-table')
let cancel= document.querySelector('.cancel-btn')

let noteDeleteButtons
let noteList=JSON.parse(localStorage.getItem('notes'))

if (noteList!==null){
    appendNotes()
}

noteForm.addEventListener('submit',(e)=>{
    addNote(e)
    
})
function addNote(e){
    e.preventDefault()
    

    let newNote={}

    let title=document.querySelector('.title')
    let note=document.querySelector('.note')
    if(title.value=="" || note.value=="blank"){
        return alert('pls enter both fields')
    }else{
        newNote.title=title.value
        newNote.note=note.value

    }
    title.value=""
    note.value=""

    noteList.push(newNote)
    appendNotes()
    cancel.click()
    
}
function appendNotes(){
    let notes=Array.from(document.querySelectorAll('.noteItem'))
    if (notes.length>0){
        notes.forEach(note=>{
            note.remove()
        })
    }
    noteList.map(note=>{
        // create table cells
        let tr=document.createElement('tr')
        tr.classList="noteItem"
        let tdTitle=document.createElement('td')
        tdTitle.innerText=note.title;
        let tdNote=document.createElement('td')
        tdNote.innerText=note.note;
        let tdDelete=document.createElement('td')
        tdDelete.innerHTML="&times"
        tdDelete.classList.add("delete-item")
        //append tables cell
        tr.appendChild(tdTitle)
        tr.appendChild(tdNote)
        tr.appendChild(tdDelete)
        //append row to table
        noteTable.appendChild(tr)
        getDeleteButtons()
        localStorage.setItem('notes', JSON.stringify(noteList))
    })
}
function getDeleteButtons(){
    noteDeleteButtons=Array.from(document.querySelectorAll('.delete-item'))
    noteDeleteButtons.forEach(button=>{
        let noteTitle=button.previousSibling.previousSibling.innerText;
    button.addEventListener('click',()=>{
            console.log(noteTitle)
        })
    })

}

这是我的 css 文件：

*{
    box-sizing: border-box;
}
a{
    color:white;
}
.add-note{
    position: relative;
    background-color:blue;
    color:black;
    width: 8rem;
    padding:0.5rem;
    border-radius:5px;
    left:10%;
    top:5%;
}
.add-note:hover{
    opacity:0.7;
}
input{
    margin-bottom:1rem;
    border:none;
    border-bottom:1px solid blue;
}
.model{
    position: fixed;
    top:-20%;
    right:0;
    bottom:0;
    left:0;
    padding:1.5rem;
    pointer-events: none;
    z-index:9999;
    opacity:0;
    transition: 0.2s ease-in;
    border-radius:5px;

}
.model:target{
    opacity:1;
    top:0;
    pointer-events: auto;
}

标签： csspush

解决方案

推荐阅读