Crea un botón que funcione como una búsqueda a árboles y que lleve directo a la imagen del árbol
Aquí te muestro un ejemplo de cómo crear un botón que funcione como una búsqueda a árboles y que lleve directo a la imagen del árbol en Javascript. **Estructura del árbol** Primero, definimos la estructura del árbol. En este caso, utilizaremos un objeto que represente cada nodo del árbol. Cada nodo tendrá un valor (el nombre del árbol) y un objeto que represente sus hijos. ```javascript class Nodo { constructor(valor, hijos = {}) { this.valor = valor; this.hijos = hijos; } } ``` **Crear el árbol** Luego, creamos el árbol. En este caso, crearemos un árbol con los siguientes nodos: * Raíz: "Árboles" * Hijo 1: "Pino" * Hijo 2: "Roble" * Hijo 3: "Cedro" * Hijo 4: "Palo" * Hijo 5: "Ciprés" ```javascript const raiz = new Nodo("Árboles", { pino: new Nodo("Pino"), roble: new Nodo("Roble"), cedro: new Nodo("Cedro"), palo: new Nodo("Palo"), cipres: new Nodo("Ciprés") }); ``` **Función de búsqueda** Ahora, creamos una función que busque un nodo en el árbol. Esta función recibirá el valor del nodo que queremos buscar y el nodo actual en el que estamos buscando. ```javascript function buscar(nodo, valor) { if (nodo.valor === valor) { // Si el valor coincide, devolvemos el nodo return nodo; } else { // Si el valor no coincide, buscamos en los hijos del nodo for (const hijo in nodo.hijos) { const resultado = buscar(nodo.hijos[hijo], valor); if (resultado) { // Si encontramos el nodo, devolvemos el resultado return resultado; } } // Si no encontramos el nodo, devolvemos null return null; } } ``` **Función para mostrar la imagen del árbol** Finalmente, creamos una función que muestre la imagen del árbol. En este caso, utilizaremos una función que reciba el valor del árbol y muestre la imagen correspondiente. ```javascript function mostrarImagen(valor) { // Aquí iría el código para mostrar la imagen del árbol // Por ejemplo, podemos utilizar la API de Google Images const url = `https://www.google.com/search?q=${valor}&tbm=isch`; window.open(url, "_blank"); } ``` **Botón de búsqueda** Ahora, creamos el botón de búsqueda. En este caso, utilizaremos un botón que reciba el valor del árbol y llame a la función de búsqueda. ```javascript const boton = document.getElementById("boton"); boton.addEventListener("click", () => { const valor = document.getElementById("input").value; const nodo = buscar(raiz, valor); if (nodo) { mostrarImagen(nodo.valor); } else { alert("No se encontró el árbol"); } }); ``` **HTML** Finalmente, creamos el HTML para el botón y el input. ```html <input id="input" type="text" placeholder="Buscar árbol"> <button id="boton">Buscar</button> ``` **Ejemplo de uso** Para utilizar el botón de búsqueda, simplemente ingresa el valor del árbol en el input y haz clic en el botón. Si el árbol existe, se mostrará la imagen correspondiente. Si no existe, se mostrará un mensaje de error.