Не могу понять как изменить конкретный элемент

268

23 января 2018, 10:35

Не могу понять как мне изменить конкретный элемент. Нашел задание реализовать книжную полку, не могу понять как мне изменить конкретную книгу, точнее я могу изменить только последнюю добавленную книгу. Как изменить другие книги?

вот код на HTML

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="style.css" rel="stylesheet" />
</head>
<body>
    <h1>Книжная полка</h1>
    <button id="add">Добавить</button>
    <div id="modal" class="modalWindow">
        <div class="modal-content">
            <h2>Добавление книги</h2>
            <label>Название книги</label>
            <br />
                <input class="valueBook" id="name" type="text" value=""/>
            <br />
            <label>Год выпуска</label><br />
                <input class="valueBook" id="year" type="number" value="" />
            <br />
            <label>Автор книги</label><br />
                <input class="valueBook" id="autor" type="text" value="" />
            <br />
            <label>Изображение</label><br />
                <input class="valueBook" id="img" type="text" value="" />
            <button id="addBook">Добавить</button>
            <button id="close">Отмена</button>
        </div>
    </div>
    <div class="testModal" id="testModal" >
        <div class="testModalInput">
            <h2>Редактирование</h2><label>Название книги</label><br />
            <input class="valueBook" id="nameI" type="text" value="" placeholder="Введите название"/>
            <br /><label>Год выпуска</label><br />
            <input class="valueBook" id="yearI" type="number" value="" />
            <br /><label>Автор</label><br />
            <input class="valueBook" id="autorI" type="text" value="" />
            <br /><label>Изображение</label><br />
            <input class="valueBook" id="imgI" type="text" value="" />
            <button id ="save">Сохранить</button>
            <button id="close">Отмена</button>
        </div>
    </div>
    <div id="main">
    </div>
    <!-- <script src="test.js"></script> -->
    <script src="YDNJS.js"></script>
</body>
</html>

Вот код JS

    var modal = document.getElementById('modal');
    //при нажатии делает видимым блок modal
    var vis = document.getElementById('add');
    vis.onclick = vision;
    function vision() {
        modal.style.display = 'block';
    }
    //при нажатии закрывает блок modal
    var invis = document.getElementById('close');
    invis.onclick = invisible;
    function invisible() {
        modal.style.display = "none";
    }
    //получаем нынешний год и записываем в переменную thisYear
    var Date = new Date();
    var thisYear = Date.getFullYear();
    var save = document.getElementById('save');
    save.onclick = saveFun;
    var count = 0;
    function saveFun() {
        var nameIt = document.getElementById('nameI').value;
        var imgIt = document.getElementById('imgI').value;
        var autorIt = document.getElementById('autorI').value;
        var yearIt = document. getElementById('yearI').value;
       var array = [];
       var inputs = document.getElementsByClassName('book');
    for(var i = count; i < inputs.length; i++){
        array.push(inputs[i].length);
        document.getElementById('nameP'+[i]).innerHTML = nameIt;
        document.getElementById('imgP'+[i]).innerHTML = imgIt;
        document.getElementById('yearP'+[i]).innerHTML = yearIt;
        document.getElementById('autorP'+[i]).innerHTML = autorIt;
    }

    document.getElementById('testModal').style.display = 'none';
    }
    var addBook = document.getElementById('addBook');
    addBook.onclick = addBookFun;

    var input = document.getElementsByTagName("input");

    //функция добавления книг (получилась всемогущая функция =( )
    function addBookFun (){
    var name = document.getElementById('name').value;
    var year = document.getElementById('year').value;
    //проверка правильности введенного года
    while (year>thisYear){
        year = prompt("Введен некорректный год");
    }
    var autor = document.getElementById('autor').value;
    var img = document.getElementById('img').value;


    var change = document.createElement('input');
    change.value = "Редактировать";
    change.id = "change";
    change.type = "button";
    change.onclick = function () {
        var testModal = document.getElementById('testModal');
        testModal.style.display = 'block';

        var n = document.getElementById('nameI');
        n.value = document.getElementById('nameP'+count).innerHTML;
        var i = document.getElementById('imgI');
        i.value =  document.getElementById('imgP'+count).innerHTML;
        var a = document.getElementById('autorI');
        a.value = document.getElementById('autorP'+count).innerHTML;
        var y = document.getElementById('yearI');
        y.value = document.getElementById('yearP'+count).innerHTML;}


    //создаем блок div и заносим данные в блок
    var elem = document.createElement("div");
    elem.className = "book";
    elem.innerHTML = '<img id="imgP'+count+'" src="'+img+'"/>'+
                    '<div id=some><h2 id="nameP'+count+'">'+ name +' </h2>'+
                    '<p id="autorP'+count+'">'+ autor +' </p>'+
                    '<p id="yearP'+count+'">'+ year +' г.</p></div>';
    count++;
    //кнопка редактирования книги
    var close = document.createElement('input');
    close.value = "Отмена";
    close.id = "close";
    close.type = "button";
    close.onclick = function () {
        testModal.style.display = "none";
    }
    //кнопка удаления блока div#book
    var deleteS = document.createElement('input');
    deleteS.value = "Удалить";
    deleteS.id = "delete";
    deleteS.type = "button";
    deleteS.onclick = function remove() {
        main.removeChild(elem);
    }
    var buttons = document.createElement('div');
    buttons.id = 'deleteChange';
    buttons.appendChild(change);
    buttons.appendChild(deleteS);
    elem.appendChild(buttons);
    modal.style.display = "none";
    var test = document.getElementsByClassName('valueBook');
    //очищаем поля ввода после добавления книги
    for (var i = 0; i<test.length; i++){
        input[i].value = "";
    }
    var firstElem = main.firstChild.nextSibling;
    main.insertBefore(elem, firstElem);
}

Понимаю, что код "вырви глаза", прошу прощения, но я уже не знаю придумать

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как увеличить ширину модальности в Angular2?

Для работы с модальным окном в Angular2 я использую ModalComponent, но проблема в том что если кол-во данных будет превышать нормы то появляется scroll,...

219

CSS