Skip to content
Advertisement

font size change onclick for more than on div

I have 10 div and when any one click on any div and then click on increment button then font size of that div should be increase.

It is working for single div. But I need for more than one div. When I remove getDate(), then it is working for one div.

I have to click on div and then click on increment or decrement tag.Then font size of that div should be increment or decrement.

function getDate(e) {
  var originalSize = $('#' + e).css('font-size');
}
$(document).ready(function() {
  //var originalSize = $('div').css('font-size');			

  $('#linkIncrease').click(function() {
    modifyFontSize('increase');
  });

  $('#linkDecrease').click(function() {
    modifyFontSize('decrease');
  });

  $('#linkReset').click(function() {
    modifyFontSize('reset');
  })

  function modifyFontSize(flag) {
    var divElement = $('#divContent');
    var currentFontSize = parseInt(divElement.css('font-size'));

    if (flag == 'increase')
      currentFontSize += 1;
    else if (flag == 'decrease')
      currentFontSize -= 1;
    else
      currentFontSize = 16;

    divElement.css('font-size', currentFontSize);
  }
});
.divClass {
  font-size: 12px;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<a id="linkIncrease" href="#"><b>+</b></a>

<a id="linkDecrease" href="#"><b>-</b></a>

<a id="linkReset" href="#"> <b>X</b></a>

<br /> <br />
<div id="divContent" class="divClass" onClick="getDate(this.id);"> Hello </div>
<br>
<div id="divContent1" class="divClass" onClick="getDate(this.id);"> Hello </div>

Advertisement

Answer

Version that increases only CLICKED div

It saves the original size on the div itself in a data attribute

I also bail out if nothing was clicked before plus or minus are clicked

let divElement;

function modifyFontSize(flag) {
  let $divElement = $("#" + divElement);
  if ($divElement.length === 0) console.log("Nothing selected")
  let currentFontSize = parseInt($divElement.css('font-size'));

  if (flag == 'increase')
    currentFontSize += 1;
  else if (flag == 'decrease')
    currentFontSize -= 1;
  else
    currentFontSize = $divElement.data("orgSize") || 16;

  $divElement.css('font-size', currentFontSize);
}

$(document).ready(function() {
  $(".divClass").on("click", function() {
    divElement = this.id;
    if (!$(this).data("orgSize")) $(this).data("orgSize", $(this).css('font-size'))
  })
  $('#linkIncrease').click(function() {
    modifyFontSize('increase');
  });

  $('#linkDecrease').click(function() {
    modifyFontSize('decrease');
  });

  $('#linkReset').click(function() {
    modifyFontSize('reset');
  })

});
.divClass {
  font-size: 12px;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<a id="linkIncrease" href="#"><b>+</b></a>

<a id="linkDecrease" href="#"><b>-</b></a>

<a id="linkReset" href="#"> <b>X</b></a>

<br /> <br />
<div id="divContent" class="divClass"> Hello </div>
<br>
<div id="divContent1" class="divClass"> Hello </div>
User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement