获取元素属性

Question

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

未捕获的TypeError：无法读取null的属性'getAttribute'

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

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

我引用

<div my-noteEvent="" data-element="#maritalStatus" data-target="myTarget" data-event="onchange"
 data-action="[{'Single':{'show':'#div1 #div3'},
 {'married':{'show':'#div1 #div3'}}]">

在您的html中，您的属性分别命名为data-element =“＃maritalStatus”data-target =“myTarget”，但您在代码中同时添加了s：

var element = document.getElementById（setElements.getAttribute（'data-elements'））; //获取元素事件在var target = document.getElementById（setElements.getAttribute（'data-targets'））上设置;

最后删除s。

此外，如果您要使用document.getElementById（变量）按id获取，则变量不应以井号开头。

删除#maritalStatus中的＃

您收到错误，因为目标为空，因为您找不到它。