Article preview with JS

Community feedback

• 

  Mijail Hernandez•950

  @MishaHernandezPosted over 3 years ago

  Hello TrakaMeitene 👋

  1. Adding javascript in the html is not a good practice, but if the script is very small then there is no problem and rather it turns out to be more efficient.

  2. To change the button you just need to add to the script a constant that gets the button's id and then inside the condition where the button must change color add the styles. For example:

  var x = document.getElementById ("pop");
  const btnShare = document.getElementById ("btnShare")
     if (x.style.display === "none") {
       x.style.display = "block";
       btnShare.style.backgroundColor = "hsl(217, 19%, 35%)";
       btnShare.color = "white";
     } else {
       x.style.display = "none";
       btnShare.style.backgroundColor = "hsl(210, 46%, 95%)";
       btnShare.color = "";
     } 
  

  As additional observations:

  • To initialize a variable use const or let instead of var.
  • To add styles from javascript I recommend using classList which gives you more options. [HTML DOM classList Property] (https://www.w3schools.com/jsref/prop_element_classlist.asp)

  I hope I can help you with these recommendations. Happy Coding ✌

  1

  ---

  

  TrakaMeitene•505

  @TrakaMeitenePosted over 3 years ago

  @MishaHernandez <code> function myFunction() { const x = document.getElementById("pop"); if (x.style.display ="block") { x.classList.add("pop-content"); } }</code>

  I took off the <code> pop-content </code> class and made this script to test it's function. Made it a lot easier to understand.

  Thank You!

  1