Member Avatar for Flightfanatic1

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!

  • 2 Contributors
  • 3 Replies
  • 291 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

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

Edited by Airshow because: n/a
commented: It solved the problem that I was asking, I appreciate the quick reply! +0
Member Avatar for Flightfanatic1

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

Edited by Flightfanatic1 because: n/a
Member Avatar for Airshow

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

Edited by Airshow because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.