Невозможно установить свойство 'display' для неопределенного js

Question

Некоторые ошибки о onclick событие

Следующее является частью моего кода:

var srcElement = null;
        var valueElement = null;
        showTree = function (item, valueId) {
            srcElement = window.event.srcElement;
            valueElement = document.getElementById(valueId);
            var x = getLeft(item);
            var y = getTop(item) + item.offsetHeight;
            var w = item.offsetWidth;
            blockDTree(x, y, w);
        }
        getTop = function (e) {
            var offset = e.offsetTop;
            if (e.offsetParent != null) offset += getTop(e.offsetParent);
            return offset;
        }
        getLeft = function (e) {
            var offset = e.offsetLeft;
            if (e.offsetParent != null) offset += getLeft(e.offsetParent);
            return offset;
        }

        blockDTree = function (x, y, w) {

            var item = $("#combdtree");
            item.style.display = 'block';
            item.style.top = y;
            item.style.left = x;
        }

<input type="text" name="" class="FormStyle2" onClick='showTree(this,"pid")' readonly="readonly" placeholder="父节点"/>	 					
<div id="combdtree" class="dtreecob" ></div>
<div class="dtree" style="overflow: auto; width: 100%;">
</div>

однако, когда я запускаю его, я встречаюсь с:

Home:725 Uncaught TypeError: Cannot set property 'display' of undefined

at blockDTree (Home:725)
at showTree (Home:709)
at HTMLInputElement.onclick (Home:63)

Что не так с кодом? Меня смущало два дня. Как решить это?

Answer 1

item - это объект jQuery, а не элемент

Решение 1: использование элемента

blockDTree = function(x, y, w) {
    var item = $("#combdtree")[0];    // now item is the first such element and since ID's are unique, there's no issue assuming there's only one

    item.style.display = 'block';
    item.style.top = y;
    item.style.left = x;
}

Решение 2: использование jQuery

blockDTree = function(x, y, w) {
    var item = $("#combdtree");
    item.css({display:'block', top:x, left:x});
}

Answer 2

Решение:

1. Вы не используете jquery, поэтому не используйте $("#combdtree");
2. Применить var item = document.getElementById("combdtree");

Пожалуйста, проверьте ниже код:

var srcElement = null;
var valueElement = null;
showTree = function (item, valueId) {
    srcElement = window.event.srcElement;
    valueElement = document.getElementById(valueId);
    var x = getLeft(item);
    var y = getTop(item) + item.offsetHeight;
    var w = item.offsetWidth;
    blockDTree(x, y, w);
}
getTop = function (e) {
    var offset = e.offsetTop;
    if (e.offsetParent != null) offset += getTop(e.offsetParent);
    return offset;
}
getLeft = function (e) {
    var offset = e.offsetLeft;
    if (e.offsetParent != null) offset += getLeft(e.offsetParent);
    return offset;
}

blockDTree = function (x, y, w) {
    var item = document.getElementById("combdtree");
    if (item != null) {
        item.style.display = 'block';
        item.style.top = y;
        item.style.left = x;
    }
}

 <input type="text" class="FormStyle2" onClick='showTree(this,"pid")' readonly="readonly" placeholder="父节点" />
<div id="combdtree" class="dtreecob"></div>
<div class="dtree" style="overflow:auto;width:100%;"></div>

Answer 3

Вы назначили объект jQuery для item

blockDTree = function(x, y, w) {
        var item = $("#combdtree");      // this is a jQuery object
        item.style.display = 'block';    // this does not work because jQuery do not have variable or method called style
}

Поэтому jQuery пытается найти метод или переменную с именем style, которая не определена, измените свой код на использование Javascript

Ваш код станет

 blockDTree = function(x, y, w) {
        var item = document.getElementById("combdtree");
        item.style.display = 'block';
        item.style.top = y;
        item.style.left = x;
 }