1

I made a list with <option> items and whenever I try to verify which one has been selected using a script the console in Chrome says:

Uncaught TypeError: Cannot read property 'value' of null

I don't see what's wrong in my code in both HTML and JS everything seems normally?

Here's the HTML: 

<select name="part" id="optionFonts">
    <option value="default">--- Choose what you want the changes to affect --- </option>
    <option value="all"> ALL ELEMENTS </option>
    <option value="title-and-headings"> TITLES AND HEADINGS </option>
    <option value="headings">  ALL HEADINGS </option>
    <option value="allpars"> ALL PARAGRAPHS </option>
    <option value="title"> TITLE </option>
    <option value="heading1"> FIRST HEADING </option>
    <option value="par1"> FIRST PARAGRAPH </option>
    <option value="par2"> SECOND PARAGRAPH </option>
    <option value="par3"> THIRD PARAGRAPH </option>
    <option value="par4"> FOURTH PARAGRAPH </option>
    <option value="heading2"> SECOND HEADING </option>
    <option value="par5">  FIFTH PARAGRAPH </option>
</select>

And in the JS

var optionFonts = document.getElementById('optionFonts');
var title = document.getElementById('stitle');
var div1Title = document.getElementById('d1Title');
var div1Par = document.getElementById('d1Par');
var p1 = document.getElementById('p1');
var p2 = document.getElementById('p2');
var p3 = document.getElementById('p3');
var d2Title = document.getElementById('d2Title');
var d2Par = document.getElementById('d2Par');
function changeTextFontToBebas() {
    switch(optionFonts.value) {
        case 'all':
            title.style.fontFamily = "Bebas";
            div1Title.style.fontFamily = "Bebas";
            div1Par.style.fontFamily = "Bebas";
            p1.style.fontFamily = "Bebas";
            p2.style.fontFamily = "Bebas";
            p3.style.fontFamily = "Bebas";
            d2Title.style.fontFamily = "Bebas";
            d2Par.style.fontFamily = "Bebas";
            break;

    }
}

It should change the font of everything when I press the box about that font (in this case the Bebas font) and when I press it it will run the function changeTextFontToBebas() function which will also verify what's been checked first, but it just gives that error instead.

Thanks in advance

Mr Lister
  • 44,061
  • 15
  • 107
  • 146
SirMaxime
  • 154
  • 1
  • 3
  • 9

1 Answers1

3

Make sure you are selecting the element after the element is fully loaded on the page. "undefined" is normally the result of reading the element before it is rendered. Your code is not referencing the element inside the function, so it is being set when the script is being run. If the script runs before the element is on the page, it will not find the element. It is just like someone calling your name before you get in the room. You are not going to hear them.

Place the script right before the closing body tag or call it on document ready or window.onload.

To get the value, reference the select, get the options, reference it by the selected index.

var select = document.getElementById("optionFonts");
var value = select.options[select.selectedIndex].value;
epascarello
  • 195,511
  • 20
  • 184
  • 225