关于javascript：document.getElementById返回null值


document.getElementById returns null value

本问题已经有最佳答案，请猛点这里访问。

你好，我有这些沙发：

1
    UK Map

我想要在屏幕上有三个按钮，然后单击隐藏两个div，只显示一个。

1
button id="userButton" onclick ="showOnClick('layoutGroup1');">ECA </button
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function showOnClick(element) {
    if (element == 'layoutGroup1') {
        document.getElementById('layoutGroup1').style.display == 'block';
        document.getElementById('layoutGroup2').style.display == 'none';
        document.getElementById('layoutGroup3').style.display == 'none';
    } else if (element == 'layoutGroup2') {
        document.getElementById("layoutGroup1").style.display == 'none';
        document.getElementById("layoutGroup2").style.display == 'block';
        document.getElementById('layoutGroup3').style.display == 'none';
    } else {
        document.getElementById("layoutGroup3").style.display =="block";
        document.getElementById("layoutGroup1").style.display =="none";
        document.getElementById("layoutGroup2").style.display =="none";
    }
 }

上面是我使用的函数，尽管它给了我一个错误，即getElementByID是null。

相关讨论

为HTML中的元素从getElementById()获取null。

从调用getElementById()中获取null的具体问题可能是由于在页面HTML完全加载之前运行的javascript(即元素还不存在于DOM中，因此null导致的)。但是，虽然这可能是问题所在，但我们不知道这是问题所在，因为您的问题没有向我们展示您的HTML和您的javascript之间的关系(即，它没有显示如何以及何时在页面中加载/运行javascript)。

解决在页面中的元素可用之前运行的javascript问题的方法是延迟JavaScript的执行，直到页面加载完毕。有多种方法可以做到这一点。一种方法是将您的标记放在HTML的底部。但是，延迟到页面加载通常是通过将代码(或只是初始化代码)包装在一个函数中来完成的，该函数随后被指定为准备就绪的各个阶段触发的各种事件之一的侦听器。最常用的是的DOMContentLoaded事件。您可以使用以下代码执行此操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//Wait to run your initialization code until the DOM is fully loaded. This is needed
// when wanting to access elements that are later in the HTML than the .
if(document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', afterLoaded);
} else {
    //The DOMContentLoaded event has already fired. Just run the code.
    afterLoaded();
}

afterLoaded() {
    //Your initialization code goes here. This is from where your code should start
    //  running if it wants to access elements placed in the DOM by your HTML files.
    //  If you are wanting to access DOM elements inserted by JavaScript, you may need
    //  to delay more, or use a MutationObserver to see when they are inserted.
});

该事件也可以作为document.onready访问。当多个脚本尝试这样做时，以这种方式访问它可能会导致问题，因为只有一个脚本可以使用这种方法。因此，最好使用addEventListener()方法来侦听此事件或任何其他事件。

代码的其他方面

在他的回答中，gavgrif对代码的结构提出了一些很好的观点，包括使用javascript添加事件侦听器来分离HTML和JavaScript，并通过首先将all设置为不可见，然后设置希望可见的if语句字符串来消除这些字符串。在他的回答中，暗示您必须使用jquery来考虑使用不同结构的问题。jquery提供了许多方便的特性。它最重要的特性之一是跨浏览器兼容性。但是，它还提供了大量的预定义方法，允许对常用功能进行短语法访问，在大多数情况下，这些方法隐式地迭代所有选定的元素。所有这些都是以85 kib的最小化代码为代价的。因此，如果您只做了一些事情，jquery是不合适的。

您可以使用普通的javascript实现与gavgrif在其答案中显示的相同功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
document.addEventListener('DOMContentLoaded', function(){
    //Wait to add event listeners until the DOM is fully loaded. This is needed
    // when wanting to access elements that are later in the HTML than the .
    queryAll('.showDiv').forEach(function(el){
        el.addEventListener('click',showOnClick);
    });
});

function showOnClick(event){
    var groupNumber=this.value;
    queryAll('.layoutGroups').forEach(function(el){
        el.style.display='none'
    });
    document.querySelector('#layoutGroup'+groupNumber).style.display='block';
}

function queryAll(selector){
    return asArray(document.querySelectorAll(selector))
}

function asArray(obj){
    var newArr = [];
    newArr.push.apply(newArr, obj);
    return newArr;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<button class='showDiv' value="1">1</button>
<button class='showDiv' value="2">2</button>
<button class='showDiv' value="3">3</button>


  UK Map
 
 
 
 

 
  Tree


  Map

更通用/可重用的代码：

一般来说，我更喜欢使用通用的show()和hide()函数，因为它们可能在其他地方被使用。此外，通过处理多种类型的输入(这里不需要大部分输入)，下面的内容使asArray()更加健壮。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
document.addEventListener('DOMContentLoaded', function(){
    //Wait to add event listeners until the DOM is fully loaded. This is needed
    // when wanting to access elements that are later in the HTML than the .
    queryAll('.showDiv').forEach(function(el) {
        el.addEventListener('click',showOnClick)
    });
});

function showOnClick(event){
    var groupNumber = this.value;
    hide(queryAll('.layoutGroups'));
    show(queryDoc('#layoutGroup'+groupNumber));
}

function hide(arraylikeOrElement) {
    setDisplay(arraylikeOrElement,'none')
}

function show(arraylikeOrElement) {
    setDisplay(arraylikeOrElement,'block')
}

function setDisplay(arraylikeOrElement,text) {
    setAStyle(arraylikeOrElement,'display',text);
}

function setAStyle(arraylikeOrElement,which,text) {
    asArray(arraylikeOrElement).forEach(function(el) {
        el.style[which]=text;
    });
}

function queryAll(selector){
    //Returns all matches in the document
    return asArray(document.querySelectorAll(selector));
}

function queryDoc(selector){
    //Returns only the first match in the document (useful for IDs). This is faster
    //  than querySelectorAll because it does not search the entire DOM.  It stops
    //  after the first match.
    return document.querySelector(selector);
}

function asArray(obj) {
    //accepts Arrays, array-like Objects (e.g. NodeLists), single elements, primitives
    //  returns an array, even if the array only has one entry
    var newArr = [];
    if(typeof obj !== 'object' || obj instanceof Node) {
        return [obj];
    }
    if(Array.isArray(obj)){
        return obj;
    }
    if(obj === null) {
        return null;
    }
    if(typeof obj.length === 'number') {
        //NodeList and other array-like objects: faster in most browsers and
        //  more compatible than Array.from().
        newArr.push.apply(newArr, obj);
        return newArr;
    }
    if(typeof obj.nextNode === 'function') {
        //e.g. TreeWalkers, NodeIterator
        var currentNode;
        while(currentNode = nodeIter.nextNode()) {
            newArr.push(currentNode);
        }
        return newArr;
    }
    if(typeof Array.from === 'function') {
        return Array.from(obj);
    }
    //Could make this much more complex to handle more types of Objects, but not in
    //  this demo code.
    //Indicate that we don't know what to do with the Object
    return null;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<button class='showDiv' value="1">1</button>
<button class='showDiv' value="2">2</button>
<button class='showDiv' value="3">3</button>


  UK Map
 
 
 
 

 
  Tree


  Map

更紧凑的代码：

如果您希望代码简洁，可以执行如下操作[注意：使用ES6语法可以进一步减少使用的字符数]：

1
2
3
4
5
6
7
8
var d=document,q=function(s){return Array.prototype.slice.call(d.querySelectorAll(s))};
d.onready=function(){ //Using document.ready is not a good idea, use addEventListener.
    q('.showDiv').forEach(function(e){e.addEventListener('click',function(){
        var element=this.value;
        q('.layoutGroups').forEach(function(e){e.style.display='none'});
        q('#layoutGroup'+element)[0].style.display='block';
    })})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<button class='showDiv' value="1">1</button>
<button class='showDiv' value="2">2</button>
<button class='showDiv' value="3">3</button>


  UK Map
 
 
 
 

 
  Tree


  Map

上面的代码片段使用了gavgrif答案中提供的HTML。

相关讨论

虽然你没有指定为这个问题- jQuery jQuery有一个非常简单的方法。有三个按钮对应于每个值是与"div"。然后在onclick事件(注：《JavaScript和HTML的分离从通过去除Click处理程序中的内联代码结构更好，你只要把这个值)的()clicked按钮，隐藏所有的div(用普通类)，然后在所需的显示使用I(一)这是TS的ID。也可以用添加/删除完成类(如：隐.hidden { }和它不显示，可以用JavaScript做香草，但如果所有这些……我注意到一些文本由div2和这样他们可以看到3到各自的按钮点击切换在线。

请注意，我也没有提示负载整个jQuery库函数是这一个小功能，这是太多的重量，但只是提供一opnion在线功能是让小部分放大图片的代码结构。

1
2
3
4
5
6
7
$(document).ready(function(){
  $('.showDiv').click(function(){
    var element = $(this).val();
    $('.layoutGroups').hide();
    $('#layoutGroup'+element).show();
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

<button class='showDiv' value="1">1</button>
<button class='showDiv' value="2">2</button>
<button class='showDiv' value="3">3</button>


  UK Map
 
 
 
 

 
  Tree


  Map

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function showOnClick(element){

    if(element=='layoutGroup1'){
        document.getElementById('layoutGroup1').style.display='block';
        document.getElementById('layoutGroup2').style.display='none';
        document.getElementById('layoutGroup3').style.display='none';
    }
    else if(element=='layoutGroup2'){
        document.getElementById("layoutGroup1").style.display='none';
        document.getElementById("layoutGroup2").style.display='block';
        document.getElementById('layoutGroup3').style.display='none';
    }
    else{
        document.getElementById("layoutGroup3").style.display="block";
        document.getElementById("layoutGroup1").style.display="none";
        document.getElementById("layoutGroup2").style.display="none";
    }
}
1
2
3
#layoutGroup1, #layoutGroup2, #layoutGroup3{
    display: none;  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <button id="userButton1" onclick ="showOnClick('layoutGroup1');">ECA </button>

<button id="userButton2" onclick ="showOnClick('layoutGroup2');">button 2 </button>

<button id="userButton3" onclick ="showOnClick('layoutGroup3');">button 3 </button>


    UK Map
   
    this is layoutGroup1
   
   


    this is layoutGroup2


    this is layoutGroup3

这是你的校正功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function showOnClick(element){

    if(element=='layoutGroup1'){
        document.getElementById('layoutGroup1').style.display='block';
        document.getElementById('layoutGroup2').style.display='none';
        document.getElementById('layoutGroup3').style.display='none';
    }
    else if(element=='layoutGroup2'){
        document.getElementById("layoutGroup1").style.display='none';
        document.getElementById("layoutGroup2").style.display='block';
        document.getElementById('layoutGroup3').style.display='none';
    }
    else{
        document.getElementById("layoutGroup3").style.display="block";
        document.getElementById("layoutGroup1").style.display="none";
        document.getElementById("layoutGroup2").style.display="none";
    }
}

在该条件下进行的if==代表到厂中的方管和=display='block'分配算子，assigning值在线体育权利对象离开左

相关讨论