Intento hacer todos los árboles después de clasificarlos en minúsculas, pero por alguna razón, ¡no puedo hacer que las minúsculas en listTree() funcionen! Sé que minúsculas () deben pegarse en una función para que funcione con la matriz. Pero no estoy seguro de cómo agregar a la función listTrees(). ¿Necesitamos usar la declaración if-else?
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!' } }toLowerCase() solo se usa con cadenas aquí está usando toLowerCase() con matriz. Si desea que todos los elementos de la matriz estén en minúsculas, debe transformar cada elemento de la matriz de esa manera:
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!' }}Para hacer una matriz completa de letras minúsculas, debe iterar a través de los árboles usando array.map() y llamar toLowerCase() en cada cadena:
const trees = ['oak', 'Pine', 'aspen', 'Bald Cypress'] const lowerCaseTrees = trees.map(tree => tree.toLowerCase()) Introdúzcalo en su código cambiando ligeramente listTrees() , desea pasar los árboles como argumento para que sea dinámico:
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> Aquí hay un oneliner útil (útil para arreglos pequeños <1000 elementos) para hacer un árbol completo en lowerCase() . Esto funciona siempre que sus árboles no tengan '##' en su nombre.
var trees = ['oak', 'Pine', 'aspen', 'Bald Cypress'] var lowerCaseTrees = trees.join('##').toLowerCase().split('##') console.log(lowerCaseTrees )