Hello, I am trying to get a value of a div. I have an html page with a div's class called "findme".

I have tried innerHTML but it keeps saying undefined.

function innertest() {
var a = document.getElementsByClassName("findme").innerHTML;
alert(a);
}

<div class="findme"><b>This is a test</b></div>


Is there a way that I can have a popup that displays the content of that div, and keep the html tags? Thanks for any help!

FF1, document.getElementsByClassName is not universally supported, so it's better to do something like this:

function innertest() {
	var divs = document.getElementsByTagName("div");
	for(var i=0; i<divs.length; i++ ) {
		if(divs[i].className == "findme") {
			alert(divs[i].innerHTML);
		}
	}
}

Of course, this will only find divs with class="findme" . If you want to find all elements with class="findme" , then the code gets a bit more complex. You are better off using a javascript productivity tool such as jQuery, which will make it easy.

Airshow

commented: It solved the problem that I was asking, I appreciate the quick reply! +0

Oh ok, thanks for the help! I think I will stick with that, but do if statements to find the tag name. How much harder would it be to only have a popup on the div that I click on, instead of all of them popping up.

For example,

<div class="findme" onclick="innertest();"><b>Div 1</b></div>
	
<div class="findme" onclick="innertest();"><b>Div 2</b></div>

if you click on the first div, the popup would say <b>Div 1</b> and if you click on the second div, the popup would say <b>Div 2</b>

Thanks

How much harder would it be to only have a popup on the div that I click on, instead of all of them popping up.
...
if you click on the first div, the popup would say <b>Div 1</b> and if you click on the second div, the popup would say <b>Div 2</b>

That's actually easier, not harder!! As you will see below, innertest2 is made simple by passing a reference to the element (div or whatever) as an argument.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
div.findMe, div.alertMe {
  cursor: pointer;
}
</style>

<script>
function innertest2(element) {
	alert(element.innerHTML);
}
onload = function(){
	var d3 = document.getElementById('myDiv_3');
	var d4 = document.getElementById('myDiv_4');
	d3.onclick = d4.onclick = function(){ innertest2(this); }
};

</script>
</head>

<body>

<div class="findMe" onclick="innertest2(this);"><b>Div 1</b></div>
<div class="findMe" onclick="innertest2(this);"><b>Div 2</b></div>

<div id="myDiv_3" class="alertMe"><b>Div 3</b></div>
<div id="myDiv_4" class="alertMe"><b>Div 4</b></div>

</body>
</html>

You will see that we have two methods for attaching the onclick functionality to the divs:

  1. For Div 1 and Div 2, the innertest2 onclick handler is attached in HTML with onclick="..." .
  2. For Div 3 and Div 4, the innertest2 onclick handler is attached in the window.onload handler, which runs automatically after the page has loaded.

Method 2 is maybe a little harder to understand but is generally preferred.

Airshow