CODEWITHSUNDEEP
javascript
Nick Kahn
Nick Kahn

Reputation: 20078

How to get the DIV value from inside another div

How to get the value of a class="selected" within the div, I have tried the following code but I get the undefined

<div class="myTest1" title="testTitle1" id="test1" >       
        <div>answer 1</div>
        <div>answer 2</div>
        <div>answer 3</div>
        <div class="selected">answer 4</div>     
</div>
<div class="myTest2" title="testTitle2" id="test2">
    <div  >
        <div>answer 1</div>
        <div>answer 2</div>
        <div class="selected">answer 3</div>
        <div>answer</div>
    </div>
</div>
 <div class="myTest3" title="testTitle2" id="test3">
    <div  >
        <div>answer 1</div>
        <div class="selected">answer 2</div>
        <div >answer 3</div>
        <div>answer 4</div>
    </div>
</div>

JS code:

I realized that my code is not optimized and I'm using three for loops.

    var test1= document.getElementById("test1");
    var test2= document.getElementById("test2");
    var test3= document.getElementById("test3");       
   
    for (var i=0; i<test1.length; i++) {
        var sel1 = document.getElementsByClassName("selected");
        alert(quizAns1[i].innerHTML);
    }
   
    for (var i=0; i<test2.length; i++) {
        var sel2 = document.getElementsByClassName("selected");
        alert(sel2[i].innerHTML);
    }
   
    for (var i=0; i<test3.length; i++) {
        var sel3 = document.getElementsByClassName("selected");
        alert(sel3[i].innerHTML);
    }

Upvotes: 0

Views: 746

Answers (6)

Daniele Ricci
Daniele Ricci

Reputation: 15797

You could try this:

for(let q = 1; q <= 3; ++q)
  console.log("question", q, document.querySelector("#test" + q).querySelector(".selected").textContent);
<div class="myTest1" title="testTitle1" id="test1" >       
        <div>answer 1</div>
        <div>answer 2</div>
        <div>answer 3</div>
        <div class="selected">answer 4</div>     
</div>
<div class="myTest2" title="testTitle2" id="test2">
    <div  >
        <div>answer 1</div>
        <div>answer 2</div>
        <div class="selected">answer 3</div>
        <div>answer</div>
    </div>
</div>
 <div class="myTest3" title="testTitle2" id="test3">
    <div  >
        <div>answer 1</div>
        <div class="selected">answer 2</div>
        <div>answer 3</div>
        <div>answer 4</div>
    </div>
</div>

Hope this helps.

Upvotes: 0

GMKHussain
GMKHussain

Reputation: 4691

Just add same 'class' on all DIV, and did changes in code. and check snippet I hope is what you look for.

var elementList = document.querySelectorAll(".selected");
    for (i = 0, max = elementList.length; i < max; i++) {
      let question = elementList[i].closest(".myTest").getAttribute ("id");
        console.log(`Question: ${question} -> Answer: ${elementList[i].textContent} `);
    }
<div class="myTest" title="testTitle1" id="test1" >       
        <div>answer 1</div>
        <div>answer 2</div>
        <div>answer 3</div>
        <div class="selected">answer 4</div>     
</div>
<div class="myTest" title="testTitle2" id="test2">
    <div  >
        <div>answer 1</div>
        <div>answer 2</div>
        <div class="selected">answer 3</div>
        <div>answer</div>
    </div>
</div>
 <div class="myTest" title="testTitle2" id="test3">
    <div  >
        <div>answer 1</div>
        <div class="selected">answer 2</div>
        <div >answer 3</div>
        <div>answer 4</div>
    </div>
</div>

Upvotes: 1

Rupesh Chaudhari
Rupesh Chaudhari

Reputation: 308

You should do this either

<div class="myTest1" title="testTitle1"  >    
    <div id="test1">
        <div>answer 1</div>
        <div>answer 2</div>
        <div>answer 3</div>
        <div class="selected">answer 4</div>   
    </div>  
</div>
<div class="myTest2" title="testTitle2">
    <div  id="test2">
        <div>answer 1</div>
        <div>answer 2</div>
        <div class="selected">answer 3</div>
        <div>answer</div>
    </div>
</div>
<div class="myTest3" title="testTitle2" >
    <div id="test3" >
        <div>answer 1</div>
        <div class="selected">answer 2</div>
        <div >answer 3</div>
        <div>answer 4</div>
    </div>
</div>

And in your js this:

var test1= document.getElementById("test1");
var test2= document.getElementById("test2");
var test3= document.getElementById("test3");       

for (var i=0; i<test1.length; i++) {
    var sel1 = document.querySelector("#test1 .selected");
    alert(sel1.innerHTML);
}

for (var i=0; i<test2.length; i++) {
    var sel2 = document.querySelector("#test2 .selected");
    alert(sel2.innerHTML);
}

for (var i=0; i<test3.length; i++) {
    var sel3 = document.querySelector("#test3 .selected");
    alert(sel3.innerHTML);
}

Upvotes: 0

lawrence-witt
lawrence-witt

Reputation: 9354

If you actually want to accurately target the div in question each time, which I imagine you would under real conditions:

var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
var test3 = document.getElementById("test3"); 

var sel1 = test1.querySelector('.selected');
var sel2 = test2.querySelector('.selected');
var sel3 = test3.querySelector('.selected');

Upvotes: 0

Atif Şeşu
Atif Şeşu

Reputation: 125

And your fault is trying to get an element's lenght.

console.log(test1.length);//this will return null

I am new. I couldn't just leave a comment, so

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65796

Just query directly for the elements based on the class and then loop over the results. Also, give each question the same class so they can be grouped more easily.

document.querySelectorAll("div.selected").forEach(function(item, index){
  // Use .closest to get the nearest matching ancestor:
  alert("For question " + item.closest(".myTest").id + ", you answered: " + item.textContent); 
});
<div class="myTest" title="testTitle1" id="test1" >       
        <div>answer 1</div>
        <div>answer 2</div>
        <div>answer 3</div>
        <div class="selected">answer 4</div>     
</div>
<div class="myTest" title="testTitle2" id="test2">
    <div  >
        <div>answer 1</div>
        <div>answer 2</div>
        <div class="selected">answer 3</div>
        <div>answer</div>
    </div>
</div>
 <div class="myTest" title="testTitle2" id="test3">
    <div  >
        <div>answer 1</div>
        <div class="selected">answer 2</div>
        <div >answer 3</div>
        <div>answer 4</div>
    </div>
</div>

Upvotes: 1

Related Questions