How to Auto Click in HTML Button - javascript

<h1>Welcome to My Page!</h1>
<h2>My name is Bob.</h2>
<h3>I hope you like it here.</h3>
<embed src="MY WEBSITE LINK" style="width:500px; height: 300px;">
<input type="checkbox" id="btd" onmouseover="myFunction()" onclick="alert('clicked')">
<script>
jQuery(function(){
jQuery('#btd').click();
});
</script>
I have the code. But didn't Work.
http://www.imagebam.com/image/31ac1b820717083
How to Auto Click Button Continue, from Image?

We can't do auto click in HTML, but we can call any function that the button does with Jquery.
To work Jquery code, you want to add this to your code
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
Actually when we click any button, it calls a function, that may be our own function or built in one.
Here Javascript can easily call any function without any button
Like this
//define the function
function alertsomething(){
alert("Hey, This is an alert inside that function");
}
//function works when button clicks
$("#btd").click(function(){
alertsomething();
})
//function automatically when page loads
$(document).ready(function(){
alertsomething();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btd" >Click me</button>
Here are the two ways to call a function. One is when you click the button and another one is when your page loads, that function will call automatically...
Thanks

<script> setInterval(function(){ document.getElementById('btn').click() }, 10000); </script>
Its working script for me
Send "data" from FORM 'POST' to refresh HTML page whith PHP code

Related

Click JS button on page load

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();

javascript open.window function in same page bugging

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!

Loading javascript function on button event

I would like to call a Javascript function once the button is displayed on screen. What I am looking for is similar to the 'onclick' attribute:
<input type="button" class="button-class" onclick="function(this)">
However, I would like the function to be called as soon as the button is displayed on screen i.e. it should be instantaneous (button creation=function call). I have already tried 'onload' but this does not seem to work. Is there a way to do this please?
Thank you
Put an script element invoking the function after the button element
<input type="button" class="button-class" onclick="fn(this)" value="button" id="btn">
<script>
function fn(obj){
console.log(obj)
}
fn(document.getElementById("btn"));
</script>
#Questionnaire, you can't do what you want since an action should take place for a button (click event) to execute code.
As a good practice, load your Javascript code after the page is done loading. This is to avoid blocking the rendering of HTML code since
Javascript is synchronous.
...
<script type="text/javascript">
function init() {
// Code for your button function here
}
window.onload = init();
</script>
</html>
The code above is pretty much it.
Just write the function name in onclick property instead of function(this) like the following..
<script>
function myFunc(e){
//do something
}
</script>
<input type="button" class="button-class" onclick="myFunc(this)">
#Bartman pointed out how the .ready() funtion handled it as a document.ready.
So i came up with a small solution to run the waanted funtion once the input button is created. Hotfix but cant imagine another solution
I hope this helps. If not please add a comment so i can edit the answer.
function clickFunc(e) {
alert("click event");
}
function loadFunc() {
alert("load event");
}
$("#button").click(function() {
$("div").append("<input id=\"but\" type=\"button\" class=\"button-class\" onclick=\"clickFunc(this)\">");
$("body").append("<script>loadFunc();<\/script>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button" type="button">
<div></div>

Make a Popup/Alert Window in a html with a "dont show again" option

I am trying to make a popup / alert window so that when the page is being loaded, the popup will open. I searched around and found something I like, but I don't know how to get this option working with the ability to not show the popup to the user more than once (with a "Don't show this again" option).
I added this to my header in the script part:
$(document).ready(function(){ alert('hi')});
I know that I need the jQuery script for this, so I added
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to my HTML page. This is working fine, but I don't know how I could modify my alert in a way for making a checkbox or a button with "Don't show this again".
I also found a solution where the alert was an external popup HTML page, but I want it inside my HTML page. Is there a way to solve my problem over that, or is the way over the alarm better?
Unfortunately, you can't do this through a typical JavaScript alert box. You'll need to build you own modal popup to simulate an alert box. jQuery's plugin jQuery UI has a really nice built-in function for this, and I'll use this in my example.
To give the user the option of not showing a window again, you need to make use of localStorage. You would need to create a condition that checks for whether a localStorage item is set. If it is not, display the modal, if it is, hide the modal:
if (!localStorage.hideAlert) {
$(function() {
$("#dialog").dialog();
});
}
else {
$("#dialog").css("display", "none");
}
In the modal itself, you would have a 'No' button that adds the relevant value to localStorage:
<div id="dialog" title="Show Again?">
<p>Would you like to show this dialog again?</p>
<button name="yes" class="yes">Yes</button>
<button name="no" class="no">No</button>
</div>
$(".yes").on("click", function() {
$("#dialog").dialog("close");
});
$(".no").on("click", function() {
localStorage.setItem('hideAlert', true);
$("#dialog").dialog("close");
});
I've created a working example showcasing this here.
This way, all of your code can reside within a single file, though remember that you'll still need to include the external jQuery UI JavaScript, and optional CSS:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Hope this helps! :)
In the example below, every popup window has a "Don't Show This Again" button.
Main document:
Code:
<HTML>
<Head>
<Script Language=JavaScript>
var expDate = new Date();
expDate.setTime(expDate.getTime()+365*24*60*60*1000); // one year
function setCookie(isName,isValue,dExpires){
document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
}
function getCookie(isName){
cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1){return false}
endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
}
function initPopups(){
if (!getCookie('pop1'))
{popWin1 = window.open("1/pop1.html","","width=200,height=150,top=50,left=400")}
if (!getCookie('pop2'))
{popWin2 = window.open("1/pop2.html","","width=200,height=150,top=50,left=180")}
}
window.onload=initPopups;
</Script>
</Head>
<Body>
</Body>
The popup files are in a folder named 1
pop1.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop1',0,opener.expDate);self.close()">
</Body>
</HTML>
pop2.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop2',0,opener.expDate);self.close()">
</Body>
</HTML>

Dynamically alter URL

Please how can I change the feed URL in this script with link(href)
<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews');
});
</script>
<div id="test"> </div>
See example here http://www.zazar.net/developers/jquery/zrssfeed/example.html
The test Div displays the content of the rss feed
I just want to be able to alter the rssfeed(url) by clicking links with diffrent rssfeed url
<a onclick ="rssfeed('http://feeds.cnn.com/News');"></a>
note sure how you'd want the link to load it, but I'm assuming on click so this is what I would do..
<script type="text/javascript">
$(document).ready(function () {
$('.rss').click(function(){
$('#test').rssfeed($(this).attr('href'));
})
});
</script>
<a class="rss" href="http://feeds.reuters.com/reuters/oddlyEnoughNews">load rss</a>
<div id="test"> </div>
As it is shown here: http://www.zazar.net/developers/jquery/zrssfeed/example_menu.html
One can simply change the feed by calling .rssfeed again.

Categories