We Keep Coding

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

Could I revert events on an element to state before manipulation?

For my current project, I have an issue concerning event handling. The problem is that I have to add event listeners to an element and remove the events when the given element is closed. To simulate my problem, rather than making things complicated by opening and closing elements, I will present a couple buttons that will represent what should happen at certain occurrences:
//This event listener was added elsewhere in the script, or in another script:
$("#foo").on("click", function() {
alert("You just clicked on \"Foo\" button."); //<-- Do not remove this with $.off(), this would be the default event.
});
//This would be my own custom code (please do not remove vanilla/plain javascript here for the solution, as that will be the direction I want to be going for my project):
document.querySelectorAll("#add").forEach(node => node.addEventListener("click", function() {
$("#foo").on("click", function() {
alert("Another event has been added to \"foo\" button.");
}); //<-- How to remove only this event (or any newly event added with this button), and not the default event given above?
}));
$("#remove").on("click", function() {
$("#foo").off(); //<-- Do not remove default event with this, how? Or how to revert to default event?
});
$("#revert").on("click", function() {
//How could I revert whatever events were assigned to the "#foo" button (before the event(s) were removed by "#remove" button and before it was manipulated by the "#add" button)?
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button id="foo" class="btn btn-default">
Execute event(s)
</button>
<button id="add" class="btn btn-default">
Add event(s) to previous button
</button>
<button id="remove" class="btn btn-default">
Remove event(s)
</button>
<button id="revert" class="btn btn-default">
Revert back to default event
</button>
JSFiddle
I would like the "Remove event(s)" button to only remove the newly added event(s). Or I would like to keep it working this way and get the final button to work (so that I could use the required code to combine it with the removal of the functions, which in turn will result into the same behaviour I am looking for).
Could I "save" the default event on the <button id="foo"> in some way before removing any events on it (with in this case jQuery's $.off())? Could I make an exception for <button id="foo"> on the removal of events?

Here's what you would do using the regular DOM API:
function defaultListener() {
console.log("You just clicked on \"Foo\" button.");
}
function additionalListener() {
console.log("Another event has been added to \"foo\" button.");
}
foo.addEventListener("click", defaultListener);
add.addEventListener("click", function() {
foo.addEventListener("click", additionalListener);
});
remove.addEventListener("click", function() {
foo.removeEventListener("click", additionalListener);
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button id="foo" class="btn btn-default">
Execute event(s)
</button>
<button id="add" class="btn btn-default">
Add event(s) to previous button
</button>
<button id="remove" class="btn btn-default">
Remove additonal event
</button>
The key to being able to remove an event listener is passing a reference to the handler function to el.removeEventListener(eventName, handler) (which is why I put the code in two named functions defaultListener() and additionalListener() rather than the anyonymous functions your code used).

Creating button not calling any action inside form

Is there any way to create a button inside html form that wouldn't call an action specified in "Html.BeginForm"? I want to use it only for adding some elements to form by javascript. I have a different button that should call an action.
#using (Html.BeginForm...
{
...
<button id="addRow" class="btn margin-top-10 margin-bottom-10">addRowt</button>
...
}
The "addRow" button I'd like not to call any action.

Yes. You can listen to the click event of this button and prevent the default behavior. Assuming you ave jQuery library loaded in this page, you may use jquery preventDefault method to do this.
$(function(){
$("#addRow").click(function(e){
e.preventDefault();
// do other things as needed (ex : add a row to ui)
});
});

You can use an anchor tag that looks like a button if you are using bootstrap Then you put your JavaScript inside the tag like below:
<a href="#" class="btn btn-default" onclick="YourMethod()" >New Button</a>

HTML5 Javascript function not getting called on button click

I have an html page, thats intended to take user's email and password. I defined "login()" method in one of js file but the function doesn't get executed after button click.
HTML file:
http://pastie.org/10276940

Ok,
first, you should be careful about quotes and double quotes... there is already a mistake in your onclick code.
Then, I would not use onclick. I would do it by adding an eventListener (click) on the button, like this :
document.getElementById('myButton').addEventListener('click',function(){
//do something
});
Here is an example on this way to do it.
There are several other ways to do this, like you did with onClick, but here is just the way I would do the job.
http://jsfiddle.net/tz4bnu0m/4/
Problem is also that when you call login in your onclick event, function is just not defined (yet), here is a way to do it with your onclick event, just add function definition before you call it in onclick event :
http://jsfiddle.net/tz4bnu0m/5/
Hope it helps!
(since it is not an input type submit, you don't have to handle default action, click will not submit the form by default)

The problem is on the button.
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" onclick="login(document.getElementById("inputEmail").value,
document.getElementById("inputPassword").value)">Sign in</button>
You are mixing double quotes. Change it by single quotes an it works
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" onclick="login(document.getElementById('inputEmail').value,
document.getElementById('inputPassword').value)">Sign in</button>
This works but...
I don't recommend to you to make this events in HTML directly. You can separate this code and make it more reusable:
<button id="myID"></button>
<script>
document.getElementById("myID").onclick = function() {
// good stuff
};
//other way:
document.getElementById("myID").addEventListener('click', function() {
// good stuff
});
</script>
Good luck

jQuery click on action link not doing anything?

I have a button which when i click it i would like it to click a hidden action link.
The click on the action link is not doing anything. but if i click the action link my self it works, just not when i make jquery click it?
function myClickFunction() {
$('#CloseLink').click();
//$(document).on("CloseLink", "click", function())
}
<input id="btnClose" type="button" value=" Close " onclick="myClickFunction()"/>
<div style="visibility:hidden">
#Html.ActionLink("Close", "APClientIndex", "Home", null, new { id="CloseLink", #class = "btn btn-primary niceButton" })
</div>
Plain html:
<input id="btnClose" type="button" value=" Close " onclick="myClickFunction()">
<div style="visibility:hidden">
<a class="btn btn-primary niceButton" href="/Home/APClientIndex" id="CloseLink">Close</a>
</div>

If what you want is to simulate the user clicking an anchor tag, I don't think that is possible with javascript
What you can do is read the anchor tag's href attribute and change the window location manually:
function myClickFunction() {
var href = $('#CloseLink').attr("href");
window.location.href = href;
}

If I understand what you are trying to do is to fire the click action by javascript?
With $('#CloseLink').click(); you are not firing the click event, you are binding an action to the click, but you don't have any function inside like $('#CloseLink').click(function(){...});
So if you want to fire the click event you need to do $('#CloseLink').trigger('click');

$('#CloseLink')[0].click()
Is what i used as suggested by tewathia in the comments section.
The jQuery click method fires the onclick event of that element. In order to simulate a click on an anchor a tag, you need to run the click method of the DOM element itself.