se supone que debe mostrar los hechos originales, luego use el botón para cambiar entre ambas páginas de hechos, pero algunos de los cambios de css no funcionan y cambiar la imagen a la original tampoco funciona
var par1 = $('.p1'); var par2 = $('.p2'); var par3 = $('.p3'); var button = $('button'); var picture = $('img') var body = $('body') button.on('click', showFacts); button.on('click', hideFacts); function showFacts () { Header.text('Tree Facts'); par1.text('Trees can help to reduce stress'); par2.text("Trees are the longest living organisms on Earth, and never die of old age."); par3.text('Planting trees can help reduce your energy costs.'); picture.attr('src', 'https://cdn.shopify.com/s/files/1/0212/1030/0480/products/91cnlaObmbL._SL1500.jpg?v=1627168523'); button.text('hide the secrets!'); Header.css('color', 'darkolivegreen'); button.css('background-color', 'darkolivegreen'); body.css('background-color', 'lightsalmon'); button.css('border', '2px', 'solid', 'black'); }; function hideFacts() { Header.text('Puppy Facts'); par1.text('They spend 15–20 hours a day sleeping.'); par2.text('Puppies can be twins!'); par.text('Puppies become adults when they turn one.'); picture.attr('src', 'https://www.cbc.ca/kidscbc2/content/the_feed/fact-2-puppies-sleep-compressor.jpg'); button.text('show me the secrets!'); Header.css('color', 'mediumblue'); button.css('background-color', 'cornflowerblue'); body.css('background-color', 'white'); button.css('border', '2px', 'solid', 'mediumblue' ); }; ```El problema es que registra dos controladores de eventos de click en el mismo botón.
button.on('click', showFacts); button.on('click', hideFacts); Cada vez que se hace clic en el botón, ambos se activan, hideFacts siempre se ejecutará en último lugar.
En su lugar, podría registrar un controlador de eventos de un solo click y ejecutar showFacts u hideFacts según el estado actual.