I have the following html.
when I click on the link in IE it dumps the return value on an empty page.
in chrome it simply runs the function without touching the page.
Can something be done to make IE behave like chrome in this respect?
<html>
<body>
<script type="text/javascript">
function foo(){
return true;
}
</script>
<a title="call foo" href="javascript:foo()">return true</a>
</body>
</html>
The point of a javascript: scheme URL is that it runs some code, which generates some data, which the browser then navigates to.
If you just want to run some JS when something is clicked: Don't use a link.
Use the right tool for the job.
function foo(){
return true;
}
document.querySelector("button").addEventListener("click", foo);
<button title="call foo">return true</a>
<html>
<body>
<script type="text/javascript">
function foo(){
event.preventDefault();
return true;
}
</script>
<a title="call foo" href="javascript:foo()">return true</a>
</body>
</html>
You could use the event.preventDefault() method to prevent hyperlink default event in the click event. Like this:
<script type="text/javascript">
function foo(e) {
event.preventDefault();
////get the href attribute.
//var href = document.getElementById("btn").getAttribute("href");
////display the page. You could also using "window.open(href)" to open a new tab to display the page.
//window.location = href;
return true;
}
</script>
<a title="call foo" id="btn" href="https://www.google.com/" onclick="foo(this);">return true</a>
Related
i want to know how can i popup a window to a particular website when user clicks anywhere on the page.just like popup companies.Am i able to do that in html using javascript & jQuery ?
i would much appreciate any help.
Complete sample on pure JavaScript:
<html>
<head>
<title>Example</title>
</head>
<script type="text/javascript">
var popup = function() {
window.open ("http://example.com", "Window","status=1,toolbar=1");
}
</script>
<body onclick="popup()">
<h1>Click anywhere!</h1>
</body>
</html>
Result:
You can specify some parameters of your popup window:
Width and Height:
window.open ("http://example.com", "Window","status=1,toolbar=1,width=500,height=300,resizable=yes");
Complete reference on developer.mozilla.org
Bind the click to the body and enter the url
$('body').click(function(){
window.open('www.google.co.uk', 'New Window', 'height=200,width=200');
return false;
});
$('body').click(function(){window.open('www.stackoverflow.com')});
You can try this-
<script>
window.onclick = myFunction;
function myFunction() {
window.open('www.google.com', 'Popup Window', 'height=500,width=500');
}
</script>
Hi this is an odd question and i will try to ask it correctly. I have a function using javascript called load canvas.
function loadCanvas(canvas) {
relevant code here...
}
I also have a normal button called btn.
<button class="btn" type="button">Play!</button>
I am wondering can i disable the function until the play button is selected? The function is for a game using javascript. So on load there isnt anything there until i press play then it appears!
any ideas/help please?
$(document).ready(function(){
var loadCanvas= function (canvas) {
relevant code here...
}
$("#test").on('click',loadCanvas()); // using jquery
document.getElementById("test").addEventListener("click",loadCanvas()); // using javascript
<button class="btn" id="test" type="button">Play!</button>
})
If you are having issue because other method is triggering the function you can add a flag with a boolean and turn it on when you click..
Something like that:
The button don't change at all
<button class="btn" type="button">Play!</button>
The js code with this change:
var buttonClicked = false;
function loadCanvas(canvas) {
if(buttonClicked){
relevant code here...
}
}
And in the on click function add this before call the function:
buttonClicked = true;
At the end your js should look like this:
var buttonClicked = false;
function loadCanvas(canvas) {
if(buttonClicked){
relevant code here...
}
}
$(".btn").click(function(){
buttonClicked = true;
var canvas = ...;
loadCanvas(canvas );
});
EDIT
If you have more buttons with the class .btn you should use an id and change the selector of the .click() with the selector of the id instead of the class selector
As you mentioned in the comments <script type="text/javascript"> loadCanvas("game"); </script> You are calling the function as soon as the page loads. So you will have to change it to:
<button class="btn play-button" type="button">Play!</button>
<script type="text/javascript">
$('.play-button').click(function(e){
loadCanvas("game");}
);
</script>
If you are not using jquery you will have to handle the click event by javascript.
You got to do following:
function loadCanvas(game) {
alert('loading canvas');
}
<button class="btn" type="button" onclick="loadCanvas('game')">Play!</button>
I want to redirect the page to a different location according to the button clicked, i want something similar to this:
if(document.getElementById('button').onclick == true)
{
//redirect page
}
However this code is not working for me:
document.getElementById('button').onclick = function() {
//redirect page
};
the simplest way to do is add onclick() event in button tag.
<button id='button' onclick='redirectThePage();' >Click Me</button>
and in javascript
function redirectThePage(){
//redirect page
}
another way to do is
<button id='button'>Click me</button>
and in javascript
var button = document.getElementById('button');
button.onclick = function() { // redirect the page };
There are different ways to do the same thing.
1. addEventListener()
document.getElementById('button').addEventListener("click", function() {
redirect();
});
function redirect(){
//redirect page
}
Pro
No nesting javascript and HTML
Contra
More code
Can't see in HTML code whats happens by click
2. onclick (answered by slashy)
Note: If you find this better, all owner goes him/her.
<button id="btn" onclick="redirect()">redirect</button>
<script>
function redirect() {
//redirect page
}
</script>
Pro
Less code
You can see in HTML code what there happens by a click event
Contra
Nesting HTML and Javascript.
It can be easily acheived also with javascript:
<button id="btn" onclick="redirect()">redirect</button>
<script>
function redirect()
{
window.location = "http://www.google.com/";
}
</script>
jQuery:
$('#button').click(function(){
window.location.href = "index.php";
});
HTML:
<button id="button">Click next</button>
I need to call the method _trackingEvent if the button was clicked, So I added in the onlick in the button the following code :
<button class="btnInscription"
onclick="<script type="text/javascript">
$(function () {GA._trackEvent('Account','Subscribe','Not Facebook');});
</script>;">
when I look in the source of page all code that I put it up is whith red color. I think the problem is with parenthesis.
I see 2 problems :
you have unescaped " inside your attribute
you don't need the tag inside onclick ( onclick code is always javascript code)
the following code should work :
onclick="$(function () {GA._trackEvent('Account','Subscribe','Not Facebook');});"
don't do thinks like this!
Better this way:
<button class="btnInscription">blub</button>
<script>
$('.btnInscription').on('click', function() {
GA._trackEvent('Account','Subscribe','Not Facebook');
});
</script>
make sure to launch JS at the Bottom of your page
You are miss placing it.
The script tag should be in the head of the page and the onclick attribute should call the function :
//this should be in the <head> of the page, inside a <script> tag
function track() {
//$(function () {GA._trackEvent('Account','Subscribe','Not Facebook');});
console.log('executed when clicked');
}
<button class="btnInscription"
onclick="track()">test</button>
Also Try Once In Javascript
function testfun() {
//$(function () {GA._trackEvent('Account','Subscribe','Not Facebook');});
console.log('If Click == true then it will execute');
}
<button class="btnInscription"
onclick="testfun()">click</button>
try it Once In your File
<button class="btnInscription" id="my-btn">click</button>
<script>
$(dicument).ready(function(){
$('#my-btn').click(function(){
alert('clicked for testing');
{GA._trackEvent('Account','Subscribe','Not Facebook');}
});
});
</script>
I have the following code.
<!DOCTYPE html>
<html>
<head>
<title>Focus issue</title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var text = document.getElementById('text')
window.onload = function() {
text.focus()
}
window.onhashchange = function() {
text.focus()
}
}//]]>
</script>
</head>
<body>
<textarea id="text"></textarea>
<p>Click to focus</p>
</body>
</html>
Here is a JSFiddle demo of the above code: http://jsfiddle.net/DvU63/
Why doesn't the focus go on the textarea box when the page loads? On clicking the link, the focus does go on the textarea box, but I also want the focus to go to the textarea box on page load. Why doesn't it happen?
Note: I am aware of the HTML5 autofocus attribute for textarea. But this question is about why the above JavaScript code does not do what I intend to do.
You're doing the .focus() statement from inside an onload handler that is itself defined inside an onload handler. This inner onload will not be called because by the time you define it the onload event will have occurred. Try this:
window.onload=function(){
var text = document.getElementById('text')
text.focus()
window.onhashchange = function() {
text.focus()
}
}
Your demo, updated: http://jsfiddle.net/DvU63/2/
do this
<script type='text/javascript'>
window.onload=function(){
var text = document.getElementById('text')
text.focus();
window.onhashchange = function() {
text.focus();
}
}
</script>
fiddle