why isnt this code working? i just learned how to use js with html and css so im confused-CodePudding

heres the link to the website if you wanna see how it works https://mini-2.kodewithklossy.repl.co/ its supposed to show the original facts then use the button to switch between both fact pages

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' );
}; ```

CodePudding user response：

The problem is that you register two click event handlers on the same button.

button.on('click', showFacts);
button.on('click', hideFacts);

Each time the button gets clicked, they're both triggered, hideFacts will always be executed last.

You could instead register a single click event handler and execute either showFacts or hideFacts depending on the current state.

CodePudding user response：

If you put the tag inside another valid header tag like or tag, then the CSS won't work. The external style CAN be put inside the tag, although it's recommended to put it in the tag to load the style before the page content.