检查 getAttribute 是否未定义答案

【问题标题】：Check if getAttribute is not undefined检查 getAttribute 是否未定义
【发布时间】：2019-10-19 21:08:52
【问题描述】：

目前，我的 javascript 正在动态创建页面，因此当用户单击 X 时，将为该选项生成新的 html 代码，如果 B 则反之亦然。

虽然，我收到“未定义”错误。即使我在将变量传递给函数之前检查了变量。

我当前的非工作原型如下所示

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

在此之前，我尝试过使用类似这样的东西

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

这仍然返回未定义。

最后，我尝试了或多或少相同的方法，但它仍然返回 Uncaught TypeError: Cannot read property 'getAttribute' of undefined 以下代码如下所示：

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

我将如何检查属性是否实际设置，如果没有，我可以继续，然后我想为代码选择替代课程。

感谢您的帮助和花费的时间。

【问题讨论】：

请提供HTML和整个功能。
这个错误说明了别的东西。 Cannot read property 'getAttribute' of undefined 表示您的 evt.target 未定义。
附带说明：使用严格的不等式!== 而不是松散的!=。也使用=== 而不是==
问题中提供的事件上下文很少，如果您的目标是检查未定义，您可以这样做：if(event.target && event.target.getAttribute(...)) {/ / 其余代码} else {//备用块}
你能展示你的html吗？

标签： javascript

【解决方案1】：

evt.target 未定义，这意味着您需要在尝试getAttribute() 之前检查它。这是您拥有的选项之一，主要取决于您的“代码替代课程”是什么：

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

【讨论】：

【解决方案2】：

您可以通过这样做检查是否有未定义的内容（复制自here）：

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

注意 typeof 总是返回一个字符串。此外，与“双等号”和“三等号”进行比较是有区别的，因此您可能需要检查this。

【讨论】：

【解决方案3】：

我已经提供了示例 sn-p。

您尝试过evt.target.getAttribute，而不是尝试evt.getAttribute

像这样试试。

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>

【讨论】：

【解决方案4】：

如果您的元素具有由属性的存在/不存在确定的备用状态，则使用.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>

【讨论】：