Accessing Div, By Class Name, With Javascript

June 26, 2023 Post a Comment

I can not access this data within the div with javascript.

DATA HERE

Any suggesti

Solution 1:

Way 1

You can access the data using jQuery in the following way:

<script>
$(document).ready(function(){
    var data = $(".questions-text-alignment").html();
    alert(data);
})
</script>

Way 2

Without jQuery:

<script>var data = document.getElementsByClassName("questions-text-alignment");
    alert(data[0].innerHTML);
</script>

Solution 2:

You can access using document.getElementsByClassName(), But the thing is you will get an array object. Using the array you have to find out yours. In the below sample I have assumed only one class available.

var arr = document.getElementsByClassName("question-size-v4");

 alert(arr[0].innerHTML);

DEMO

Solution 3:

You can try like this

<script>
    functiongetHtml() {
        var html = document.getElementsByClassName("questions-text-alignment")[0];
        alert(html.innerHTML);
    }

</script>

<divclass="questions-text-alignment whiteTextWithShadow question-size-v4">
    DATA HERE
</div><inputtype="button"name="click"value="click"onclick="getHtml()" />

Solution 4:

You should Use Id to select element in this scenario - DEMO

<script>functionchangeData() { 
    document.getElementById('contentDiv').innerHTML= "Updated Content";
}
</script><body><divid="contentDiv">
    Content Of My Div
  </div></br><inputtype = "button"onClick = "changeData()"value = "change div text" /></body>

Solution 5:

@StevenTang I exactly got stuck on the same problem and here is my solution.

document.getElementsByClassName("question-size-4")

works fine on full HTML document load and only if you have a single DIV object identified by this class name.

Otherwise you get HTMLCollection object for preview via ChromeTools to be opened in your web browser.

To identify individual DIV object, including your Class name and Data Here use Firebug and select your Data and open in Firebug with right mouse click (submenu select).

Once your DIV object selected and identified to include your class name and your Data Here is opened in console.log (Chrome tools), clicking on HTMLCollection you get every DIV object identified by index (natural number) as in array.

Selecting the correct index (natural number), you can access your Data Here via

elements = document.getElementsByClassName("question-size-4");DataHere = elements[correct DIV index].innerHTML   or .innerText

You need to manipulate

x = elements.length;

first to know if any such DIV object identified by your class name really exists and has been downloaded.

If x = 0 it means HTMLCollection is empty and elements.innerHTML generates undefined string

If x = 1 there is exactly a single DIV identified by your class name, so elements.innerHTML should work fine

If x > 1; you have got more DIV objects identified by your class name, so you needd to select the correct one from array data stracture, entering correct index, as above.

It took me months to study the problem and to find the correct answer.

thank you

Html5 Log