Forum Moderators: open
I think I want to use "this".innerHTML, but for some reason I cannot get that to work. The below code I see from the boards a couple of years ago. It works fine, but within an AJAX framework, it is not ideal. Can someone tell me how I can improve the below code so that I call the onClick function directly from the <a> tag, as opposed to setting the function to initiate onLoad?
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
onload=function(){
var els=document.getElementsByTagName('a'),
i=els.length;
while(i-->0)
els[i].onclick=function(){
document.getElementById('headline').innerHTML=this.innerHTML
}
}
</script>
</head>
<body>
<h3 id="headline">Default Headline</h3>
<a href="#">beer/a><br>
<a href="#">beer 2</a><br>
<a href="#">beer 3</a><br>
<a href="#">beer 4</a>
</body>
</html>
Or, maybe there is an easier way for me to identify the contents of just the link that was clicked. For some reason whenever I try this, I get returned to me "[object window}", so using "this" seems not to
work there.
<html>
<head>
<script type="text/javascript">
function sndReq() {
var test=this.innerHTML
alert(test)
}
</script>
</head>
<body>
<a href="#" id="beer" onClick="sndReq()">Beer</a>
</body>
</html>
I think I am even confusing myself...
<html>
<head>
<script type="text/javascript">
function sndReq(obj) {var test=obj.innerHTML;
alert(test);
}
</script>
</head>
<body><a href="#" id="beer" onClick="sndReq(this);">Beer</a>
</body>
</html>
[edited by: Trace at 1:18 pm (utc) on Sep. 26, 2008]
Here is my javascript:
<script type="text/javascript">
function createRequestObject() {
var ro
var browser = navigator.appName
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP")
}else{
ro = new XMLHttpRequest()
}
return ro
}
var http = createRequestObject()
function sndReq(obj) {
var test=obj.innerHTML
http.open('get', 'bluepalmstest.xml', true)
http.onreadystatechange = handleResponse
http.send(null)
}
function handleResponse {
var found = 0
var searchval = test
alert(searchval)
if(http.readyState == 4){
alert(HERE IS WHERE I NEED TO BE ABLE TO identify the innerHTML of the anchor that was clicked)
}
}
HERE is my HTML body as an example:
<body>
<a href="#" id="beer" onClick="sndReq(this);">Beer</a>
</body>
</html>
There will be several anchors, each with the same onClick="sndReq(this);"
I am hoping to be able to use the inner HTML of whatever anchor was clicked in order to compare that to the entries in an XML file...
I can get a result for an alert within the sndReq(this) function, but once I get into the if statement and ready state being 4, I have a hard time identifying the innerHTML...how do I refer to it?
<script type="text/javascript">
// When the window loads, attach the event handlers to the links
window.onload = function () {
var i, els = document.getElementsByTagName('a');
// Loop through all the links
for (i = els.length; i > 0; i--) {
// Attach the onclick handler to each link
els[i-1].onclick = function () {
// Set the headline to the contents of the link
// Note, this refers to the link
document.getElementById('headline').innerHTML = this.innerHTML;
}
}
}
</script>
What that example is doing is attaching the event handlers to the <a> elements (for every <a> on the page, which might not be what you want) when the window loads. This is to make sure that all of those elements are available. I changed "onload" to "window.onload", and I changed from a while loop to a for loop (they accomplish the same thing, but the for loop is more of a defacto standard I think). This works for me with no problem.
@Trace, note that 'this' refers to the element where the event fired, so supermanjace was using it correctly. I would avoid using inline event handlers as it mixes HTML and JavaScript, which is harder to maintain and not "unobtrussive."
To get this working with your AJAX script, you will want to modify the function assigned to each <a> element's onclick handler. Give this a try (note, I've modified your createRequestObject method to work with more browsers):
<script type="text/javascript">
function createRequestObject() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
return xmlHttp;
}
var http = createRequestObject();
function sndReq() {
var that = this; // The link that triggered this event
// The callback function for the http request
http.onreadystatechange = function () {
if (http.readyState == 4) {
// that refers to the link
alert('update ' + that.innerHTML);
}
}
http.open('get', 'bluepalmstest.xml', true)
http.send(null);
}
// When the window loads, attach the event handlers to the links
// but only if AJAX is working
if (http) {
window.onload = function () {
var i, els = document.getElementsByTagName('a');
// Loop through all the links
for (i = els.length; i > 0; i--) {
// Attach the onclick handler to each link
els[i-1].onclick = sndReq;
}
}
}
</script>
Let me know if that works.
