Question

I want to change the data-theme attribute of a page(jQuery Mobile) dynamically so I bind an action to a button, this action gets the id of the page which I want to change it’s ‘data-theme’ and then sets it’s ‘data-theme’ to any swatch(a,b,c,d or e), when I press the button no theme change, here’s the HTML:

    <div data-role="page" id="admin" data-theme="a" class="page">

    <div data-role="header">

    </div><!-- /header -->

    <div data-role="content"> 
    <a href="#" id="themeButton" data-theme="b" data-role="button" data-inline="true" >ChangeTheme</a>
     </div><!-- /content -->

    <div data-role="footer" data-position="fixed" data-id="ew-footer" class="ui-splitview-hidden">

    </div><!-- /footer -->
  </div><!-- /page -->

here’s my JavaScript:

<script>
    $('#admin').live('pageinit', function (event) {
        $('#themeButton').click(function () {

            document.getElementById('admin').setAttribute('data-theme', 'b')

        });
    });
</script>

Answer 1

document.getElementById('RemoveButton').setAttribute('data-theme','b')

Your markup has no element with the id value “RemoveButton”, so that code is going to throw an exception, because document.getElementById('RemoveButton') will return null, which you’re then trying to dereference.

---

Separately, as you’re using jQuery already, why aren’t you using it there? E.g.

$("#RemoveButton").attr("data-theme", "b");

That would at least prevent your getting an error, though of course it won’t do anything (because, again, there’s no element with that id in the markup you quoted).