JavaScript - Onclick Not Working Right With Nested Divs

Hi!

I'm no JavaScript expert so wonder if you could help?

I have a page with four divs, and would like to change the content in each div by clicking on a link under each div. Can this be done with JavaScript?

I've searched everywhere for the last three hours and cannot find any 'readymade' code. Can anyone help me or point me in the right direction?

Any help will be really welcome! Thank you!

Hello Guys,

Seems im moving on from the css forums to java (im scared). I am a keen learner but an absolute beginner to java.

What i need to be able to do is..

When a student clicks on a link in the main menu e.g number I need a something that can load the following two divs.

#contentwindow
#three

I already have jquery running on the page and all css is embeded for now if that is helpful.

http://www.bushcottages.co.uk/new.htm

Thanks your help is supremely appreciated
Peter

The very basic onclick code I threw together:
Code:

function descw()
{
	document.getElementById("desc").style.display="block";

}

function descc()

{
	document.getElementById("desc").style.display="none";
}

The div that needs a description...
Code:

<div class="select"><img src="image.jpg" onclick="descw()"></div>

..and the actual description div.
Code:

<div id="desc">
<img  src="close.jpg" onclick="descc">
<p>Description</p>
</div>

This works, but I have a whole class of divs named select that need their own individual description divs. Id method is okay for one div apparently, but if I click on others it loads the first description div. What do I use instead? I tried getElementsByName and Atrribute and got an error.

i am creating a check box and asigning i an onclick event with the following code.
Code:

var box=document.createElement('input');
box.onClick="alert('test')"
cell.appendChild(box);

when i click the checkbox, the check appears in it, but no alert message, and there is no sign of an onClick attribute in the DOM. However, when i type box.onClick in the console it returns"alert('test')" any ideas why it doesn't regonize the onclick event?

I am attempting to have a link hide and unhide a div

It works in Chrome and Firefox, but not in IE

The only thing that does not work is when i click it, it dosen't unhide or change the title, so basically, function unHide is not running, although there are no errors thrown.


I have this in the top of the page
Code:

document.getElementsByClassName = function(className){
		var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
		var allElements = document.getElementsByTagName("*");
		var results = []; 
		var element;
		for (var i = 0; (element = allElements[i]) != null; i++) { 
			var elementClass = element.className;
			if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
				results.push(element);
		}

		return results;
}

function hider(){
	var eles = document.getElementsByClassName('hider');
	for(var i = 0; i < eles.length; i++){
		var theid = eles[i].id;
		eles[i].innerHTML = "<div style='display:block; text-decoration:none; color: black; clear:both; text-align:right; float:right; margin-top:-40px; margin-right:3px;' class='open'><a href='#' onClick=\"unHide('" + theid + "'); return false\" > Click To Open </a></div><div class='hides'> " + eles[i].innerHTML + "</div>";
	}
}

function unHide(a){
	var eles =  document.getElementById(a);
			str = eles.innerHTML;
			
			if(str.search("> Click To Open <") == -1){
				str = str.replace("> Click To Close <", "> Click To Open <");
				str = str.replace("class=\"nothides\"", "class=\"hides\"");
			}
			else{ 
				str = str.replace("> Click To Open <", "> Click To Close <");
				str = str.replace("class=\"hides\"", "class=\"nothides\"");
			}
			
			
			eles.innerHTML = str;
}

and i have this where i want it to display and hide the section

Code:

<h4 onclick="unHide('editB')">Edit This Property</h4>
<div id='editB' class='hider'>
...
</div>

The way it works is that it reads the page for all objects with the class name "hider"

then it inserts two divs into "hider", one of them is a title that says: "click to open" and the other div has a class of "hides" that is set to display:none

Once "click to open" is clicked, it uses .replace to find "click to open" and class=hide and change them to "Click to Close" and class=nothides
if it is clicked again, it does the opposite.

i just need to know why it isn't working in IE.
Thanks in advance

Ok here is my form:
Code:

$sql = "SELECT storage.quantity, items.name, items.image, items.description, items.itemid
	FROM storage
	JOIN items USING(itemid)
	WHERE userid='".$_SESSION['userid']."'
	ORDER BY items.name
	LIMIT $offset, $rowsperpage";
	$result = mysqli_query($cxn, $sql) or die(mysqli_error($cxn));
	$imagecount = 0;
	$tableOutput = "";
	while ($row = mysqli_fetch_assoc($result)) //while there are still results
	{
		$imagecount++;
		$quantity = $row['quantity'];
		$name = $row['name'];
		$image = $row['image'];
		$description = $row['description'];
		$itemid = $row['itemid'];

		//Create TD
		$tableOutput .= "<tr>\n";
		$tableOutput .= "<td width=\"50\" style=\"text-align:center;\">\n";
		$tableOutput .= "<img src=\"http://www.elvonica.com/".$image."\"><br>";
		$tableOutput .= $name."</td>\n";
		$tableOutput .= "<td width=\"400\" style=\"text-align:center;\">".$description."</td>\n";
		$tableOutput .= "<td width=\"50\" style=\"text-align:center;\">".$quantity."</td>\n";
		$tableOutput .= "<td width=\"100\" style=\"text-align:center;\">\n";
		$tableOutput .= "<button type=\"button\" onclick=\"removeOne(".$itemid.")\">Remove 1</button><br />\n";
		$tableOutput .= "<button type=\"button\" onclick=\"removeAll(".$itemid.")\">Remove All</button>\n";
		$tableOutput .= "</td>\n";
		$tableOutput .= "</tr>\n";
	}
		echo "<form action=\"storageprocess.php\" method=\"get\">\n";
		echo "<table cellspacing=\"0\" class=\"news\" align=\"center\">\n";
		echo "<tr>\n";
		echo "<td width=\"50\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Item</b></td>\n";
		echo "<td width=\"400\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Description</b></td>\n";
		echo "<td width=\"50\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Quantity</b></td>\n";
		echo "<td width=\"100\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Remove</b></td>\n";
		echo "</tr>\n";
		echo $tableOutput;
		echo "</table><br />\n";
		echo "</form>\n";

Just ignore the PHP part of it. This is going through a while loop as you can see, but the function "removeOne()" and "removeAll()" has the itemid in the parantheses so the javascript can catch that value.
But the problem is, that it's not even catching the function.
One of the functions (removeOne) looks like this:

Code:

<script>
$(document).ready(function() {
	function removeOne(n)
	{
		alert("hi");
		
		$.ajax(
		{
			type: "GET",
			url: "storageprocess.php?itemid="+ n,
			data: "itemid="+ n,
			success: function()
			{
				alert("Item has been moved to inventory.");
			}
		});
	}
});
</script>

Just ignore the AJAX part. I put the alert("hi"); in the beginning to see if it's even catching the onclick and it's not. So I don't understand why the onclick isn't preparing the function..
Can anyone help me here?

Hey everyone,
I am having troubles with my form not working correctly in IE. I have onclicks for different parts of my site. I am trying to use onclick and divs to make this happen. Can some look at my code and help me out?
Thanks/
Code:

<script type="text/javascript">
function switchFS(obj) {
	var fset,i,fsclass;
	fset=document.getElementsByTagName('fieldset');
	fsclass = obj;
	for ( i=0; i<fset.length; i++) {
		if ((fset[i].getAttribute('class') != "user") && (fset[i].getAttribute('class') != fsclass)) {
			fset[i].style.display = "none";
		} else {
			fset[i].style.display = "block";
		}
	}
}
</script>


</head>

<body id="submitform">
<div id="container">
	<div id="header">
    <?php include($dirprefix . "external/include/header.html"); ?>	
    </div><!-- end header -->
    <div id="maincontent">
    <h3>&nbsp;</h3>
    <?php include($dirprefix . "external/include/menu_inactive.html"); ?>	
    
    <div id="bodycontent">
    <div id="bodyleftcol">
    <h4>Contact</h4>
    <h5>Registration</h5>
    </div>
    <div id="bodyrightcol">
	<h1 class="formhead">Site Registration</h1>
	<p>Please register if you are a Zimmer customer, or an agency or designer working on behalf of one. Completing the requested information will enable us to continue to update and improve site content. Please make note of your password for future reference. You will receive an email with your login information.</p>
	<div id="mainrightcol">
  <form name="form" id="register" method="post" action="processregister.php">
  
  	<fieldset class="user">  
	<legend>i am a:</legend>
		<label><input type="radio" value="Healthcare provider" class="checkbox" name="usertype" onclick="switchFS('healthcare');" /> Healthcare provider</label>
        <label><input type="radio" value="Agency or designer for a customer" class="checkbox" name="usertype" onclick="switchFS('agency');" /> Agency or designer for a customer</label>
		<label><input type="radio" value="Independent agency or designer" class="checkbox" name="usertype" onclick="switchFS('agency');" /> Independent agency or designer</label>
		<label><input type="radio" value="Zimmer employee" class="checkbox" name="usertype" onclick="switchFS('zimmer');" /> Zimmer employee</label>
        <label><input type="radio" value="Zimmer field representative" class="checkbox" name="usertype" onclick="switchFS('zimmer1');" /> Zimmer field representative</label>
		<label><input type="radio" value="Media" class="checkbox" name="usertype" onclick="switchFS('user');" /> Media</label>
		<label><input type="radio" value="Healthcare Author/Publisher" class="checkbox" name="usertype" onclick="switchFS('author');" /> Healthcare Author/Publisher</label>
		<label><input type="radio" value="Other" class="checkbox" name="usertype" onclick="switchFS('user');" /> Other</label>
	</fieldset>
    
    <fieldset class="zimmer" style="display: none;">
    <legend>zimmer information</legend>
        <!--<label for="businessunit">Zimmer business unit: <input type="text" name="businessunit" value="" required="required" /></label>-->
        <label for="division">Zimmer business unit: 
        <select name="division">
			<option value="">- n/a -</option>
			<option value="Knees">Knees</option>
			<option value="Hips">Hips</option>
			<option value="Extremities">Extremities</option>
			<option value="Trauma">Trauma</option>
            </select></label>
    </fieldset>
    
    <fieldset class="zimmer1" style="display: none;">
    <legend>zimmer information</legend>
        <!--<label for="businessunit">Zimmer business unit: <input type="text" name="businessunit" value="" required="required" /></label>-->
        <label for="distributorship">Zimmer distributorship: 
        <input type="text" name="distributorship" value="" required="required" /></label>
    </fieldset>

I have added the javascript and the section of code where the user picks how they are. Once you click on one of the users in IE the form goes away.

I'm having a small issue with being able to use the onclick more than once. When I load the page and click the link the request works fine the first time. But if I cancel the request then goto click the link again, nothing happens.


Code:

<a href="javascript:void();" onclick="sendRequest()">Send the request</a>

<script>
var request = {
    method: 'postrequest',
    message: 'You will like it',
    data: '123key'
};
function sendRequest() {
    postReq(request, function (a) {
        if (a && a.post_id) {
             
//Do something if sent
            
        } else {

//Do something if cancelled
       
        }
    })
}
</script>

Hi everyone,

I'm a JavaScript newbie and am trying to use it to direct users to a search page based on the values of two drop down boxes. The issue i am having is that the code below works fine on a test page, but not on my test domain (with wordpress theme) and so i was wondering whether there is anything I am doing wrong...

Is onclick already defined maybe? I'm not sure how it works to be honest...

Code:

<script type="text/javascript">
function gosearch() {
var breed = document.getElementById('breed').value;
var area = document.getElementById('area').value;
var site = "http://hairloss-help.net/?s=";
var searchurl = site + breed + area;

window.location.href = searchurl;
}
</script> 

<strong>Breed</strong>
<select name="breed" id="breed">
<option value="">&gt; All</option>
<option value="Affenpinscher+">Affenpinscher</option>
<option value="Afghan+Hound+">Afghan Hound</option>
<option value="Airedale+Terrier+">Airedale Terrier</option>
<option value="Akita+">Akita</option>
<option value="Alaskan+Malamute+">Alaskan Malamute</option>
<option value="Alsation+">Alsation</option>
<option value="American+Cocker+Spaniel+">American Cocker Spaniel</option>
<option value="Anatolian+Karabash+">Anatolian Karabash</option>

</select>

<strong>Area</strong>
<select name="area" id="area">
<option value="all">&gt; All Areas</option>
<optgroup label="England">
<option value="Avon">Avon</option>
<option value="Bedfordshire">Bedfordshire</option>
<option value="Berkshire">Berkshire</option>
<option value="Bristol">Bristol</option>
<option value="Buckinghamshire">Buckinghamshire</option>
<option value="Cambridgeshire">Cambridgeshire</option>
<option value="Cheshire">Cheshire</option>
<option value="Cleveland">Cleveland</option>
<option value="Cornwall">Cornwall</option>

</select>

<input type="button" name="gobutton" id="gobutton" value="Go!" onclick="gosearch();" />

The domain I'm currently testing this on is http://www.hairloss-help.net.

Any help would be much appreciated.

Thanks

Sam

Hi,

I would like to change the style on my onclick on my radio buttons not sure why it's not working?!


PHP Code:
<div id="Available" <?php if($mondayamstart == "Unavailable"){ echo 'style="visibility:hidden!important;"';} else { echo 'style="visibility:visible!important;"';} ?>>
<select name="Monday_am_startH" id="Monday_am_startH">
<?php
for ($i=0; $i<24; $i++)
{
    if($i<10)
    {
        $i = sprintf("%02d",$i);
    }
    echo '<option'.($i==substr($mondayamstart,0,2)? ' selected' : '').' value="'.$i.'">'.$i.'</option>';
}
?>
</select>
:
<select name="Monday_am_startM" id="Monday_am_startM">
<?php
for ($i=0; $i<60; $i++)
{
    if($i<10)
    {
        $i = sprintf("%02d",$i);
    }
    echo '<option'.($i==substr($mondayamstart,3,2)? ' selected' : '').' value="'.$i.'">'.$i.'</option>';
}
?>
</select>
</div>
<div id="Unavailable">&nbsp;</div>
<br />
<input type="radio" name="Monday_am_startRad" value="AvailableMon" <?php if($mondayamstart != "Unavailable"){ echo "checked";} ?> onClick:"document.getElementByID('available').style.visibility:visible;'"> Available <br /><input type="radio" name="Monday_am_startRad" value="UnavailableMon" <?php if($mondayamstart == "Unavailable"){ echo "checked";} ?> onClick:"javascript'getElementByID('Unavailable')style.visibility:hidden;'"> Unavailable

Hi folks,

I'm frustrated . I've been trying to get this single piece of code to work. I've looked at quite a few sources out there, but everything I try fails.

My site uses AJAX to upload a file, and once complete I dynamically add the file name, size, description, etc to a table.

I have a javascript method that will allow me to download the file once uploaded - and I put an onclick event into some of the TDs in the row I added. (Note: I didn't want to put it in the TR because I also have a delete button in the row).

I've tried

Code:

1. cell1.onclick = 'javascript:downloadAttachmentFile('+attachID+');';
2. cell1["onclick"] = new Function("downloadAttachmentFile('+attachID+')");
3. cell3.setAttribute('onclick','javascript:downloadAttachmentFile('+attachID+');');

but none seem to work!! I know the function is ok because the files that are already on the page work correctly, meaning it's only the dynamically created rows that are having the issues.

Code:

	
function addNewTableRow(fileTable, fileTitle, fileName)
	{
		var table = getMyElement(fileTable);             
		var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);
		var cell0 = row.insertCell(0);
		cell0.width = 25;
		cell0.className = "tblTicketFilesWhite";
		cell0["onclick"] = new Function("downloadAttachmentFile('+attachID+')");
	}

Hey guys, I have this JS.

Code:

function funcBut(){
	document.getElementById('ref_button').innerHTML = 'pressed';
}

Now, this button activates the function with no problem:
Code:

<input type='button' onclick='funcBut();' value='Change Text'/><br />

But this link won't work and I don't understand why
Code:

<a href="#" onclick="funcBut(); return false;">test</a><br />

Can anyone help?

I am creating a weather widget for the iphone. The program creates an xml request for a weather feed and then parses the response. Depending on the response different information is displayed. A different icon for each weather pattern. I have all of this working so far. What I want to integrate is the option to refresh the weather when a user taps on the icon.

Here is my code:


Code:

document.getElementByID("weatherIcon").innerHTML="<img src=\"Icon Sets/"+iconSet+"/"+MiniIcons[obj.icon]+iconExt/" border=2 onclick=\"refresh();\">"

Code:

function refresh()
{
weatherRefresherTemp();
}

I know that the function refresh works because it is called from another function that allows the refresh to happen automatically every 30 min. However, wanting to integrate an option to manually refresh I am trying to do it this way. The code never seems to fire, nothing happens. I've added the border option for testing and don't even see that. I've been using a javascript editor and I do not get any errors. Any suggestions would be greatly apprectiated.

Hello....I have written a PHP script for a secure client login system and it is working on Firefox and Chrome. But it doesn't work on Safari and IE. I have noticed that some of the javascript functions do not work at all while a few of them work. Can somebody please take a look and let me know what could be wrong?

I am pasting the part of my code that does't work up he

<script type="text/javascript">
function newdir(i)
{
alert('Newdir!');
var newdir=prompt("Please enter the name of the folder");
if (newdir!=null && newdir!="")
{
document.getElementById('newdir').value= newdir;
document.getElementById('folder').value= i;
document.getElementById('download').value = '';
document.myform.submit();
}
}



</script>

<?php

$dir = '../Users/gcreddy/'

echo '<tr><td></td><td></td><td><a href=# onMouseOver="this.src=\'images/delete_s.png\';" onMouseOut="this.src=\'images/delete.png\';" onClick="setdir(&apos;'.$dir.'&apos"><img src="images/delete.png" name="Delete"></a></td><td></td><td></td><td><a href=# onMouseOver="document.newdirimg.src=\'images/newdir.png\';" onMouseOut="document.newdirimg.src=\'images/newdir_s.png\';" onClick="newdir(&apos;'.$dir.'&apos"><img src="images/newdir_s.png" name="newdirimg"></a></td></tr>';

echo '<tr><td></td><td></td><td>Upload file:<input type="file" style="background-color:gray;" name="datafile" size="40"></td><td><a href=# onMouseOver="document.load.src=\'images/upload_s.png\';" onMouseOut="document.load.src=\'images/upload.png\';" onClick="upload(\''.$dir.'\')"><img src="images/upload.png" name="load"></a></td><td><input type="hidden" name="login" value="'.$user.'"><input type="hidden" name="password" value="'.$password.'"><input type="hidden" name="number" value="'.$indexCount.'"><input type="hidden" id="folder" name="folder" value=""><input type="hidden" id="newdir" name="newdir" value=""></td><td><input type="hidden" id="download" name="download" value=""></td><input type="hidden" id="Delete" name="Delete" value=""></tr></TABLE></form>';

?>

When I click on the create folder button (newdir.png), I don't see the alert message that I gave for debugging. I have the SAME problem with 2 more buttons on the same page.

I would be glad if somebody could let me know what the problem / solution is.

Regards,
G.C.Reddy

Code:

<img id="who" class="who" src="who.jpg" alt="Warriors Chosen For Battle" title="Warriors Chosen For Battle">
<img id="chosen" class="selector" src="selector.jpg" alt="Click for next image" title="Click for next image" onclick="chosen()">
<img id="ambassador" class="selector" src="selector.jpg"  alt="Click for next image" title="Click for next image"onclick="ambassador()">

Code:

function chosen()
{
document.getElementById("who").src="chosen_for_christ.jpg";
}

function ambassador()
{
document.getElementById("who").src="ambassador.jpg";
}

Yeah so basically when I click on one of the selector images I want it to change the value "who" images src value. I'm making an image selector, it works fine in IE, but every other browser it refuses to do anything.