Toggling Functions With Event-listeners-CodePudding

I'm currently working on a font size changer for a website and it "works" but is not user-friendly. Right now I have it set up to on click remove the event listeners from the other id's (smBtn On, mdBtn Gone, lgBtn Gone) and return them when none is pressed. Where in actuality, I want it when upon button press it just turns the others off. So I guess my question is how do I toggle my functions

My Idea: One Button is ON forces the other two OFF, when clicked off forces all off Example (Med ON, Sm OFF Lg OFF) (Sm ON, Med OFF, Lg ON) (All OFF)

//Countp and Findp are used in a loop to find all the P tags on a page and then give them the class size
var countP = document.getElementsByTagName('P')
var i;
for (i = 0; i < countP.length; i  ) {
  var findP = document.getElementsByTagName('P')[i];
  findP.setAttribute('class', 'size');
}

//these are all the buttons used to active the functions
document.getElementById("smBtn").addEventListener("click", smallTxt);
document.getElementById("mdBtn").addEventListener("click", mediumTxt);
document.getElementById("lgBtn").addEventListener("click", largeTxt);

//All the functions use the same code just changed Id's and class names that match the small,med,large 

function smallTxt() {
  // finds all P tags with the Class name Size and then adds the css small
  var smButton = document.getElementById("smBtn");

  for (i = 0; i < countP.length; i  ) {
    var smWords = document.getElementsByClassName("size");
    [i];
    smWords[i].classList.toggle("small");
  }

  //toggles the css only
  smButton.classList.toggle("clicked");

  //this is to prevent the other sizes from being clicked by removing the function and when not in use add the functions back
  if (smButton.className == "clicked") {
    document.getElementById("mdBtn").removeEventListener("click", mediumTxt);
    document.getElementById("lgBtn").removeEventListener("click", largeTxt);
  } else {
    document.getElementById("mdBtn").addEventListener("click", mediumTxt);
    document.getElementById("lgBtn").addEventListener("click", largeTxt);
  }
}

function mediumTxt() {
  var medButton = document.getElementById("mdBtn");

  for (i = 0; i < countP.length; i  ) {
    var medWords = document.getElementsByClassName("size");
    [i];
    medWords[i].classList.toggle("medium");
  }

  medButton.classList.toggle("clicked");

  if (medButton.className == "clicked") {
    document.getElementById("smBtn").removeEventListener("click", smallTxt);
    document.getElementById("lgBtn").removeEventListener("click", largeTxt);
  } else {
    document.getElementById("smBtn").addEventListener("click", smallTxt);
    document.getElementById("lgBtn").addEventListener("click", largeTxt);
  }
}

function largeTxt() {
  var lgButton = document.getElementById("lgBtn");

  for (i = 0; i < countP.length; i  ) {
    var lgWords = document.getElementsByClassName("size");
    [i];
    lgWords[i].classList.toggle("large");
  }

  lgButton.classList.toggle("clicked");

  if (lgButton.className == "clicked") {
    document.getElementById("mdBtn").removeEventListener("click", mediumTxt);
    document.getElementById("smBtn").removeEventListener("click", smallTxt);
  } else {
    document.getElementById("mdBtn").addEventListener("click", mediumTxt);
    document.getElementById("smBtn").addEventListener("click", smallTxt);
  }
}

.small {
  font-size: 10px;
}

.medium {
  font-size: 20px;
}

.large {
  font-size: 30px;
}

.clicked {
  color: #012169;
  text-shadow: 2px 2px 4px #000000;
}

ul li {
  display: inline-block;
}

<h2>Font Text Changer V2</h2>

<p>Click on one of the a's next to font size to change the size of the text, only one A can be active at a time their for must turn it off to use other sizes</p>

<p>Developer Idea:One Button is ON forces the other two OFF, when clicked off forces all off Example (Med ON, Sm OFF Lg OFF) (Sm ON, Med OFF, Lg ON) (All OFF) </p>

<p> Beneath is how you test the the function</p>

<ul>
  <li style="font-size:14px">Font size:</li>
  <li id="smBtn" style="font-size:13px">A</li>
  <li id="mdBtn" style="font-size:17px">A</li>
  <li id="lgBtn" style="font-size:20px">A</li>
</ul>

CodePudding user response：

An easier way would be to change the font-size of the html tag by adding classes with javascript. Then all child elements will follow. I.E.:

html {
 font-size: 100%; //16px
}

html.small {
 font-size: 75% //12px
}

html.big {
 font-size: 125% //20px
}

CodePudding user response：

I would delegate

document.querySelectorAll('P').forEach(p => p.setAttribute('class', 'size'));

document.getElementById("fontList").addEventListener("click", function(e) {
  const tgt = e.target.closest(".btn");
  if (tgt) {
    let clicked = this.querySelector(".clicked")
    if (clicked && clicked != tgt) return; // you need to click again
    tgt.classList.toggle("clicked"); // toggle on and off
    clicked = this.querySelector(".clicked"); // find the one clicked 
    document.querySelectorAll(".size").forEach(p => {
      if (clicked) p.classList.toggle(clicked.dataset.size); // add or remove
      else p.className = "size"; // remove all
    })  
  }
})

.small {
  font-size: 10px;
}

.medium {
  font-size: 20px;
}

.large {
  font-size: 30px;
}

.clicked {
  color: #012169;
  text-shadow: 2px 2px 4px #000000;
}

ul li {
  display: inline-block;
}

<h2>Font Text Changer V2</h2>

<p>Click on one of the a's next to font size to change the size of the text, only one A can be active at a time their for must turn it off to use other sizes</p>

<p>Developer Idea:One Button is ON forces the other two OFF, when clicked off forces all off Example (Med ON, Sm OFF Lg OFF) (Sm ON, Med OFF, Lg ON) (All OFF) </p>

<p> Beneath is how you test the the function</p>

<ul id="fontList">
  <li style="font-size:14px">Font size:</li>
  <li  data-size="small" style="font-size:13px">A</li>
  <li  data-size="medium" style="font-size:17px">A</li>
  <li  data-size="large" style="font-size:20px">A</li>
</ul>

CodePudding user response：

Selecting fonts from li elements is not ideal but in this particular setup one way of doing the job could be;

var choices = document.querySelectorAll("li:nth-child(n 2)"),
    context = document.querySelectorAll("p");

choices.forEach(choice => choice.addEventListener("click", e => context.forEach(p => p.style.fontSize = e.target.style.fontSize)));

<h2>Font Text Changer V2</h2>

<p>Click on one of the a's next to font size to change the size of the text, only one A can be active at a time their for must turn it off to use other sizes</p>

<p>Developer Idea:One Button is ON forces the other two OFF, when clicked off forces all off Example (Med ON, Sm OFF Lg OFF) (Sm ON, Med OFF, Lg ON) (All OFF) </p>

<p> Beneath is how you test the the function</p>

<ul>
  <li style="font-size:14px">Font size:</li>
  <li id="smBtn" style="font-size:13px">A</li>
  <li id="mdBtn" style="font-size:17px">A</li>
  <li id="lgBtn" style="font-size:20px">A</li>
</ul>