开发者问题收集

无法设置未定义 js 的属性“display”

2018-09-29
7670

关于 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)

代码有什么问题?它困惑了我两天。如何解决?

3个回答

Solution :

  1. You are not using jquery, so don't use $("#combdtree");
  2. Apply 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>
saAction
2018-09-29

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});
}
Jaromanda X
2018-09-29

您已将 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;
 }
KUMAR
2018-09-29