Changing elements to lowercase issues-CodePudding

I'm building a dynamic list of trees that starts with Oak, Pine, Aspen, Bald Cypress.

Which includes a button to add a 'Redwood' tree to the end of the list, and a 'Pear' tree to the start of the list.

I then included a button that onclick would change the strings to lowercase but I can't seem to get it right. I know the push() method will add the lowercase strings to the end of the list but I can't figure out how to get rid of the old strings with uppercase letters, and it also keeps adding more items to the list when the button is pushed again. I also tried the map method, however it did not seem to work unless created a new variable.

    const trees = ['Oak', 'Pine', 'Aspen', 'Bald Cypress']

    const listTrees = () => {
        let treeList = ''
        trees.forEach(tree => {
            //console.log(tree)
            treeList  = `${tree} <br>`
        })
        displayResults.innerHTML = `${treeList} <span>${trees.length} elements 
        long</span>`
    }

    listTrees()

    * ------adding redwood to the end ------------*/
    document.querySelector('#add_redwood').onclick = () => {
        trees.push('Redwood')
        listTrees()
    }

    /* --------------------adding a pear to the start ----------------------*/
    document.querySelector('#add_pear').onclick = () => {
        trees.unshift('Pear')
        listTrees()
    }

    document.querySelector('#lowerTrees').onclick = () => {
        trees.forEach(tree => {
            trees.push(tree.toLowerCase())
        })
     listTrees()
     }

CodePudding user response：

Simply declare trees with let instead of const then reassign it. There is no reason for you to keep the original array reference in this case. Then you can use map(). You can also use map() for listTrees().

const displayResults = document.querySelector("#displayResults");

let trees = ['Oak', 'Pine', 'Aspen', 'Bald Cypress']

const listTrees = () => {
    let treeList = trees.map(tree => `${tree}<br>`).join("");
    displayResults.innerHTML = `${treeList} <span>${trees.length} elements long</span>`
}

listTrees()

/* ------adding redwood to the end------------ */
document.querySelector('#add_redwood').onclick = () => {
    trees.push('Redwood')
    listTrees()
}

/* --------------------adding a pear to the start ----------------------*/
document.querySelector('#add_pear').onclick = () => {
    trees.unshift('Pear')
    listTrees()
}

document.querySelector('#lowerTrees').onclick = () => {
    trees = trees.map(tree => tree.toLowerCase());
    listTrees();
}

<button id="add_redwood">Add Redwood</button>
<button id="add_pear">Add Pear</button>
<button id="lowerTrees">Lower Trees</button>
<div id="displayResults"></div>

If you really want to keep tree as const, use a regular for loop to change each element one by one instead.

for(let i = 0; i < trees.length; i  )
{
    trees[i] = trees[i].toLowerCase();
}

CodePudding user response：

Because you have to reassign lowercased values to HTML

 document.querySelector('#lowerTrees').onclick = () => {
    trees.forEach(tree => {
        trees.push(tree.toLowerCase())
    })
 listTrees()
 }