CODEWITHSUNDEEP
javascripthtml
erdeepak
erdeepak

Reputation: 415

Passing variable in document.getElementById returns Null

While calling document.getElementById by using variable it return null value. Below is the sample code:

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">
    	Q3
    </div>
    
    <div id="main" class="qpanel" id="Q2">
    	Q2
    </div>
    
    <div id="main" 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">

document.getElementById(str) returns null

Upvotes: 1

Views: 1849

Answers (2)

Santosh
Santosh

Reputation: 2323

Two things need to be noted.

*Every item should have only one id. here each div got an id main and another id Q3. *ID should be unique but not required.

Here goes the working code

<!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>

Upvotes: 0

Balaji V
Balaji V

Reputation: 956

This is the working solution. you had given two ids to the div 

<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">

Upvotes: 1

Related Questions