I use a Javascript code to open a link in new tab when a button is clicked. I use this button:
<button onclick="myFunction()">Link1</button>
<script>
function myFunction(){
window.open("Link1");
}
</script>
And in another post in the home page of my blog, I put another button:
<button onclick="myFunction()">Link2</button>
<script>
function myFunction(){
window.open("Link2");
}
</script>
The problem is, when I click the button to go to Link1, it opens Link2.
How can I put my buttons all in home page without having this bug?
Thank you,
Your functions have the same name, rename your second function to myFunction2():
<button onclick="myFunction2()">Link2</button>
<script>
function myFunction2(){
window.open("Link2");
}
</script>
Naming your functions differently will fix your problem. But if your buttons really do just open links in new tabs you are better off using an Anchor tag with target="_blank"
e.g.
link1
And if you need that to look like a button, you can just style it with CSS!
Related
I want my webpage to auto click a button when the page is loaded. This is my button:
<button class="configure-product configure-product-simple elementor-button" type="button" data-price="95" data-product_id="1934">Stel samen!</button>
I think this button calls a JS function of a wordpress plugin, so that you open the product configurator. If i copy this button html on another page tho it wont work. It will only work on the product page.
Im very new to developing, so i could really use some help. Does anyone have any ideas how to implement this?
window.onload = function() {
document.getElementById("my-button").click();
}
<button id="my-button" class="configure-product configure-product-simple elementor-button" type="button" data-price="95" data-product_id="1934">Stel samen!</button>
this is how to do it in jQuery
$(document).ready(function(){ //on document loads (you could change to window also)
$('#click').click(); // click
})
$(document).ready(function(){
$('#click').click();
})
$('#click').click(()=>{
console.log('thanks!');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="click"> Click Meeh </button>
another shorter way to do it in vanilla js
document.onload = document.querySelector('#click').click();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="click" onclick="console.log('hi')"> Click Meeh </button>
other ways to do it
https://stackoverflow.com/a/38517365/18001301
window.onload vs document.onload
document.getElementById("input").click();
The following code does not redirect to the given webpage
<form>
<button onclick='window.location.replace("../magnet/index.php")'>Replace document</button>
</form>
It is so because when you create a button within the form tags, it is created as a submit button by default. So, instead of redirecting the webpage, it submits the data and reloads the current webpage.
The following code will do the required job because now, the type of the button is button and not submit.
<button type="button" onclick='window.location.replace("../magnet/index.php")'>Replace document</button>
Even better, you can place your redirect code into a JavaScript function. Then you can call that function from within your HTML code. Like this
<script type="text/javascript">
<!--
function redirectTo(sUrl) {
window.location = sUrl
}
//-->
</script>
<button onclick="redirectTo('../magnet/index.php')">Get HTML!</button>
Hope this will work for you. Cheers
The answer was to add type="button" like #shivamag00 explained.
But be careful with replace(), it's not possible to use "back" to navigate back to the original document since you are replacing the history state.
An alternative is to use the assign() function, (documentation here)
Suppose you have a base url as
www.website.come
and want to go to
www.website.come/new-page
it's simple
<button type="button" onclick='window.location.assign("new-page")'>Go to new page</button>
It's worked for me, hope it's useful for someone else.
I have a small program in JSP which basically when I click on a document, it opens a new window that allows me to view it. The problem here is it would not show the viewer unless I update or install adobe flash player.
I added a hyperlink link where I can easily click on it and it prompts me to "Allow" to view the document which is fine. The hyperlink looks like below:
<a href="https://get.adobe.com/flashplayer" >Enable Flash</a>
<img border="0" alt="Enable Flash" src="enable_flash.gif"/>
Now, I have to manually click on it, is there a way I can have the hyperlink auto clicked when the pop up windows shows?
I am new to JavaScript and HTML so I figured there is something that I could use like <body onload > .
Edit
This is how my code looks like now:
<body onload="Auto()" > <!--oncontextmenu="return false;"-->
<script>
function Auto(){
<a href="https://get.adobe.com/flashplayer" >Enable Flash</a>
<img border="0" alt="Enable Flash" src="enable_flash.gif"/>
}
</script>
Am I doing anything wrong?
You can simply use click() method
Add id to anchor element
<a href="https://get.adobe.com/flashplayer" id="myLink" >Enable Flash</a>
Add to your script
function automateClick() {
document.getElementById('myLink').click()
}
window.addEventListener("load", automateClick);
Yes..you can use below code and load your link there
$(document).ready(function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
});
OR
$(function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
});
OR
window.onload = function() {
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
}
You can do this with as little as one line, if you want to learn more about the approach I've used, then it may be worth your time looking into functions such as querySelector. Once you have the desired element, you can then simply fire the click method like so.
Demo
<script type="text/javascript">
document.querySelector('a[href="https://get.adobe.com/flashplayer"]').click();
</script>
I'm working on a website built using Laravel and AngularJS.
I want a certain link to open in a popup window.
The javascript code is
function popitup(url) {
newwindow=window.open(url,'test','height=400,width=550');
if (window.focus) {newwindow.focus()}
return false;
}
and the link is
<a ui-sref="test({id:test.id})" class="btn btn-primary fright" onclick="return popitup(this.href)" oncontextmenu="return false;">Resume</a>
when I click on the button the popup works fine but the link also opens up in the tab where I clicked it, but I don't want it to.
Is there a way to do it?
I would guess ui-sref will also bind a click-event and that event will trigger before yours.
You could skip the ui-sref and put the url in a data-attribute or inside the onclick-attribute. You could get the url using $state.href() instead. Then the problem may disappear.
Edit
You could bind it to a scope function and skip onclick all toghether. Something like this:
In the Controller (Also make sure you include $state in the controller first):
$scope.popitup = function(stateName, options) {
var url = $state.href(stateName, options);
newwindow=window.open(url,'test','height=400,width=550');
if (window.focus) {newwindow.focus()}
}
And in the HTML you invke the popuitup function with the state name and its parameters:
<a ng-click="popitup('test', {id:test.id})"
class="btn btn-primary fright" oncontextmenu="return false;">Resume</a>
Also see documentation for state.href.
<!DOCTYPE html>
<html>
<body>
Popup-window
</body>
</html>
try this code for popup window and change google.com to you site
I'm quite new to coding. I have a button with the ID='test'. I want to run a line of code in javascript or HTML to redirect users to a site when that button is clicked.
Button:
<button id="test" type="submit" onclick="setNick(document.getElementById('nick').value); return false; return false" class="btn btn-play-guest btn-success btn-needs-server primaryButton" data-itr="play_as_guest">
I tried running this:
<script>
document.getElementById("test").onclick = window.location='http://www.google.com/'
</script>
However, this would redirect straight away. I want it to redirect only when the button is clicked. Please help me fix this.
Many thanks.
You are assigning the redirect to the button where you need to assign it to a function.
You can try something like this:
document.getElementById("test").onclick = function(){
window.location='http://www.google.com/';
}
I would suggest use onclick on button, for example
your button will look like this
<button id="test" onclick="redirect()">Redirect</button>
Now in the script write the redirect function as
<script>
function redirect() {
window.location.href = "http://www.google.com/";
}
</script>