Error: Unable to access the property 'fontSize' as it is undefined

Question

Error: Unable to access the property 'fontSize' as it is undefined

<!DOCTYPE HTML>
<html>
    <head>
        <title>Interactive Web Page</title>
        <link id="mycss" rel="stylesheet" href="mycss.css">
        <script>

            function resizeText(size) {
                var styleSheet = document.getElementById('mycss').href;
                if (styleSheet.style.fontSize == '2.0em') { 
                    styleSheet.style.fontSize = parseFloat(styleSheet.style.fontSize) + (size * 0.2) + "em";
                } else if (styleSheet.style.fontSize == '3.0em'){
                    styleSheet.style.fontSize = parseFloat(styleSheet.style.fontSize) + (size * 0.3) + "em";
                }
            }

        </script>
    </head>
    <body id="theBody" class="theBod">
        <h1 id="h1" onclick="clickChange();">Hello</h1>
        <p id="para1" class="para1" onclick="resizeText(1);">Here is some text with a different size (click)<p>
        <p id="para2" class="para2" onclick="resizeText(2)">More text with another size on click.<p>
        <p id="demo" onclick="countToNum()"> Numbers (Click): </p>
    </body>
</html>

I am creating a web page where the text size increases when an element is clicked based on the specified parameter in the onclick function. This functionality modifies content using an external stylesheet.

#para1 {
    font-size: 2.0em;
}

#para2{
    font-size: 3.0em;
}

The error message "Cannot read property 'fontSize' of undefined," keeps appearing, but I want the JavaScript to only enlarge the clicked element while keeping others unaffected. Any assistance would be highly appreciated as I struggle with JavaScript coding.

javascript html css dom

Answer 1

Answer №1

The main idea:

All I want is to have the javascript respond and enlarge only the clicked element

In order to achieve this, there is no need to access the stylesheet; instead, simply access the style information of the element that was clicked:

<p onclick="resize(this)">...</p>

Next,

function resize(element) {
    var elementStyle = element.currentStyle || getComputedStyle(element);
    // Access and possibly modify elementStyle.fontSize here
}

Regarding the code in your query: This line:

var styleSheet = document.getElementById('mycss').href;

Returns a string with the URL of the stylesheet. It does not retrieve the actual stylesheet. Since strings do not have a style property, styleSheet.style will be undefined, and attempting to read styleSheet.style.fontSize will fail as you are trying to access a property from undefined.

If you wish to access the stylesheet information, you should search for the stylesheet within the document.styleSheets collection.

Alternatively, based on the HTML5 specification, HTMLLinkElement implements the LinkStyle interface defined by CSSOM, which implies that on compliant browsers, you could utilize this method to access the stylesheet:

var styleSheet = document.getElementById('mycss').sheet;

I personally have not attempted this, but rather followed the guidance provided in the specifications.

Answer 2

The main idea:

All I want is to have the javascript respond and enlarge only the clicked element

In order to achieve this, there is no need to access the stylesheet; instead, simply access the style information of the element that was clicked:

<p onclick="resize(this)">...</p>

Next,

function resize(element) {
    var elementStyle = element.currentStyle || getComputedStyle(element);
    // Access and possibly modify elementStyle.fontSize here
}

Regarding the code in your query: This line:

var styleSheet = document.getElementById('mycss').href;

Returns a string with the URL of the stylesheet. It does not retrieve the actual stylesheet. Since strings do not have a style property, styleSheet.style will be undefined, and attempting to read styleSheet.style.fontSize will fail as you are trying to access a property from undefined.

If you wish to access the stylesheet information, you should search for the stylesheet within the document.styleSheets collection.

Alternatively, based on the HTML5 specification, HTMLLinkElement implements the LinkStyle interface defined by CSSOM, which implies that on compliant browsers, you could utilize this method to access the stylesheet:

var styleSheet = document.getElementById('mycss').sheet;

I personally have not attempted this, but rather followed the guidance provided in the specifications.

Answer 3

Answer №2

Instead of directly accessing the stylesheet for font size, consider dynamically adjusting it with this simple function:

function adjustFontSize(elementID, adjustment) {
    var targetElement = document.getElementById(elementID);
    var currentSize = parseInt(targetElement.style.fontSize, 10);
    var newSize = currentSize + adjustment;
    targetElement.style.fontSize = newSize + "px";
}

Your current approach may be trying to fetch style information from an external CSS file, but it's not doing so correctly:

document.getElementById('mycss').href

retrieves the URL string of the stylesheet, not its contents. To properly access and manipulate styles, utilize document.styleSheets - check out a useful tutorial here.

In essence, obtain the stylesheet object through document.styleSheets[index] and apply CSS rules using this.addRule().

Answer 4

Instead of directly accessing the stylesheet for font size, consider dynamically adjusting it with this simple function:

function adjustFontSize(elementID, adjustment) {
    var targetElement = document.getElementById(elementID);
    var currentSize = parseInt(targetElement.style.fontSize, 10);
    var newSize = currentSize + adjustment;
    targetElement.style.fontSize = newSize + "px";
}

Your current approach may be trying to fetch style information from an external CSS file, but it's not doing so correctly:

document.getElementById('mycss').href

retrieves the URL string of the stylesheet, not its contents. To properly access and manipulate styles, utilize document.styleSheets - check out a useful tutorial here.

In essence, obtain the stylesheet object through document.styleSheets[index] and apply CSS rules using this.addRule().

Error: Unable to access the property 'fontSize' as it is undefined

Answer №1

Answer №2

Similar questions

Creating a Custom Rule for Checkbox Validation using jQuery

AngularJS- numerous unique directives featured on a single page each with its distinctive state

AngularJS retrieve data from JSON (like using MySQL)

Exploring textboxes with jQuery loops

When a form added by jQuery is submitted, the associated JavaScript does not run as expected

What causes certain components in ReactJs to not respond to the `:focus` pseudo-class?

Limiting overflow:visible to input and select fields only

Encountering a hiccup during a join linq query操作oops!

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

Prettyprint XML in Angular 8+ without using any external libraries

The HTTP request is being executed twice for some reason unknown to me

Leverage the retrieved JSON data from the database within an HTML template using the Play

How can an array be concatenated using tabs?

Transferring Data Between Two Forms

The execution of ajax within a script being called by another ajax request is not functioning as expected in PHP

Automatic capitalization of menu options in Bootstrap dropdown

jQuery does not support animations for sliding up or down

The precision of the css function in jQuery

Personalized JSON response type for AJAX requests

What is the best way to update the displayed data when using Mobx with an observable array?