javascript - JQuery .html() not working - Stack Overflow

admin2025-04-19 0

I'm using Onsen UI + JQuery and .html() function is not working, see: /

<body>
  <ons-page>
    <ons-toolbar>
      <div class="center">Clone</div>
    </ons-toolbar>

    <ons-tabbar swipeable position="auto">
      <ons-tab page="tab1.html" label="Home" icon="ion-home, material:md-home" active>
      </ons-tab>
      <ons-tab page="tab2.html" label="Settings" icon="md-settings">
      </ons-tab>
    </ons-tabbar>
  </ons-page>

  <template id="tab1.html">
    <ons-page id="Tab1">
      <p style="text-align: center;">
        This is the first page.
      </p>
    </ons-page>
  </template>

  <template id="tab2.html">
    <ons-page id="Tab2">
      <div class="center" id="usernamespan"></div>
      <p style="text-align: center;">
        <ons-button id="logout" name="logout" onclick="logout();">Logout</ons-button>
      </p>
    </ons-page>
  </template>
  <script type="text/javascript" src="cordova.js"></script>
  <script>
    function logout() {
      window.localStorage.clear();
      window.location.href = "index.html";
    }
    var username = localStorage.username;
    ons.notification.toast({
      message: 'Willkommen ' + username,
      timeout: 4000
    });

    $('usernamespan').html("Hallo Welt" + username);

  </script>
</body>

Also simple JavaScript is not working, tried already .getElementById()

window.document.getElementById("#usernamespan").innerHTML = "Something";

returns => Uncaught TypeError: Cannot set property 'innerHTML' of null

Any Ideas?

I'm using Onsen UI + JQuery and .html() function is not working, see: https://jsfiddle/w8904ztc/1/

<body>
  <ons-page>
    <ons-toolbar>
      <div class="center">Clone</div>
    </ons-toolbar>

    <ons-tabbar swipeable position="auto">
      <ons-tab page="tab1.html" label="Home" icon="ion-home, material:md-home" active>
      </ons-tab>
      <ons-tab page="tab2.html" label="Settings" icon="md-settings">
      </ons-tab>
    </ons-tabbar>
  </ons-page>

  <template id="tab1.html">
    <ons-page id="Tab1">
      <p style="text-align: center;">
        This is the first page.
      </p>
    </ons-page>
  </template>

  <template id="tab2.html">
    <ons-page id="Tab2">
      <div class="center" id="usernamespan"></div>
      <p style="text-align: center;">
        <ons-button id="logout" name="logout" onclick="logout();">Logout</ons-button>
      </p>
    </ons-page>
  </template>
  <script type="text/javascript" src="cordova.js"></script>
  <script>
    function logout() {
      window.localStorage.clear();
      window.location.href = "index.html";
    }
    var username = localStorage.username;
    ons.notification.toast({
      message: 'Willkommen ' + username,
      timeout: 4000
    });

    $('usernamespan').html("Hallo Welt" + username);

  </script>
</body>

Also simple JavaScript is not working, tried already .getElementById()

window.document.getElementById("#usernamespan").innerHTML = "Something";

returns => Uncaught TypeError: Cannot set property 'innerHTML' of null

Any Ideas?

Share Improve this question asked Nov 13, 2017 at 16:34 123php 3071 gold badge4 silver badges17 bronze badges

Your selector for your jQuery call is wrong: $('usernamespan'), And getElementById doesn't take a css selector – Patrick Evans Commented Nov 13, 2017 at 16:36
Still not working. – 123php Commented Nov 13, 2017 at 16:39
i updated your fiddle code. It works.. – Saif Commented Nov 13, 2017 at 16:42

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

You need to specify the target ID as #IDOFDIV or if its a class .CLASSOFID. You also need to tell jquery to wait for the page to finish loading before it tries to find it and add html to it as it may not be on the page yet.

This is done using the $(document).ready() call which is then passed a function with the code you would like to execute after the page has finished loading in.

  $(document).ready(function(){
   function logout() {
      window.localStorage.clear();
      window.location.href = "index.html";
    }
    var username = localStorage.username;
    ons.notification.toast({
      message: 'Willkommen ' + username,
      timeout: 4000
    });

    $('#usernamespan').html("Hallo Welt" + username);
  })

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745002711a279329.html

javascriptJQuery html() not workingStack Overflow

最新回复(0)