5 Replies Latest reply: Oct 14, 2016 10:26 AM by Adam Davies

simple extension query! function undefined

Adam Davies Oct 14, 2016 8:39 AM

Dear All,

A simple one I am sure but it has been a long week.

This is the simple code I am wiring for a menu, why do I get a function undefined error for my close / open navs when I click the various items (the click works with a simple console.log)?

html="<div id=''#' + divName' class='sidenav' >  "
html = html+"<a href='javascript:void(0)' id='closebtn' class='closebtn' onclick='closeNav()'>&times;</a>"
html = html+"<a href='#'>About</a>"
html = html+" <a href='#'>Services</a>"
html = html+"  <a href='#'>Clients</a>"
html = html+"  <a href='#'>Contact</a>"
html = html+"</div>"


html = html+"<span style='font-size:30px;cursor:pointer' onclick='openNav()'>open</span>"








/* Set the width of the side navigation to 250px */
function openNav() {
    document.getElementById("'#' + divName").style.width = "250px";
}


/* Set the width of the side navigation to 0 */
function closeNav() {
    document.getElementById("'#' + divName").style.width = "0";
}
_this.Element.innerHTML = html;

Re: simple extension query! function undefined

Jonathan Dienst Oct 14, 2016 8:56 AM (in response to Adam Davies)

I'm a little rusty here, but shouldn't the HTML definition be:
html="<div id='#" + divName + "' class='sidenav'>"

And the call be:
document.getElementById("#" + divName).style.width = "250px";

I am assuming that divName is a variable.
Like Show 0 Likes (0)

Actions
- Re: simple extension query! function undefined
  
  Adam Davies Oct 14, 2016 9:00 AM (in response to Jonathan Dienst )
  
  I don't think so, purely because it displays OK and even if I simplify the function to a console.log, it won't call it
  
  Like Show 0 Likes (0)
  
  Actions
  - Re: simple extension query! function undefined
    
    Adam Davies Oct 14, 2016 9:01 AM (in response to Adam Davies)
    
    That isn't to say that you are not correct of course, I just don't think it is the cause (buit I will try it )
    
    Like Show 0 Likes (0)
    
    Actions
  - Re: simple extension query! function undefined
    
    Jonathan Dienst Oct 14, 2016 9:21 AM (in response to Adam Davies)
    
    The HTML will work, but I think the div name is actually something like #'+divName (literally and no leading quote) and getElementById is looking for '#'+divName (literally and with leading quote). Or at very least, getElementById is returning undefined and then the .style.width properties also undefined....
    
    Anyway, I last did much DOM/js programming about 5 years ago, so I am very rusty
    
    Like Show 0 Likes (0)
    
    Actions
    - Re: simple extension query! function undefined
      
      Adam Davies Oct 14, 2016 10:26 AM (in response to Jonathan Dienst )
      
      Yeah I am trying to self-learn it and its a bit of a headache!
      
      So just to simplify it right out:
      
      this works:
      _this.Element.innerHTML = "<span style='font-size:30px;cursor:pointer' onclick='console.log(123)'>open</span>"
      
      Whereas this doesn't (testClick is undefined)
      
      _this.Element.innerHTML = "<span style='font-size:30px;cursor:pointer' onclick='testClick'>open</span>" function testClick(){ console.log(123); }
      
      So the innerHTML object can't see the function.... I mean I get local and global scope etc within JS but not quite how that fits with the innerHTML element!
      
      Like Show 0 Likes (0)
      
      Actions

Go to original post