Check if getAttribute is not undefined

Question

Currently, my javascript is creating pages dynamically, so when the user clicks X, the new html code is generated for that option, if B then vice versa.

Although, I'm getting "undefined" errors. Even though I do check for the variables before they're passed into the function.

My current non-working prototype looks like this

var appName; 
    if(evt.target.getAttribute("appName") != "" || evt.target.getAttribute("appName") != null){
        appName = evt.target.getAttribute("appName");
    }

Before that, I've tried using something which looks like this

var appName = evt.target.get("appName");
    if (typeof appName != typeof undefined && appName !== false) {
        appName = evt.target.getAttribute("appName");
    }
    else appName = 'boo';

That still returns undefined.

Lastly, I tried more or less the same approach but it still returns Uncaught TypeError: Cannot read property 'getAttribute' of undefined The code for the following looks like that :

var appName = '';
    if(evt.target.hasAttribute("appName")){
        appName = evt.target.getAttribute("appName");
    } 
    else appName = 'boo';

How would I check if the attribute is actually set and I can proceed if not then I would like to pick alternate course for the code.

Thanks for your help and time spent.

The error is telling something else. `Cannot read property 'getAttribute' of undefined` mean your `evt.target` is undefined. — random, Jun 04 '19 at 10:36
As a side note: Use strict inequality `!==` instead of loose `!=`. Also use `===` instead of `==` — Maheer Ali, Jun 04 '19 at 10:38
With little context around event provided in the question, if your'e aiming to check undefined you can do this: if(event.target && event.target.getAttribute(...)) {// rest of your code} else {//alternate block} — knomdlo, Jun 04 '19 at 10:39

score 0 · Accepted Answer · answered Jun 04 '19 at 10:39

evt.target is undefined, which means that you need to check for that before trying getAttribute(). This is one of the options you have, mostly depending on what your "alternate course for the code" is:

var appName; 
    if(evt && evt.target && ( evt.target.getAttribute("appName") != "" || evt.target.getAttribute("appName") != null )){
        appName = evt.target.getAttribute("appName");
    }

score 0 · Answer 2 · answered Jun 04 '19 at 10:39

You could check if something is undefined by doing this (Copied from here):

if(typeof obj !== "undefined") {
    // obj is a valid variable, do something here.
}

Note that typeof always returns a string. Also, there's a difference between comparing with "double equals" and "triple equals" so you might want to check this out.

score 0 · Answer 3 · answered Jun 04 '19 at 10:41

I have provided the sample snippet.

you have tried evt.target.getAttribute instead try evt.getAttribute

Try like this.

function findAttr(e){
  if (!e.hasAttribute("appName")) {
    console.log("No attribute");
  } else {
    console.log(e.getAttribute("appName"));
  }
  
}

<div onclick="findAttr(this)">is attr present?</div>
<div onclick="findAttr(this)" appName="test">is attr present?</div>

score 0 · Answer 4 · answered Jun 04 '19 at 11:02

If you have an alternate state for your element determined by the presence/absence of an attribute then use .toggleAttribute()

function editMode(e) {
  const clicked = e.target;
  const editor = document.querySelector('.editor');

  if (clicked.matches('.mode')) {
    clicked.classList.toggle('on');
    clicked.classList.toggle('off');
    editor.toggleAttribute('contenteditable');
    if (clicked.matches('.off')) {
      editor.focus();
    } else {
      editor.blur();
    }
  }
  return false;
}

document.querySelector('.mode').onclick = editMode;

.editor {
  min-height: 32px
}

.mode {
  float: right;
  display: inline-block;
  width: 100px;
}

.on::before {
  content: 'READ/WRITE';
}

.off::before {
  content: 'READ ONLY';
}

<fieldset class='editor'></fieldset>
<button class='mode on'></button>

Check if getAttribute is not undefined

4 Answers4