Помогите с функцией в JavaScript

Question

Мне нужно задать функцию onClickBtnDownload(), так чтобы когда я нажымал на кнопку Download и у меня загружался и открывался файл с заполнеными введенными item`ами в даном формате.

Я написал код для этого, но он не работает. Работаю в VS Code. Помогите разобратся или что-то исправить в коде JS. Можете попробовать сделать своим способом или напишите, что нужно исправить Код HTML

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link rel="stylesheet" href="main.css">
    <script defer src="main.js"></script>
</head>
<body>
    <div class="container">
        <div class="row new-item-row">
            <label>New item: </label> 
            <input id="txtNewItem" class="textbox"/>
            <input id="btnAdd" type="button" value="Add" class="btn"/>
        </div>
        <div class="row">
            <div id="addedItems" class="content-container">
                <div class="proto">
                    <div class="item-box" data-value="">
                        <div class="lblText"></div>
                        <div class="btnRemove">✕</div>
                    </div>                        
                </div>                     
            </div>
        </div>
        <div class="row bottom-panel">
            <input id="btnDownload" type="button" value="Download" class="btn"/>           
        </div>
    </div>
</body>
</html>

Код JS

(function(target){

    // Q001
    target.addEventListener('load', onPageLoaded);

    function onPageLoaded() {
        console.log('The page is fully loaded');

        const btnAdd = document.getElementById('btnAdd');
        btnAdd.addEventListener('click', onClickBtnAdd);

        const btnDownload = document.getElementById('btnDownload');
        btnDownload.addEventListener('click', onClickBtnDownload);
    }

    function onClickBtnAdd(){
        let newItem = document.querySelector('#txtNewItem');
        let newValue = newItem.value;
        if(newValue == ''){
            alert("Please enter value");
            return;
        }
        newItem.value = '';
        addNewBoxItem(newValue);
    }

    function onClickBtnRemove(event) {
        const boxItem = event.srcElement.closest('.item-box');
        boxItem.remove();
    }

    function addNewBoxItem(value) {
        let container = document.querySelector("#addedItems");
        
        let protoInnerElem = document.querySelector("#addedItems .proto .item-box")
            .cloneNode(true);
        
        protoInnerElem.setAttribute('data-value', value);
    
        let titleElem = protoInnerElem.querySelector('.lblText');
        titleElem.append(value);
    
        let btnRemoveElem = protoInnerElem.querySelector('.btnRemove');
        btnRemoveElem.addEventListener('click', onClickBtnRemove)
    
        container.append(protoInnerElem);
    }    
    function createFileAndDownload(fileName, content){
        var element = document.createElement('a');
        element.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(content)}`);
        element.setAttribute('download', fileName);
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
    } 

    function onClickBtnDownload() {
    let newitem = [document.querySelectorAll("#addedItems > .item-box")];     
        newitem.forEach(element => {
        getAttribute('data-value');
        element.sort(); 
        });
        let content = [];
        for(let i = 0; i < newitem.length; i++){
            let newItem = (i+1) + " " + newitem[i];
            content.push(newItem);
            }
            createFileAndDownload('Products', content);     
    
    }

})(this);

Код CSS

* {
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif
}

body{
    width: 40%;
    max-width: 400px;
    margin: 30px auto 10px;
}

.container {
    display: flex;
    flex-direction: column;
}

.row {
    margin: 5px;
    display: inherit;
    flex-direction: row;
    justify-content: stretch;
}

.new-item-row{
    color: darkblue;
}

.textbox {
    width: 100%;
    border: 2px solid darkblue;
    border-right: 0px;
}

.btn {
    background-color: #ffffff;
    border: 2px solid darkblue;
    cursor: pointer;
    padding: 5px;
    text-transform: uppercase;
}

.content-container{
    width: 100%;
}

.item-box {
    margin-top: 5px;
    border: 1px solid;    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid darkblue;
}

.item-box > div {
    margin: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 150px;
    flex-basis: 90%;
}

.item-box > .btnRemove {           
    cursor: pointer;
    font-weight: 800;
    flex-basis: 10%;
}

.item-box > .btnRemove:hover {
    color: blue;
}

.item-box > .btnRemove:active {
    color: brown;
}

.proto {
    display: none;
}

.bottom-panel {
    justify-content: flex-end;
}

Answer 1

function onClickBtnDownload() {
    const divs = document.querySelectorAll(".item.box");
    const values = [];
    for (let i = 1; i < divs.length; i++) {
        value = divs[i].getAttribute('data-value');
        values.push(value);
    }
    sortedValues = values.sort();
    content = [];
    for (let i = 0; i < sortedValues.length; i++) {
        element = sortedValues[i];
        formattedElement = `${i+1}. ${element}\n`;
        //let newItem = (i+1) + " " + sortedValues[i];
        content.push(formattedElement);
    }
    console.log(content);
    createFileAndDownload('Programming Languages', content.join(''));
    }

БЛОГ НА HUSL

Помогите с функцией в JavaScript

Ответы (1 шт):