Javascript Changing Lower case to an array after adding more item to the array?-CodePudding

I try to make all the trees after sorting to lowercase but For some reason, I cannot make the lower case to the listTree() work! I know that to lowercase() need to be pasted in a function in order for it to work with the array. But I am not sure how to add to the listTrees() function. Do we need to use if-else statement?

const trees = ['oak', 'Pine', 'aspen', 'Bald Cypress']

const errorElement = document.querySelector('#error')
const displayResults = document.querySelector('#displayResults')



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

}

listTrees()


document.querySelector('#lowerTrees').onclick = () => {
    if (trees.length > 0) {
        trees.lowercase()
        listTrees()
    }
    else {
        errorElement.textContent = 'Dude, I cannot remove the last tree cause there are NO TREES!'
    }
    
}

CodePudding user response：

toLowerCase() is only used with strings here you are using toLowerCase() with array. If you want all array items to be in lowercase you need to transform each array items like that:

document.querySelector('#lowerTrees').onclick = () => {
if (trees.length > 0) {
    trees.map((el, i) => {
       trees[i] = el.toLowerCase()
    });
    listTrees()
}
else {
    errorElement.textContent = 'Dude, I cannot remove the last tree cause there are NO TREES!'
}}

CodePudding user response：

For making a whole array lowerCase letters you have to iterate through the trees using array.map() and call toLowerCase() on each string:

const trees = ['oak', 'Pine', 'aspen', 'Bald Cypress']
const lowerCaseTrees = trees.map(tree => tree.toLowerCase())

Introduce it into your code by changing listTrees() slightly, you want to pass the trees as argument to it for having it dynamic:

var trees = ['oak', 'Pine', 'aspen', 'Bald Cypress']

const errorElement = document.querySelector('#error')
const displayResults = document.querySelector('#displayResults')

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

}

// show the trees as they are
listTrees()


document.querySelector('#sortTrees').onclick = () => {
    if (trees.length > 0) {
        trees.sort()
        listTrees()
    }
    else {
        errorElement.textContent = 'No Tree'
    }
    
}

document.querySelector('#lowerTrees').onclick = () => {
    if (trees.length > 0) {
        trees = trees.map(tree => tree.toLowerCase())
        listTrees()
    }
    else {
        errorElement.textContent = 'Dude, I cannot remove the last tree cause there are NO TREES!'
    }
    
}

<article>
    <button id="sortTrees">Sort the trees A>Z</button>
    <button id="lowerTrees">Make all tress lower case</button>
</article>
<aside>
    <div id="displayResults"> </div>
    <div id="error"></div>
</aside>

Here is a handy oneliner (useful for small arrays < 1000 elements) for making whole tree to lowerCase(). This works aslong your trees will not have '##' in its name.

var trees = ['oak', 'Pine', 'aspen', 'Bald Cypress']
var lowerCaseTrees = trees.join('##').toLowerCase().split('##')
console.log(lowerCaseTrees )