[SOLVED] Strange JS Behavior?

[MrFish]

I am scratching my head over this. It's very simple but I can't get an on event to work with an input. Am I missing something?html

<input type="text" id="nameInput" name='to' style='width: 80%; background-color: #fff; color: #555; border-radius: 15px; -moz-border-radius: 15px;'>

Js

$(document).ready(function(){	input = document.getElementById("nameInput");	input.onclick = function()	{		alert();	}});

Nothing. If put this in: alert(input); right before I set the on function I get [Object HTMLInputElement].There are no errors in my web console. I can check the input variable and see that it is set as well as the function.Then I type in the terminal: document.getElementById("nameInput").onclick = function(){alert();} and it works...What am I missing? It's so simple but it's driving me crazy.

[thescientist]

how does it "work" in the console? Doesn't alert require an argument? Is this just a test case, or are you just using jquery for document.ready?

[MrFish]

I need to write something for onkeypress but I'm using alert to test it because I noticed the onkeypress never shot off. Now no events will run for this input. There are some other functions in the $(document).ready and they all work fine. After typing in that line "document.getElementById("nameInput").onclick = function(){alert();}" in the console the onclick event works for the input. But for some reason it doesn't work when the page loads.

[thescientist]

what about just 'click'?

[justsomeguy]

I believe the event handler names in Javascript are camelcase, so it would be onClick instead of onclick.

[thescientist]

I believe the event handler names in Javascript are camelcase, so it would be onClick instead of onclick.

yeah, that would probably be it. If he was to use jquery to assign the events though, I know it would just be click...

[MrFish]

		input = document.getElementById("nameInput");		alert(input);		input.onClick = function()		{			alert(1);		}		input.onclick = function()		{			alert(1);		}		input.click = function()		{			alert(1);		}		$("#nameInput").click(function()		{			alert(1);		});		document.getElementById("nameInput").onclick = function(){alert(1);}						//This one works fine		$(".tab").click(function()		{			window.moveTabTo($(this));		});

I've tried all of the suggestions and the JQuery version. Right after there is a click event for something else and that works. If someone wants to see the page I can pm you a login and password because this is for a users profile.

[justsomeguy]

It looks like it works for me when I use lowercase, e.g.:document.getElementById('ext-gen38').onclick = function(){alert('click');};

[MrFish]

I works fine in the console but it won't work when I have it on the page. That's the strange behavior

[Ingolme]

It sounds like you might be trying to access an element before it's loaded into the DOM. Have you checked the error console to see what it says?

[MrFish]

There are no errors in the console. And when I alert the input variable before I try writing the function and it shows that the DOM is loaded.The input isn't dynamically generated so there is nothing stopping me from adding onkeypress="" in the tag itself so I think that's what I'll have to do. But this is very strange.

[ShadowMage]

Maybe a little context would help. Like is this in an external file? Is it wrapped in window.onload or document.ready?If your HTML isn't too long, could you post the entire thing?

[Ingolme]

So you have this code?

input.onclick = function() { alert('text'); }

[thescientist]

It looks like it works for me when I use lowercase, e.g.:document.getElementById('ext-gen38').onclick = function(){alert('click');};

that worked for him in the console, but he's trying to assign it 'manually' to the element itself. Or is your example from within the browser? are you sure nothing else could be interfering? have you taken everything out but that? personally, I have started using addEventListener, but it would still stand to reason that the implementation you are attempting should work though...

[thescientist]

Maybe a little context would help. Like is this in an external file? Is it wrapped in window.onload or document.ready?

It sounds like you might be trying to access an element before it's loaded into the DOM. Have you checked the error console to see what it says?

I think the original post established the user of jquery's document.ready and that the element is alert correctly prior to being assigned the event handler.although context never hurts though. I'd still advocate one element and event handler and post the code so we can all try it along with you.

[justsomeguy]

If jQuery is doing anything with regard to the text box, it might also be overwriting the click handler.

[MrFish]

EDIT: If you login it's in the far right tab of the profile pageYou can look at it here: http://micahwilliamson.com/work/treatolife...b/?page=profileUsername: testPassword: testThe entire JS that I'm using for this page is this-

<script type='text/javascript'>	$(document).ready(function()	{					input = document.getElementById("nameInput");		input.onclick = function()		{			alert(1);		}					//This one works fine		$(".tab").click(function()		{			window.moveTabTo($(this));		});				window.moveTabTo = function(obj)		{			target = obj.attr('target');			html = $("#" + target).html();						$(".tab.active").removeClass("active");						obj.addClass("active");						$("#blackBox .inner").html(html);		};				window.moveTabTo($(".tab:first"));				off = $("#chatboxes").offset();		l = off.left;		t = off.top;				w = 45				$("#blueball").css("top", t-6).css("left", l+w+6);				$("#chatboxes").click(function()		{			$(this).children("img").attr('src', 'images/chatboxes.png');			$("#blueball").css('visibility', 'hidden');						$.get("actions/tryread.php", function(d)			{							});		});	});	</script>

This is not in the header.The form html is this-

<form action='actions/trysendmessage.php' method='post'>				<table id="messager">					<tr>						<td>To:</td>						<td>							<input id="nameInput" type="text" name="to" style="width: 80%; background-color: #fff; color: #555; border-radius: 15px; -moz-border-radius: 15px;"/>						</td>						<td></td>					</tr>					<tr>						<td>Message:</td>						<td>							<textarea name='body' style='width: 80%; background-color: #fff; color: #555; border-radius: 15px; -moz-border-radius: 15px; height: 150px;'></textarea>						</td>						<td>							<img src='images/paperairplane.jpg'/>						</td>					</tr>				</table>			</form>

[jeffman]

You're testing this in IE, right? IE has a history of rejecting identifiers that duplicate element names, existing id's, and so on. Trying calling your variable myInput instead of simply input.I'm suspicious because you said that direct access to the element does work: document.getElementById("nameInput").onclick

[MrFish]

I'm actually using chrome. Changed it to myInput. Still not working :\

[jeffman]

Worth a try.

[MrFish]

I've decided to use onkeyup inside the tag as an attribute. This works even if the original problem isn't fix.It's still a mystery but not necessary to solve at this point (so you can go for it but I don't want to waste your time). Would still be nice to know though.

[justsomeguy]

Where is the field on your site that you're having a problem with?

[MrFish]

Well I was able to get it to work using onkeyup as an attribute.But the js still have a onclick event in the code (it just doesn't trigger). I don't need it at this point but you can look at it here- http://micahwilliamson.com/work/treatolife...b/?page=profileuser: testpass: test

[Ingolme]

I don't think the text input supports the onclick event: http://w3schools.com/jsref/event_onclick.asp

Supported by the following JavaScript objects:button, document, checkbox, link, radio, reset, submit

[MrFish]

I typed <input type='text' onclick="alert()"/> in the live editor and got an alert when I clicked on the input.