Home/ Questions/Q 3680208
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T03:32:58+00:00

Can someone think of a reason that this wouldn’t work in any version of

  • 0

Can someone think of a reason that this wouldn’t work in any version of IE? I have a drop down select menu for choosing the font family of an element, which calls a javascript function to change the font-family. Here is the html…

 <select id="selecth1FontFamily" name="selectFontFamily" onchange="updateh1family();">
                                  <option> Serif </option>
                                  <option> Arial </option>
                                  <option> Sans-Serif </option>                                  
                                  <option> Tahoma </option>
                                  <option> Verdana </option>
                                  <option> Lucida Sans Unicode </option>                               
                              </select>

And here is the JavaScript…

function updateh1family() {

        var selector = document.getElementById('selecth1FontFamily');
        var cssPreviewSpan = document.getElementById('h1FontFamily');

        cssPreviewSpan.innerHTML = selector.value;
        // also update the CSS preview

        var h1 = document.getElementById('liveh1')
        h1.style.fontFamily =  selector.value;
    }

This works to change the font family of the element in EVERY browser, minus the dreaded internet explorer. Any thoughts? I mean, it is a fairly straightforward function, I tried to think of other ways to go about it but I’m pretty much stuck. Thank you to all who read this!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you debugged the code you would see that selector.value returns nothing.

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1 id="liveh1">Some text</h1>
  <select id="selecth1FontFamily" name="selectFontFamily" onchange="updateh1family();">
    <option> Serif </option>
    <option> Arial </option>
    <option> Sans-Serif </option>                                  
    <option> Tahoma </option>
    <option> Verdana </option>
    <option> Lucida Sans Unicode </option>                               
  </select>
    <script>
      function updateh1family() {
        var selector = document.getElementById('selecth1FontFamily');
        var family = selector.options[selector.selectedIndex].value;
        var h1 = document.getElementById('liveh1')
        h1.style.fontFamily = family;        
      }

    </script>
</body>
</html>

    JSBin

    • 0