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>
Related
Here is the thing. I'm working on elementor EA lightbox. So when I click on an image a lightbox with video pops up. So I want it to redirect when the person clicks on the "X" button. We can achieve it with a script by adding an ID to the button and on click redirect to a link, I know. But the problem is with elementor, we can't actually add ID or Class to the close button.
This is how the close button looks like.
<button title="Close" type="button" class="mfp-close">×</button>
This is the code I tried. But it is not working with "getElementsByClassName" for some reason. And as I said I even can't add an ID to the button.
<script type="text/javascript">
document.getElementsByClassName("mfp-close").onclick = function () {
location.href = "www.google.com";
};
</script>
Can anyone see how this could work? Any help please?
document.getElementsByClassName("mfp-close") return an array
you can try
document.getElementsByClassName("mfp-close")[0]
<script type="text/javascript">
document.getElementsByClassName("mfp-close")[0].onclick = function () {
location.href = "www.google.com";
};
</script>
Change class to ID and then:
<script type="text/javascript">
$("#mfp-close).click(function () {
window.location.href = "www.google.com";
});
</script>
TRY using querySelector instead of getElementByClassName
document.querySelector(".mfp-close").onclick = function () {
location.href = "www.google.com";
};
I have two buttons on my page
<button id="reset" type="reset" value="Reset"
onClick="window.location.reload()"/>
<button id="random" type="button" onclick="randomPeg();">Empty random
peg</button>
function randomPeg()
{
window.location = window.location.href + "#refresh";
window.location.reload();
}
//At the start of JS code below
document.addEventListener("DOMContentLoaded", function(event) {
if(window.location.hash == "#refresh"){
window.location.hash="";
//Some more code
});
The first button just reloads the window.
On clicking the second button 'Empty random peg', I want to reload the page and then execute some more code after. I tried a few things with putting hash in the url but it doesn't seem to be working.
You could set a value into the persistent localStorage, and check at pageload if this value exists:
function reload(){
localStorage.setItem("showfancystuff",true);
window.location.reload();
}
//test on load
window.addEventListener("load",function(){
if(localStorage.getItem("showfancystuff")){
localStorage.removeItem("showfancystuff");
alert("wohoo weve reloaded!");
}
});
Please bear my ignorance.
I have a page with one button on it:
How to detect if the user clicks (on a computer) or touches (smarthone, tablet) this button?
I read the answers of this quite similar question but the solutions involves using advanced and comlicated libraries. I am just a beginner: d you know how to do this in simle JavaScrit or jQuery ?
Determine and bind click or "touch" event
Thank you all.
you could try to use a variable for this if you would like, maybe try
<script>
var buttonTouched = 0;
function anyFunc01() {
buttonTouched = 1;
}
function anyFunc02() {
if(buttonTouched == 1) {
console.log("button01 has been clicked at some point");
}
}
</script>
<button onclick="anyFunc01()">button01</button>
<button onclick="anyFunc02()">button02</button>
JAVASCRIPT
With your button use
<button onclick="myFunction()">Click me</button>
Then write your myFunction() in <script> in javascript. like this
<script>
function myFunction()
{
alert('Button clicked');
}
<script>
Read more here
http://www.w3schools.com/jsref/event_onclick.asp
JQUERY
Inlcude the jquery.js in your file then give button an ID then use a script.
Button:
<button id="submitbutton">Submit</button>
Jquery
$( "#submitbutton" ).click(function() {
alert( "Submit button clicked!." );
});
TOUCH OR CLICK JQUERY
But from what I know, the problem you can face here is the touch. Here is a code that could make for touch or click
$( document ).ready(function() {
$('#submitbutton').on('click touchstart', function() {
alert( "Submit button clicked!." );
});
});
Jsfiddle
https://jsfiddle.net/0xdLjvtu/
use jQuery!
var deviceEvent = ((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").on(deviceEvent ,function(){alert('click true!');});
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 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>