Cant find style of 'undefined'

Question

To start off, I am using Hugo, Webpack, Babel, and nodeJS. Right now everything is compiling but I get some console errors.

The relevant error I get in Chrome localhost console:

bundle.js:2 Uncaught TypeError: Cannot read property 'style' of undefined
    at bundle.js:2
    at Object.671 (bundle.js:2)
    at n (bundle.js:2)
    at Module.150 (bundle.js:2)
    at n (bundle.js:2)
    at bundle.js:2
    at bundle.js:2

The relevant error I get in firefox localhost console:

Uncaught TypeError: t[e] is undefined
    671 http://localhost:1313/assets/js/bundle.js:2
    671 http://localhost:1313/assets/js/bundle.js:2
    n http://localhost:1313/assets/js/bundle.js:2
    150 http://localhost:1313/assets/js/bundle.js:2
    n http://localhost:1313/assets/js/bundle.js:2
    <anonymous> http://localhost:1313/assets/js/bundle.js:2
    <anonymous> http://localhost:1313/assets/js/bundle.js:2

An example of what is undefined:

      (function (e) {
        'use strict';
        let t = document.getElementsByClassName('bstTab');
        t[e].style.display = 'block',
        0 === e ? (document.getElementById('prevBstBtn').style.display = 'none', document.getElementById('nextBstBtn').style.visibility = 'visible') : document.getElementById('prevBstBtn').style.display = 'inline',
        e === t.length - 1 ? (document.getElementById('nextBstBtn').style.visibility = 'hidden', document.getElementById('ppBstBtn').type = 'image') : (document.getElementById('nextBstBtn').innerHTML = 'Next', document.getElementById('ppBstBtn').type = 'hidden'),
        function (e) {
          let t,
          n = document.getElementsByClassName('step');
          for (t = 0; t < n.length; t++) n[t].className = n[t].className.replace(' active', '');
          n[e].className += ' active'
        }(e)
      }) (0),

This is source code from bundle.js from the link in the localhost console.

The actual function before it goes into the bundle:

function showBstTab(n) {
    //alert(n);
    // This function will display the specified tab of the form ...
    "use strict";
    let x = document.getElementsByClassName("bstTab");
    x[n].style.display = "block";
    // ... and fix the Previous/Next buttons:
    if (n === 0) {
        document.getElementById("prevBstBtn").style.display = "none";
        document.getElementById("nextBstBtn").style.visibility = 'visible';
    } else {
        document.getElementById("prevBstBtn").style.display = "inline";
    }
    if (n === (x.length - 1)) {
        document.getElementById("nextBstBtn").style.visibility = 'hidden';
        //nextBtn.type ="hidden";
        document.getElementById("ppBstBtn").type = "image";
    } else {
        document.getElementById("nextBstBtn").innerHTML = "Next";
        document.getElementById("ppBstBtn").type = "hidden";
    }
    // ... and run a function that displays the correct step indicator:
    fixBstStepIndicator(n);
}

Does the html modules need to be in the bundle with it? Or do I need to link the bundle.js to the htmls? Something along those lines. Right now I have the bundle script being called from the head.html but not the html modules — Kokopelli Gaming, May 20 '21 at 03:25
https://stackoverflow.com/questions/4498482/javascript-cant-find-element-by-id — epascarello, May 20 '21 at 12:28

score 0 · Answer 1 · answered May 20 '21 at 18:04

The way I fixed this error was by reading this Javascript can't find element by id?

I literally just moved <script src="./assets/js/bundle.js"></script> from the head to the bottom of the footer.html.

The issue was that it is trying to load something that technically hasnt been declared yet, so you move it to the footer so that EVERYTHING is declared before you call it.

Cant find style of 'undefined'

1 Answers1