Develop Reference

JS Click event doesn't work

The code:
document.getElementById("theid").onfocus=function fone(){
document.onkeypress = function(myEvent) {
var code = myEvent.which;
if ((code === 13) || (code === 32)) {
document.querySelector('.someclass').click();
}
}
}
I can't get what is wrong with my code...
I'm trying to call the click() when Enter or Space buttons are used while the element in focus.
EDIT
Sorry, I just got too much of learning the code for today, I guess. The case wasn't the click event. The code is correct.

You could use JQuery to get this. Please see the following fiddle:
https://jsfiddle.net/ko842xbp/
document.getElementById("theid").onfocus=function fone(){
document.onkeypress = function(myEvent) {
var code = myEvent.which;
if ((code === 13) || (code === 32)) {
$('.someclass').click();
}
}
}
$('.someclass').click(function(){
alert(".someclass was clicked")
});

Trigger an event when the browser back button is clicked

I am trying to run some code when the browser back button is clicked.
How can i found out browser's back button with out changing the browser history?
I tried the code below.
I got an exception in the else block saying: "event is not defined".
window.onunload = HandleBackFunctionality();
function HandleBackFunctionality()
{
if(window.event)
{
if(window.event.clientX < 40 && window.event.clientY < 0)
{
alert("Browser back button is clicked…");
} else {
alert("Browser refresh button is clicked…");
}
} else {
if(event.currentTarget.performance.navigation.type == 1)
{
alert("Browser refresh button is clicked…");
}
if(event.currentTarget.performance.navigation.type == 2)
{
alert("Browser back button is clicked…");
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

use
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
// do something
}
if (direction == 'forward') {
// do something else
}
});

Okay. Besides the fact that you should not initially trigger the event and to .unload = FunctionName and not .unload=FunctionName() and that you need to pass the event-argument I checked the code in the browser.
currentTarget is empty - this totally makes sense as there is no event-target like onclick but it is just the site reloading/unloading.
Please debug the code by yourself by using this and fit it to your needs:
window.onunload = HandleBackFunctionality;
function HandleBackFunctionality(event)
{
console.log(event, window.event);
}
You will see that currentTarget is not set (while event is).

This is the only solution that works for me with IOS safari.
<script>
window.addEventListener( "pageshow", function ( event ) {
var pagehistory = event.persisted ||
( typeof window.performance != "undefined" &&
window.performance.navigation.type === 2 );
if ( pagehistory ) {
// back button event - Do whatever.
}
});
</script>

How to call one Script function from another

I try to validate Required fields in Java script. It will works fine on Chrome,Firefox.But it will not works for Textbox in IE at the same the scripts was works on DropDownlist validation on Submit button Click.
My Script For Validate Text Box:
function validateRecepitMaster() {
if ((!IsBlank(Pay_Amount))) {
ShowLabel(spPay_Amount);
spPay_Amount.innerHTML = "*";
Pay_Amount.focus();
return false;
}
}
function IsBlank(obj) {
if (obj) {
if ((obj.value.trim().length == 0) || (obj.value == null)) {
obj.focus();
return false;
}
return true;
}
}
The Working Script for DropDown
if (Cust_Id.value == "") {
ShowLabel(spCust_ID);
spCust_ID.innerHTML = "*";
Cust_Id.focus();
return false;
}
Above Both scripts woks fine on Chrome, Firefox, and not works at IE.
Thanks in advance

add below script before run yours:
String.prototype.trim=function()
{
return this.replace(/(^\s*)|(\s*$)/g, '');
};

Look in your console for the error that IE throws.
A possible candidate is:
obj.value.trim()
IE might not support trim (yet)

Focus inside a select with javascript?

The following code works fine in most browsers but it won't work in Internet Explorer CE Mobil and I can't for the life of me figure out why.
function autofocus() {
var el = document.getElementById("autofocus");
if (el === null) {
return;
} else if (el.tagName.toUpperCase() == "SELECT") {
if (el.selectedIndex == -1) {
el.options[0].selected = true;
}
}
el.focus();
}
$(window).ready(function () {
autofocus();
});​
It works perfectly in all the regular browsers I have tried but in Internet Explorer Mobile it seems to focus on the select list itself which means it's not possible to navigate the various options without clicking one. Maybe if I click one of the options instead?. See http://jsfiddle.net/mhenrixon/sbwCv/19/ for an example of what is not working.
EDIT: It does not have to do with the selectedIndex per se since most of the time there will be a selectedIndex like 15, 5, 27 or whatever. Just not -1.

On my Samsung Saga, I'm running:
Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11) VZW:SCH-i770 PPC 320x320
and the problem on this browser is the jQuery ready function.
If instead you use <body onload="autofocus()"> the <select> will have its first option selected. And that option is indeed focused; if I use the optical mouse, I can right-arrow to a different option and space-bar to select it.
So here's the test case I've ended up with:
<html>
<head>
<title>Test</title>
<!-- script type="text/javascript" src="jquery-1.4.2.js" -->
<script type="text/javascript">
function autofocus() {
var el = document.getElementById("autofocus");
if (el === null) {
return;
} else if (el.tagName.toUpperCase() == "SELECT") {
if (el.selectedIndex == -1) {
el.options[0].selected = true;
}
}
el.focus();
}
/*
$(window).ready(function () {
autofocus();
});
*/
</script>
</head>
<body onload="autofocus()">
<select autofocus="autofocus" id="autofocus" multiple="multiple">
<option value="0">0:17,00st</option>
<option value="P11">P11:1918,00st</option>
<option value="P12">P12:100,00st</option>
</select>
</body>
</html>
And of course it works on desktop browsers as well.

you can try if el.selectedIndex = 2; works or not, i can't seem to reproduce this problem in IE8, so may be the problem is just related to IE CE Mobile
function autofocus() {
var el = document.getElementById("autofocus");
if (el === null) {
return;
} else if (el.tagName.toUpperCase() == "SELECT") {
if (el.selectedIndex == -1) {
el.selectedIndex = 0;
el.options[0].selected = true;
}
}
el.focus();
}
$(window).ready(function () {
autofocus();
});

Place a variable as a HREF

Basically, is it possible to do something like....
Click me!
<script>
function clicked() {
if(myVar == 1) {
link="http://stackoverflow.com"
}
else if (myVar == 2) {
link="http://google.com"
}
}
</script>
This example is probably impossible due to it firing at the same time...
But is it at all possible to use variables there?
Basically, I need a link that'll bring you to two different places depending on a variable.
I suppose I could have two links, and just hide/show each one respectively depending on the variable, but I was wondering if it's possible another way?
I'm working with HTML, CSS, JavaScript, and JQuery...
Thank you!

You could do...
$('a').click(function(event) {
if (condition) {
event.preventDefault();
window.location = 'http://different-url.com';
}
});
If the condition is met, then it will take you to a different URL.
Otherwise, the link will work as expected.
If you didn't want to use jQuery, that'd be...
var anchors = document.getElementsByTagName('a');
for (var i = 0, anchorsLength; i < anchorsLength; i++) {
anchors[i].onclick = function(event) {
if (condition) {
event.preventDefault();
window.location = 'http://different-url.com';
}
}
}

You could simply use Javascript to do a redirect:
<script>
function clicked() {
if(myVar == 1) {
window.location = "http://url1.com";
}
else if (myVar == 2) {
window.location = "http://url2.com";
}
}
</script>

No it's not possible to do it the way you want.
Why don't you do this instead -
Click me!
<script>
function clicked()
{
if(myVar == 1)
{
window.location.href = "www.stackoverflow.com";
}
else if (myVar == 2)
{
window.location.href = "www.google.com";
}
}
Take a look at Mozilla Developer Center for further references about the window.location object.

you could do this:
<script> function clicked() {
if(myVar == 1) {
window.location="http://stackoverflow.com"
}
else if (myVar == 2) {
window.location="http://google.com"
} }
</script>

Try this out
Click me!
<script>
function clicked() {
if(myVar == 1) {
location.replace("http://stackoverflow.com");
}
else if (myVar == 2) {
location.replace("http://google.com");
}
}
</script>
Cheers. This will take you to the desired place based on the myVar values!

function clicked() {
var dest = "";
if(myVar)
dest = "http://stackoverflow.com";
else
dest = "http://google.com"
window.navigate(dest);
But I see everyone said about the same. Just check which of the methods works on most browsers