How do I increase font size of an entire tag-CodePudding

I'm running into an issue with an assignment. Part of the assignment is to increase the font size of a paragraph using jQuery or JavaScript.

The console statements seem to increase 1 every mouse click (the first click counts for 1, the second for two, etc).

Thanks.

function fontUp() {
  var fSize = document.getElementsByTagName('p');
  $('#font-up').click(function() {
    console.log('font-up clicked');
    fSize  ;
  });
}

function fontDn() {
  var fSize = document.getElementsByTagName('p');
  $('#font-dn').click(function() {
    console.log('font-down clicked');
    fSize--;
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="content">
    <p id='p1'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui iste deserunt voluptate unde, pariatur aliquam consequatur, aut neque accusamus consequuntur, odit velit exercitationem non eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
    <br>
    <p id='p2'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui iste deserunt voluptate unde, pariatur aliquam consequatur, aut neque accusamus consequuntur, odit velit exercitationem non eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
  </div>

  <div id="selectors">
    <button id="button1" class="color-button" onclick="changeColorRed()">Red</button>
    <button id="button2" class="color-button" onclick="changeColorBlue()">Blue</button>
    <button id="button3" class="color-button" onclick="changeColorGreen()">Green</button>

    <br>
    <br>

    <input id="red-input" class="input-box" type="text" placeholder="red"></input>
    <input id="green-input" class="input-box" type="text" placeholder="green"></input>
    <input id="blue-input" class="input-box" type="text" placeholder="blue"></input>

    <button id="rgb-button" class="color-button" onclick="changeRGB()">Change Background</button>

    <br>
    <br>

    <button id="font-up" onclick="fontUp()">Font Up</button>
    <button id="font-dn" onclick="fontDn()">Font Down</button>
  </div>
</div>

CodePudding user response：

I think you have to adjust your fontUp and fontDn function. It's right to get the elements with p tag, but then one of the way to achieve that is to loop all those elements, and then get each of their current font-size, and increment it by 1 on fontUp and decrement it by 1 on fontDown

Since the p elements itself doesn't have specific font-size style declared on the element, but instead in stylesheet, you can use getComputedStyle to get the font-size, here is more reference to that How To Get Font Size in HTML

function fontUp(){
    var fSize = document.getElementsByTagName('p');
    $('#font-up').click(function(){
        for(let i = 0; i < fSize.length; i  ) {
          let currentSize = window.getComputedStyle(fSize[i], null).getPropertyValue('font-size');
          fSize[i].style.fontSize = `${Number(currentSize.replace('px',''))   1}px`
        }
    });
}

function fontDn(){
    var fSize = document.getElementsByTagName('p');
    $('#font-dn').click(function(){
        for(let i = 0; i < fSize.length; i  ) {
          let currentSize = window.getComputedStyle(fSize[i], null).getPropertyValue('font-size');
          fSize[i].style.fontSize = `${Number(currentSize.replace('px','')) - 1}px`
        }
    });
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"> 
    <div id="content">
        <p id='p1'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
            Qui iste deserunt voluptate unde, pariatur aliquam consequatur, 
            aut neque accusamus consequuntur, odit velit exercitationem non 
            eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
            <br>
        <p id='p2'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
            Qui iste deserunt voluptate unde, pariatur aliquam consequatur, 
            aut neque accusamus consequuntur, odit velit exercitationem non 
            eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
    </div>

    <div id="selectors">
        <button id="button1" class="color-button" onclick="changeColorRed()">Red</button>
        <button id="button2" class="color-button" onclick="changeColorBlue()">Blue</button>
        <button id="button3" class="color-button" onclick="changeColorGreen()">Green</button>

        <br>
        <br>

        <input id="red-input" class="input-box" type="text" placeholder="red"></input>
        <input id="green-input" class="input-box" type="text" placeholder="green"></input>
        <input id="blue-input" class="input-box" type="text" placeholder="blue"></input>
        
        <button id="rgb-button" class="color-button" onclick="changeRGB()">Change Background</button>

        <br>
        <br>

        <button id="font-up" onclick="fontUp()">Font Up</button>
        <button id="font-dn" onclick="fontDn()">Font Down</button>
    </div>
</div>

CodePudding user response：

First, inputs are self-closing, so you don't need the </input> at the end.

Outside that, as pointed out in comments, you're just grabbing all p elements, and trying to perform an increment or decrement operator on the array of elements, which won't do anything. You'd want to get the current font size as a number (you can either use replace(/[^0-9]/g, '') on the font size or just parseInt() to remove the px, then increment/decrement, then assign it back to the paragraphs.

function fontUp(){
  //get the current font-size as an integer
  var fSize = parseInt($('p').css('font-size'));
  //use a pre-increment operator to add one to the font size and assign it to the paragraphs at the same time
  $('p').css('font-size',   fSize);
}

function fontDn(){
  var fSize = parseInt($('p').css('font-size'));
  $('p').css('font-size', --fSize);
}

https://jsfiddle.net/n2ydp458/

Edit: I answered a bit too quick and left your event listeners that were being mapped inside event listeners in there. I've removed them now.

CodePudding user response：

Consider the following.

$(function() {
  var fonts = [
    "font-sm",
    "font-md",
    "font-rg",
    "font-lg",
    "font-xl"
  ];

  var fSize = 2;

  function findFont(i, c) {
    if (c.indexOf("font") === 0) {
      return c;
    }
  }

  function changeFont(dir) {
    if (dir == "up") {
      fSize  ;
    } else {
      fSize--;
    }
    if (fSize < 0) {
      fSize = 0;
    }
    if (fSize >= fonts.length - 1) {
      fSize = fonts.length - 1;
    }
    $("#content p").removeClass(findFont).addClass(fonts[fSize]);
  }

  function changeColor(cName) {
    $("#content p").removeClass("red blue green").addClass(cName);
  }

  $("button[id^='font']").click(function() {
    if ($(this).is("#font-up")) {
      changeFont("up");
    } else {
      changeFont("down");
    }
    console.log("Font Change", fonts[fSize]);
  });

  $(".color-button").click(function() {
    changeColor($(this).val());
    console.log("Color Changed", $(this).val());
  });
});

.font-1,
.font-sm {
  font-size: 11px;
}

.font-2,
.font-md {
  font-size: 12px;
}

.font-3,
.font-rg {
  font-size: 14px;
}

.font-4,
.font-lg {
  font-size: 18px;
}

.font-5,
.font-xl {
  font-size: 24px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

#selectors input {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="content">
    <p id='p1' class="font-rg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui iste deserunt voluptate unde, pariatur aliquam consequatur, aut neque accusamus consequuntur, odit velit exercitationem non eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
    <p id='p2' class="font-rg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui iste deserunt voluptate unde, pariatur aliquam consequatur, aut neque accusamus consequuntur, odit velit exercitationem non eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
  </div>
  <div id="selectors">
    <button id="button1" class="color-button" value="red">Red</button>
    <button id="button2" class="color-button" value="blue">Blue</button>
    <button id="button3" class="color-button" value="green">Green</button>
    <input id="red-input" class="input-box" type="text" placeholder="red" />
    <input id="green-input" class="input-box" type="text" placeholder="green" />
    <input id="blue-input" class="input-box" type="text" placeholder="blue" />
    <button id="rgb-button" class="color-button" onclick="changeRGB()">Change Background</button>
    <button id="font-up">Font Up</button>
    <button id="font-dn">Font Down</button>
  </div>
</div>

This lets you control the Font Sizes via CSS. It also ensure that the User cannot decrease or increase the font size too much. You can define your own Class names or how many you want. You also get to define the sizes as you want as well.

See more:

https://api.jquery.com/removeClass/#removeClass-function