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

Adding Jade template variable to an inline function

Ensure that the Nivo Slider height is set to the accurate final value before the images finish loading

Unusual JavaScript Bug: Uncaught TypeError - Unable to access property 'url' of null

Verify the functionality of JavaScript to ensure it is enabled and functioning properly

Activate an iframe upon changing the media query

Having trouble getting my HTML file and CSS styles to render properly in Chrome

What is the right way to nest a SCSS rule for a specific selector within a list using the "&" symbol?

What strategies can we implement to ensure consistency in visual styles and templates across our microservices?

Attempting to create a tracker that increments every time a form input field is filled out using React in conjunction with Formik

Incorporating and designing a side button using jQuery Mobile

Unable to control audio playback in Android WebView

Tips for displaying the number of selected values in a select box label (e.g. Choose an Option)

Issue with VueJS/Nuxt: When using this.$router.push, the wrong template is being returned to the <nuxt-link> tag

Is it possible to perform a CSS flip animation without delay?

What is causing the infinite loop when connecting to a Node.js server with Socket.IO?

Issue with Date generation in TypeScript class causing incorrect date output

The left side of the page is anchored with text content while an engaging carousel occupies the right half

The art of perfect alignment: Mastering the positioning of Material-UI Grid

Maintaining my navigation menu as you scroll through the page

Responsive Material-UI horizontal navigation bar