Загрузка...

EditBtn не работает помогите пж

Тема в разделе Frontend создана пользователем Falcon_Extra 24 дек 2023. (поднята 24 дек 2023) 66 просмотров

  1. Falcon_Extra
    Скопировать BBCode
    Falcon_Extra Автор темы 24 дек 2023 Заблокирован(а) 108 22 окт 2023
    Вот код
    EditBtn не работает помогите пж

    JS
    let nameo = document.querySelector('.name')
    
let lastNameo = document.querySelector('.surname')
    
let faceo = document.querySelector('.face')
    
let btn = document.querySelector('.btn-hover')
    
let people = document.querySelector(".people")
    
let list = document.querySelector('.people')
    

    
btn.addEventListener('click', () => {
    
    addData();
    
});
    

    
function addData() {
    
    if (!nameo.value.trim() || !lastNameo.value || !faceo.value) {
    
        alert('Заполните поле');
    
        return;
    
    }
    

    
    let obj = {
    
        name: nameo.value,
    
        lastName: lastNameo.value,
    
        face: faceo.value,
    
        id: Date.now()
    
    };
    

    
    let data = JSON.parse(localStorage.getItem('person')) || [];
    
    data.push(obj);
    
    localStorage.setItem('person', JSON.stringify(data));
    

    
    nameo.value = '';
    
    lastNameo.value = '';
    
    faceo.value = '';
    

    
    readData();
    
}
    
readData()
    

    
function readData() {
    
    list.innerHTML = '';
    
    let newData = JSON.parse(localStorage.getItem("person")) || [];
    
    newData.forEach(el => {
    
        let img = document.createElement('img');
    
        let h2Name = document.createElement('h2');
    
        let h2surName = document.createElement('h2');
    
        let btnX = document.createElement('button');
    
        let div = document.createElement('div');
    
        let editBtn = document.createElement('button')
    
        let btn = document.createElement('div')
    
        let text = document.createElement('div')
    
        let Alltext = document.createElement('div')
    

    
        editBtn.classList.add('editBtn')
    
        btn.classList.add('allBtn')
    
        text.classList.add('allText')
    
        Alltext.classList.add('UseBag')
    
        div.classList.add('headList')
    
        img.src += el.face;
    
        h2Name.innerText = 'Имя: ' + el.name;
    
        h2surName.innerText += 'Фамилия: ' + el.lastName;
    
        btnX.innerHTML += "<box-icon name='trash'></box-icon>";
    
        editBtn.innerHTML += "<box-icon name='pencil'></box-icon>"
    

    
        btn.append(editBtn)
    
        btn.append(btnX);
    

    
        text.append(h2Name);
    
        text.append(h2surName);
    
        Alltext.append(btn)
    
        Alltext.append(text);
    
        div.append(Alltext)
    
        div.append(img);
    
        list.append(div);
    
        btnX.addEventListener('click', () => {
    
            removeData(el.id);
    
        });
    
        editBtn.addEventListener('click', () => {
    
            editData(el.ind)
    
        })
    
    });
    
}
    

    
function removeData(id) {
    
    let data = JSON.parse(localStorage.getItem('person')) || [];
    
    data = data.filter(el => el.id !== id);
    
    localStorage.setItem('person', JSON.stringify(data));
    
    readData();
    
}
    
function editData(id) {
    
    let data = JSON.parse(localStorage.getItem('person')) || [];
    
    let index = data.findIndex(el => el.id === id);
    

    
    if (index !== -1) {
    
        name.value = data[index].name;
    
        lastName.value = data[index].lastName;
    
        face.value = data[index].face;
    
    }
    
}
    стили
    CSS
    body{
    
    margin: 0;
    
    padding: 0;
    
    background: #010002;
    
}
    
.container{
    
    display: flex;
    
    justify-content: center;
    
    position: relative;
    
    margin: 50px auto;
    
    width: 900px;
    
    height: 550px;
    
    background: #010002;
    
    border-radius: 20px;
    
}
    

    
.container:before,
    
.container:after{
    
    content: '';
    
    position: absolute;
    
    top: -2px;
    
    left: -2px;
    
    background: linear-gradient(45deg,#9c9c9c,#525252,#b8b8b8,#414141,#cfcfcf,#707070,#5c5c5c,#9e9e9e,#9c9c9c,#636369);
    
    background-size: 400% 400%;
    
    width: calc(100% + 6px);
    
    height: calc(100% + 6px);
    
    border-radius: 20px;
    
    z-index: -1;
    
    animation: animate 3s ease alternate infinite;
    
}
    
.container:after{
    
    filter: blur(6px);
    
    }
    
    @keyframes animate{
    
    0%{
    
        background-position: 0 50%;
    
    }
    
    50%{
    
        background-position: 100% 50%;
    
    }
    
    100%{
    
        background-position: 0% 50%;
    
    }
    
}
    
.inputBox{
    
    position: relative;
    
    width: 200px;
    
    margin-top: 10px;
    
    input{
    
        width: 100%;
    
        padding: 10px;
    
        border: 1px solid rgb(51, 51, 51);
    
        background: #0e0e0e;
    
        border-radius: 5px;
    
        outline: none;
    
        color: rgb(207, 207, 207);
    
        font-size: 1em;
    
        transition: 0.5s;
    
    }
    
    span{
    
        position: absolute;
    
        top: 1px;
    
        left: 0;
    
        padding: 10px;
    
        pointer-events: none;
    
        font-size: 0.9em;
    
        color: rgba(196, 196, 196, 0.527);
    
        text-transform: uppercase;
    
        transition: 0.5s;
    
    }
    
    input:valid ~  span,
    
    input:focus ~ span{
    
        color: #353535;
    
        transform: translateX(10px) translateY(-7px);
    
        font-size: 0.65em;
    
        padding: 0 10px;
    
        background: #868686;
    
        border-left: 1px solid #555555;
    
        border-right: 1px solid #646464;
    
        letter-spacing: 0.2em;
    
    }
    
    input:valid,
    
    input:focus{
    
        border: 1px solid #4e4e4e;
    
    }
    
}
    
.buttons {
    
    margin: 10%;
    
    text-align: center;
    
}
    

    
.btn-hover {
    
    width: 120px;
    
    font-size: 14px;
    
    font-weight: 300;
    
    color: #adadad;
    
    cursor: pointer;
    
    margin: 20px;
    
    height: 35px;
    
    text-align:center;
    
    border: none;
    
    background-size: 300% 100%;
    
    border-radius: 10px;
    
    moz-transition: all .4s ease-in-out;
    
    -o-transition: all .4s ease-in-out;
    
    -webkit-transition: all .4s ease-in-out;
    
    transition: all .4s ease-in-out;
    
}
    

    
.btn-hover:hover {
    
    background-position: 100% 0;
    
    moz-transition: all .4s ease-in-out;
    
    -o-transition: all .4s ease-in-out;
    
    -webkit-transition: all .4s ease-in-out;
    
    transition: all .4s ease-in-out;
    
}
    

    
.btn-hover:focus {
    
    outline: none;
    
}
    
.btn-hover{
    
    font-family: "Lucida Console", "Courier New", monospace;
    
    background-image: linear-gradient(to right, #747474, #363636, #505050, #2929298f);  box-shadow: 0 5px 15px rgba(73, 69, 69, 0.4);
    
}
    
.toDo{
    
    margin-left: 15px;
    
    display: flex;
    
    flex-direction: column;
    
    justify-content: center;
    
    align-items: center;
    
    margin-top: -90px;
    
    user-select: none;
    
    img{
    
        pointer-events: none;
    
    }
    
}
    

    
.list{
    
    display: flex;
    
    justify-content: center;
    
    flex-direction: column;
    
    width: 560px;
    
    height: 520px;
    
    user-select: none;
    
    margin-left: 60px;
    
    margin-top: 10px;
    
    border-radius: 5px;
    
    border: 2px solid #7c7c7c;
    
    .inner {
    
        width: 560px;
    
        height: 30px;
    
        border-bottom: 2.5px  solid #7c7c7c;
    
        h3{
    
            height: 40px;
    
            justify-content: center;
    
        margin-top: -3px;
    
        display: flex;
    
        align-items: center;
    
        font-family: "Lucida Console", "Courier New", monospace;
    
        color: #747474;
    
        }
    
    }
    
}
    
.people{
    
    display: flex;
    
    flex-direction: column;
    
    position: relative;
    
    top: 1px;
    
    width: 560px;
    
    height: 500px;
    
    overflow-y: scroll;
    
}
    
.people::-webkit-scrollbar{
    
    background-color: #2c2c2c;
    
    border-radius: 5px;
    
   
    
}
    
.people::-webkit-scrollbar-thumb{
    
    background-color: #636369;
    
}
    
.headList{
    
    display: flex;
    
    height: 70px;
    
    margin-top: 1px;
    
    border-bottom: 2px solid #636369;
    
    margin-bottom: 30px;
    
    justify-content: space-between;
    
    h2{
    
        position: relative;
    
        left: 50px;
    
        top: -19px;
    
        font-size: 18px;
    
        color: #777777;
    
        font-family: "Lucida Console", "Courier New", monospace;
    
    }
    
    img{
    
        border-radius: 10px;
    
        height: 60px;
    
        width: 60px;
    
        margin-top: 5px;
    
        margin-right: 5px;
    
    }
    
    .allText{
    
        padding-top: 10px;
    
    }
    
}
    
.allBtn{
    
    display: flex;
    
    flex-direction: column;
    
    position: relative;
    
    top: -38px;
    
   
    
    button{
    
        margin-bottom: 5px;
    
        border-radius: 4px;
    
        border: 1px solid #6e6e6e86;
    
        background: #414141;
    
        font-size: 15px;
    
        padding: 0 1px;
    
        position: relative;
    
        top: 40px;
    
        left: 10px;
    
    }
    
}
    
.UseBag{
    
    display: flex;
    
}
    и html
    HTML
    <!DOCTYPE html>
    
<html lang="en">
    

    
<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>To do</title>
    
    <link rel="stylesheet" href="/scss/style.css">
    
</head>
    

    
<body>
    
    <section>
    
        <div class="container">
    
            <div class="toDo">
    
                <img src="https://nztcdn.com/avatar/l/1697362284/2782162.webp" alt="photo">
    
                <div class="inputBox">
    
                    <input class="name" type="text" required="required">
    
                    <span>Имя</span>
    
                </div>
    
                <div class="inputBox">
    
                    <input class="surname" type="text" required="required">
    
                    <span>Фамилия</span>
    
                </div>
    
                <div class="inputBox">
    
                    <input class="face" type="text" required="required">
    
                    <span>фото URL лица</span>
    
                </div>
    
                <button class="btn-hover">Добавить</button>
    
            </div>
    
            <div class="list">
    
                <div class="inner">
    
                    <h3>список людей</h3>
    
                </div>
    
                <div class="people">
    

    
                </div>
    
            </div>
    
        </div>
    
    </section>
    
    <script src="/script.js"></script>
    
    <script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
    
</body>
    

    
</html>
     
    24 дек 2023 Изменено
Загрузка...
Top