获取元素属性

Question

我有一个HTML文件。我需要获得元素属性，但是它不会发生，因为我得到的是var elementType = target.getAttribute('data-type');

Uncaught :无法读取属性'getAttribute‘的null

我只是不知道如何才能得到元素属性。请帮帮忙。

​

var setAllEvents = $("[my-noteEvent]");
for (var i = 0; i < setAllEvents.length; i++) {
    //call function to work with
    this.bindingAllEvents(setAllEvents[i]);
}

bindingAllEvents: function(setElements) {

    var element = document.getElementById(setElements.getAttribute('data-element')); // Get Element the event is set on
    var target = document.getElementById(setElements.getAttribute('data-target')); // Get Element that is the target of the event
    var event = setElements.getAttribute('data-event'); // What type of event to run
    var action = setElements.getAttribute('data-action'); // Action to take on event
    var elementType = target.getAttribute('data-type');
  
    if (elementType === 'dropdown-label') {
        target = target.parentelement;
    }

    element.addEventListener(event, function(e) {
        e.preventDefault();
        //do something here when all is good
    });
}

<div class="form--input form--input-container form--select hasPlaceholder" data-type="dropdown-label" data-required="true">
    <label for="countries">Dropdown</label>
    <input type="hidden" id="countries" name="maritalStatus">
    <input class="input--main" type="button" data-element="select" value="">
    <span class="placeholder">A Dropdown with stuff</span>
    <span class="selectChoice"></span>
    <div class="framework dropdown dropdown--select-container">
        <div id="" class="framework dropdown--select-item" data-value="UK" data-option="0">
            <p class="framework text--paragraph     ">
                UK
            </p>
            <span class="dropdown--item-line"></span>
        </div>
        <div id="" class="framework dropdown--select-item" data-value="Russia" data-option="1">
            <p class="atom text--paragraph     ">
                Russia
            </p>
            <span class="dropdown--item-line"></span>
        </div>
    </div>
</div>
<div my-noteEvent="" data-element="maritalStatus" data-target="myTarget" data-event="onchange" data-action="[{'Single':{'show':'#div1 #div3'}, {'married':{'show':'#div1 #div3'}}]">
</div>

​

Answer 1

我引用

在html中，属性分别命名为data-element="#maritalStatus“data-target="myTarget”，但是在代码中都添加了s：

var元素= document.getElementById(setElements.getAttribute('data-elements'))；// Get元素事件设置在var target = document.getElementById(setElements.getAttribute('data-targets'))；上

移除结尾处的s。

此外，如果要使用document.getElementById(变量)获取id，则变量不应该以磅号开头。

删除# in #maritalStatus

由于找不到目标为null，所以您得到了一个错误。