document.getElementByIdの変数を渡すとNULLが返されます

変数を使用してdocument.getElementByIdを呼び出している間はnull値が返されます。以下のサンプルコードは次のとおりです。document.getElementByIdの変数を渡すとNULLが返されます

function savenext(k) 
 
{ 
 
    qdd=k.id; 
 
    var divs = document.getElementsByClassName("qpanel"); 
 
    for(var i=0;i<divs.length;i++) 
 
    { 
 
    divs[i].style.display = "none"; 
 
    } 
 
    str = qdd.replace(/SN/g, ''); 
 
    str='Q'+str; 
 
    var d = document.getElementById(str); 
 
    d.style.display = "block"; 
 
}

<div id="main" class="qpanel" id="Q3"> 
 
    \t Q3 
 
    </div> 
 
    
 
    <div id="main" class="qpanel" id="Q2"> 
 
    \t Q2 
 
    </div> 
 
    
 
    <div id="main" class="qpanel" id="Q6"> 
 
    \t Q6 
 
    </div> 
 
    
 
    <input type="button" value="Save and next" id="SN3" onclick="savenext(this)" class="savenext"> 
 
    <input type="button" value="Save and next" id="SN2" onclick="savenext(this)" class="savenext"> 
 
    <input type="button" value="Save and next" id="SN6" onclick="savenext(this)" class="savenext">

document.getElementById(str)リターンはこれは実用的なソリューションである

出典

2017-01-25 erdeepak

は 'id'sは、文書内で一意でなければならない作業コードになります。 div内の二重 'id'に注意してください。ページが解析されると、2番目の 'id'は無視されます。 – Teemu

@Teemu実際にdivには2つのid属性があります。これはhtmlでは許可されていません。 – Esko

をゼロ。 divに2つのIDを指定しました

<script > 

function savenext(k) 
{ 
    qdd=k.id; 
    divs = document.getElementsByClassName("qpanel"); 
    for(var i=0;i<divs.length;i++) 
    {  
    console.log(divs[i]) 
     divs[i].style.display = "none"; 
    } 
    str = qdd.replace(/SN/g, ''); 
    str='Q'+str; 
    var d = document.getElementById(str); 
    console.log(str) 
    d.style.display = "block"; 
} 


</script> 
<div class="qpanel" id="Q3"> 
    Q3 
</div> 

<div class="qpanel" id="Q2"> 
    Q2 
</div> 

<div class="qpanel" id="Q6"> 
    Q6 
</div> 

<input type="button" value="Save and next" id="SN3" onclick="savenext(this)" class="savenext"> 
<input type="button" value="Save and next" id="SN2" onclick="savenext(this)" class="savenext"> 
<input type="button" value="Save and next" id="SN6" onclick="savenext(this)" class="savenext">

出典

2017-01-25 11:18:04

2つの注意点があります。

*すべてのアイテムはidが1つである必要があります。ここでは、各部門はIDのメインと別のIDのQ3を得ています。 * IDは一意である必要はありません。

はここ

<!doctype html> 
<html> 
<body> 
<div class="qpanel" id="Q3"> 
    Q3 
</div> 

<div class="qpanel" id="Q2"> 
    Q2 
</div> 

<div class="qpanel" id="Q6"> 
    Q6 
</div> 

<input type="button" value="Save and next" id="SN3" onclick="savenext(this)" class="savenext"> 
<input type="button" value="Save and next" id="SN2" onclick="savenext(this)" class="savenext"> 
<input type="button" value="Save and next" id="SN6" onclick="savenext(this)" class="savenext"> 
<script> 
function savenext(k) 
{ 
    qdd=k.id; 
    var divs = document.getElementsByClassName("qpanel"); 
    for(var i=0;i<divs.length;i++) 
    { 
     divs[i].style.display = "none"; 
    } 
    str = qdd.replace(/SN/g, ''); 
    str='Q'+str; 
    var d = document.getElementById(str); 
    d.style.display = "block"; 
} 

</script> 
</body> 
</html>

出典

2017-01-25 11:19:46 Santosh

document.getElementByIdの変数を渡すとNULLが返されます

答えて

関連する問題