html - JavaScript onclick() text size increase with EventListener

I am trying to implement the following to increase text size based on button click. I am trying to use one handler for this. The idea is to increase/decrease the fontsize for the text in "demo" area by +/-5 px. But I am not getting the desired result.

<html>
    <body>
        <p>Change font size</p>
        <div id="main_area1">
            <button id="button1" value="larger" type="button" onclick="changeFontSize(this)">Larger</button>
        </div>
        <div id="main_area2">
            <button id="button2" vale="smaller" type="button" onclick="changeFontSize(this)">Smaller</button>
        </div>
        <div>
            <p id="demo">HOW_BIG_OR_SMALL_AM_I</p>
        </div>
        <script>
            function changeFontSize(target) {
                if (target == document.getElementById("button1")) {
                    document.getElementById("demo").style.fontSize = document.getElementById("demo").style.fontSize + "5px";
                } else if (target == document.getElementById("button2")) {
                    document.getElementById("demo").style.fontSize = document.getElementById("demo").style.fontSize + "-5px";
                }
            }
        </script>
    </body>
</html>

<html>
    <body>
        <p>Change font size</p>
        <div id="main_area1">
            <button id="button1" value="larger" type="button" onclick="changeFontSize(this)">Larger</button>
        </div>
        <div id="main_area2">
            <button id="button2" vale="smaller" type="button" onclick="changeFontSize(this)">Smaller</button>
        </div>
        <div>
            <p id="demo">HOW_BIG_OR_SMALL_AM_I</p>
        </div>
        <script>
            function changeFontSize(target) {
                if (target == document.getElementById("button1")) {
                    document.getElementById("demo").style.fontSize = document.getElementById("demo").style.fontSize + "5px";
                } else if (target == document.getElementById("button2")) {
                    document.getElementById("demo").style.fontSize = document.getElementById("demo").style.fontSize + "-5px";
                }
            }
        </script>
    </body>
</html>

When I checked it in developers console, I see that my target has the same value as button1. But I cannot see the font size increasing (same is true for button2).

I tried to use my java knowledge as much as I can, but not getting anywhere. I think I might be using the wrong element Id or I am not registering the handler correctly.

Any help or kind suggestion is appreciated ! Thanks.

Share Improve this question edited Oct 30, 2014 at 15:19 asked Oct 30, 2014 at 12:07 ha9u63a7 6,88818 gold badges86 silver badges125 bronze badges

1 Your demo DIV doesn't have a font-size style. So .style.fontSize is returning an empty string, and then you're appending 5px to it. – Barmar Commented Oct 30, 2014 at 12:12

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

A couple of points:

The style object won't have values that are applied via stylesheets; to get those, on a standards-pliant browser you use getComputedStyle. (On older IE, you use the currentStyle property.)
You need to parse the value you get, because it's a string.
Any time you find yourself repeatedly writing the same thing over and over, consider whether to do it once and remember it in a variable.

This does the trick on standards-pliant browsers and should work on older IE as well:

function changeFontSize(target) {
  var demo = document.getElementById("demo");
  var putedStyle = window.getComputedStyle
        ? getComputedStyle(demo) // Standards
        : demo.currentStyle;     // Old IE
  var fontSize;

  if (putedStyle) { // This will be true on nearly all browsers
      fontSize = parseFloat(putedStyle && putedStyle.fontSize);

      if (target == document.getElementById("button1")) {
        fontSize += 5;
      } else if (target == document.getElementById("button2")) {
        fontSize -= 5;
      }
      demo.style.fontSize = fontSize + "px";
  }
}

<p>Change font size</p>
<div id="main_area1">
  <button id="button1" value="larger" type="button" onclick="changeFontSize(this)">Larger</button>
</div>
<div id="main_area2">
  <button id="button2" vale="smaller" type="button" onclick="changeFontSize(this)">Smaller</button>
</div>
<div>
  <p id="demo">HOW_BIG_OR_SMALL_AM_I</p>
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - JavaScript onclick() text size increase with EventListener - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)