How to switch one page to another page using js? [duplicate] - javascript

This question already has answers here:
Is there a way to get a <button> element to link to a location without wrapping it in an <a href ... tag?
(10 answers)
Closed 5 years ago.
I want to know that how i call/switch one page to another page using javascript.
I am trying to creating a Game.
in which 2 slides.
First Slides is for game overview in which there is a
when i click on play button it should redirect me to second page.
i want to know how it will work in JavaScript.Can't use html.
Here is my game link which i want to create.
https://www.screencast.com/t/qmbzE9nWei2c
Please watch this link and understand how it work and help me give me some tips.
Thanks

You can do this by simply adding an onclick event to the button:
<button onclick="location.href='www.example.com';"> Play </button>

Related

How do I click on a link that is 1000px down without the action taking me at the beginning of the page? [duplicate]

This question already has answers here:
How to prevent a click on a '#' link from jumping to top of page?
(24 answers)
Closed 7 months ago.
I'm currently working on a Cooking Recipe sharing website and there's a matter on my Likes/Dislikes system.
The matter is when I click on the link "LIKE👍" as you can see in this picture, the page don't stay on the same position, it directly taking me at the beginning of the page, if you have some JS code to share with me in the purpose to solve my problem, please share.
I hope you understand my point, this matter can be resolved in JS but, I'm not a JS developer
it is complicated to solve the problem when you don't provide any code example.
However, this can be triggered from an anchor: ">
which moves you to the element having id="".
Or check the event function when you click on the like button.

How to use javascript to show the list of a datalist? [duplicate]

This question already has answers here:
Programmatically make datalist of input[type=url] appear with JavaScript
(2 answers)
Closed 2 years ago.
I have a datalist. Its list is empty at the beginning. I use javascript to append the options to that list and want to show the list immediately without clicking it manually. I may need to use javascript code to implement this. Could anyone know how to do this? Thanks in advance! By the way, document.getElementById("element").focus(); This doesn't work. It can only move the mouse to the input area but can't show the list. I want to show that list.
We need to create the "append the options to that list" function.
I think we can create that function based on the behavior of the click, and then run it after the page loads.

creating javascript bookmarklet [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
I need a javascript bookmarklet that will click on a button within a web based program I use for work. It is just the refresh button for part of the page. The element information (from Google Chrome's developer tools) is listed below.
Refresh
I tried this:
javascript:document.getElementsByClassName("Ref btn btn3d TableBtn").click();
Seems to do nothing.
I haven't messed with bookmarklets or javascript in a very long time, but I know something like this is possible.
You're getting an array returned to you. Trying to click on it is failing because even if there is only one matched element, you still aren't running your click function on it. You need to run your click function on that specific element by picking it from he returned array.
var button = document.getElementsByClassName("Ref btn btn3d TableBtn")
button[0].click()
The exact syntax you would use in your bookmarklet would be;
javascript:var button = document.getElementsByClassName("Ref btn btn3d TableBtn"); button[0].click();

Displaying javascript variable without clearing screen [duplicate]

This question already has answers here:
Document.write clears page
(6 answers)
Closed 8 years ago.
I am learning how to develop and I wanted to work on a simple "clicker" game using HTML5, CSS3, and JavaScript. I'm looking to practice creating something similar to Cookie Clicker. I have created three icons and they each serve a purpose. I would like to figure out how to display a modified variable on a portion of the screen without clearing the screen or having to resort to a window popup.
Here is the link to the project if anyone is interested in helping:
https://github.com/HandleThatError/Practice
The function in question is the displayPoints function in the master.js file. I currently have the following:
function displayPoints() {
confirm(numClicks);
}
This does what I want. It displays the correct number of clicks. If I click on the middle button twenty times and then click the "Display Points" button, it'll display the right number of points. However, it does it in a popup window. How can I display the number of points inside the browser without using a popup window?
I tried the following code:
function displayPoints() {
document.write(numClicks);
}
This code worked inside the browser but it cleared the screen of the icons, so it's not possible to keep generating points by clicking on the second button.
tl;dr - How can I update variables in real time, on the browser screen, without using a popup window and without clearing the screen? Any help would be much appreciated.
You can use an html element on the page and fill it with data such as:
<span id="numClicksResult"></span>
<script>document.getElementById('numClicksResult').innerHtml=10;</script>
This is an important concept that links HTML and JS:
You need an element to store what you're going to update. This is usually a div.
<div id="myDiv"></div>
Then, in your JS, you need a way of accessing the div.
document.getElementById("myDiv");
This gives you the element, but you need to update the element's value.
document.getElementById("myDiv").innerHTML;
So, you can access the value, but you need to update it whenever there's a click. When the user clicks, you do all of the work you need on your variable and then...
document.getElementById("myDiv").innerHTML = myVar;

HTML5 how to take a print screen on a particular div class or id [duplicate]

This question already has answers here:
Using HTML5/Canvas/JavaScript to take in-browser screenshots
(7 answers)
Closed 9 years ago.
I am using html5 webpage i displayed some product list, this list are inside the div tag this is designed using css. i want to print the product list get the css style.
i need to click a button
that button to capture and display the window particular div class or id.
then to print the div class or id
These links will give you a good idea of what you are looking for
How to take screenshot of a div with JavaScript?
https://www.idontplaydarts.com/2012/04/taking-screenshots-using-xss-and-the-html5-canvas/
They all do it by using HTML Canvas, if you are new to it then here is a tutorial to help you out
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial?redirectlocale=en-US&redirectslug=Canvas_tutorial
There are other ways too. You can also do it by using a Javascript API
http://grabz.it/api/javascript/
or
http://html2canvas.hertzen.com/
Hope it helped !

Categories