I am new to javascript. Please find the below code for button,
<p class="actions">
<button class="button primary" type="submit">Login</button>
Sign Up
</p>
I need code to click this button. Anyone please help me. Thanks in advance.
Can you provide the rest of your code including the script section so we can see what you have there?
Basically however, if you just need the button to register a click I would change the button Id to an element since it's a unique element. Let's call it id =button1 . Then in your script section you would type
document.getElementById("button1").onclick=function(){
}
And type what you want to happen inside the {}
Related
Here is the "submit" button in the form with no onclick attribute.
<div id="243c0bb6-584e-4d48-a8fa-4308cd632028" class="nike-unite-submit-button joinSubmit nike-unite-component blurred">
<input id="d7e56d05-36e1-42f7-922b-d2979375007a" type="button" value="CREATE ACCOUNT">
</div>
I am more confused about the <form> tags from the Nike website source:
<form id="nike-unite-joinForm" class="nike-unite-form" method="post"
action="javascript:;" onsubmit="return false;">
...
</form>
How do I find out what is happening when I actually click the button on the page?
Using mouse-click breakpoints in chrome dev tools gives me a plethora of JavaScript functions takes too long for me to parse through.
If there are attributes or listeners added to the ID (such as a link to a script), I could not find them after using "Command-F" on the different attributes of the form.
The only other clue which I am not sure how to purse is that method="post".
I understand that all websites are different, but my question is a general one:
How do I figure out what the script that is being run when I click on the form?
Thanks in advance.
Try this:
document.getElementById('nike-unite-joinForm').submit();
This is from w3schools.com:
https://www.w3schools.com/jsref/met_form_submit.asp
EDIT:
Ok, I tried it myself on the registration website and it didn't work. Experimenting a bit with it I noticed an apparently random id is assigned to the DOM-Elements.
But I've found a solution:
document.getElementsByClassName("nike-unite-submit-button joinSubmit nike-unite-component")[0].children[0].click();
This works because the div in which the submit button is has a unique set of classes. So I get the first (and only) Element with this classes, and apply .click() to the first child element
Perhaps you could try to change submit with click:
document.getElementById('nike-unite-joinForm').click()
I'm trying to get a button written in HTML to link to a separate JavaScript file when it is clicked, the button in question is coded below
<input type="button" id="clickme" value="Submit" />
I am using the Brackets code editor, and the js file I want to be linked is in the same project as my HTML code, if that helps at all
thanks in advance
Load the script into the page with a <script> element.
Keep your code in a function instead of simply running the whole thing with the script is loaded.
Find the button in the DOM (e.g. with getElementById) and bind the function as a click event listener with addEventListener).
If you mean link, I would use an <a> (anchor) tag which has an attribute href which is the reference. Therefore, you could use:
Link to JS
Or perhaps you meant the onclick attribute which would be:
<input type="button" id="clickme" onclick="myfunction()" value="Submit" />
However, as was pointed out, this is not best practice either.
jQuery.click() vs onClick
Provides some options and reinforces the idea that onclick is not the best way to trigger a Javascript function.
Just link your js script to a page by:
<script src="js/button.js"></script>
and then just call action in that scripts through the class or id.
<button id="btnShow"><h1 class="jumbotron-heading">Expand</h1></button>
<p class="p1">Test</p1>
That's a jQuery not js, but anyway a good example as I think
$('#btnShow').click(function(){
$('.p1').show();
});
I've been rummaging through the web to how to click buttons for a project I'm working on with Javascript+JQuery(Still not very good). Luckily I was able to find my answer and figured out how to click basic HTML buttons that looked like this(Cut off some of the code just to get the point across).
<div class="ui-block-a">
<input type="submit" value="Buy Now" data-theme="d">
</div>
But now I've come across a button like this.
<div id="BuyWithRobux">
<div data-expected-currency="1" data-asset-type="T-Shirt" class="btn-primary btn-medium PurchaseButton " data-se="item-buyforrobux" data-item-name="Donations" data-item-id="170938328" data-expected-price="2" data-product-id="20832770" data-expected-seller-id="180359" data-bc-requirement="0" data-seller-name="Clone3102">
Buy with R$
<span class="btn-text">Buy with R$</span>
</div>
</div>
Just based off of what I know I don't think I can use what I used to click the last button which was...
$("input[type='submit']").click();
So my question is how can I click this "button"? I've tried using my old code on it to no avail. I rather not use Selenium, or anything if at all possible. Could anyone help me out with this? If you need anymore information just say what and I'll do my best to provide it, fairly new to this so don't know what to include sadly.
Thank you in advance.
By "clicking this button" If you meant to trigger a click on div#BuyWithRobux , You can do so like
$("#BuyWithRobux").click();
or
$("#BuyWithRobux").trigger("click");
The syntax for triggering a click remains the same, all you've to do is to use the right selector to target the element on which you need to trigger the event.
You can learn more about jQuery selectors here
I have a problem on the following code, imagine the rest is okay (html, head, body etc)
What I want to do is, when you click on one of the buttons the hidden text/images in the section show or hide, the code does that just fine. The problem is I also want it to take you to an anchor in that newly appeared section when you click on the button, and I cant seem to do that.
Here's the code on the HTML
<h2 class="especial">TITLE</h2>
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
<p class="normal"><input type=image src="images/img_beta/buttonimage2.png" onclick="show_section2();">Section2</p>
<hr>
<div id="Section1" style="display:none">
<a id="Section1_anchor"><h2 class="especial">Sect1TittleHere</h2></a>
<p class="interior">Blablah this is the content of section1</p>
</div>
<div id="Section2" style="display:none">
<a id="Section2_anchor"><h2 class="especial">Sect2TittleHere</h2></a>
<p class="interior">Blablah content of section2</p>
</div>
And here's the JS function that controls the onclick event, I have one for each section, but they are all the same.
<script language='javascript'>
//Variables
var sect1_guardian=0, sect2_guardian=0, sect3_guardian=0;
function show_sect1(){
if (sect1_guardian == 0) { document.getElementById("Section1").style.display="block";
sect1_guardian=1;
//Close the other sections if opened
document.getElementById("Section2").style.display="none";
document.getElementById("Section3").style.display="none";
//Reset guardians
sect2_guardian=0;
sect3_guardian=0;
}
else {
document.getElementById("Section1").style.display="none";
sect1_guardian=0;
}
}
Where and how should I add the link to the anchor? If i tried adding it to the button tag and the onclick event. I do something like this
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
Because the onclick event is in the image and I don't want the text to be hiperlinked. Clearly I'm loosing something/doing something wrong, probably an humiliating mistake, but I ask for suggestions and corrections.
If it's exactly a copy paste of your code, the onclick handler is called 'show_section1()' and the function is called 'show_sect1()'. Notice sect != section :) .
Should we look further?
You can have the html you proposed and do something like this:
window.location = document.getElementById("Section1").parentNode.href;
Replace 'Section1' with your particular section.
Allright, I found a solution, it was far easier and probably nobody said it because I was presenting the problem in the wrong way, but perhaps this will help somebody.
I wanted to make the button take you to an anchor in the document, right?
The code above worked well, you clicked on the button and it showed hidden text, or hide it.
Now, adding the following to the button code, it does the anchor thingy also.
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
I just added a tag to link the button, and used the HTML id (which I already used for the JS) to function as an anchor. I hope to have explained it clearly, and that it helps somebody!
Key was, use the html id as an anchor
Just wondering if there is a way to get a HTML <button> element to link to a location without wrapping it in an <a href... tag?
Button currently looks like:
<button>Visit Page Now</button>
What I would prefer not to have:
<button>Visit Page Now</button>
The button is not being used within a form so <input type="button"> is not an option. I am just curious to see if there is a way to link this particular element without needing to wrap it in an <a href tag.
Looking forward to hearing some options/opinions.
Inline Javascript:
<button onclick="window.location='http://www.example.com';">Visit Page Now</button>
Defining a function in Javascript:
<script>
function visitPage(){
window.location='http://www.example.com';
}
</script>
<button onclick="visitPage();">Visit Page Now</button>
or in Jquery
<button id="some_id">Visit Page Now</button>
$('#some_id').click(function() {
window.location='http://www.example.com';
});
Here's a solution which will work even when JavaScript is disabled:
<form action="login.html">
<button type="submit">Login</button>
</form>
The trick is to surround the button with its own <form> tag.
I personally prefer the <button> tag, but you can do it with <input> as well:
<form action="login.html">
<input type="submit" value="Login"/>
</form>
Just do this
<button OnClick=" location.href='link.html' ">Visit Page Now</button>
Although, it's been a while since I've touched JavaScript - maybe location.href is outdated? Anyways, that's how I would do it.
LINKS ARE TRICKY
Consider the tricks that <a href> knows by default but javascript linking won't do for you. On a decent website, anything that wants to behave as a link should implement these features one way or another. Namely:
Ctrl+Click: opens link in new tabYou can simulate this by using a window.open() with no position/size argument
Shift+Click: opens link in new windowYou can simulate this by window.open() with size and/or position specified
Alt+Click: download targetPeople rarely use this one, but if you insist to simulate it, you'll need to write a special script on server side that responds with the proper download headers.
EASY WAY OUT
Now if you don't want to simulate all that behaviour, I suggest to use <a href> and style it like a button, since the button itself is roughly a shape and a hover effect. I think if it's not semantically important to only have "the button and nothing else", <a href> is the way of the samurai. And if you worry about semantics and readability, you can also replace the button element when your document is ready(). It's clear and safe.
Well, for a link, there must be a link tag around. what you can also do is that make a css class for the button and assign that class to the link tag. like,
#btn {
background: url(https://image.flaticon.com/icons/png/128/149/149668.png) no-repeat 0 0;
display: block;
width: 128px;
height: 128px;
border: none;
outline: none;
}
You can make it a non-submitting button (<button type="button">) and hook something like window.location = 'http://where.you.want/to/go' into its onclick handler. This does not work without javascript enabled though.
Or you can make it a submit button, and do a redirect on the server, although this obviously requires some kind of server-side logic, but the upside is that is doesn't require javascript.
(actually, forget the second solution - if you can't use a form, the submit button is out)
<form action="portfolio.html">
<button type="link" class="btn btn-primary btn-lg">View Work</button>
</form>
I just figured this out, and it links perfectly to another page without having my default link settings over ride my button classes! :)
Here it is using jQuery. See it in action at http://jsfiddle.net/sQnSZ/
<button id="x">test</button>
$('#x').click(function(){
location.href='http://cnn.com'
})
Assuming that in your HTML file you've a button with id="Button", In the script.js(your script file), you can use this way:
document.getElementById("Button").addEventListener("click", gotoUrl);
function gotoUrl() {
window.location.assign("https://www.google.com/");
}
Now the button will lead you to Google!
For more info: https://www.w3schools.com/js/js_window_location.asp
You can also try this<button type=“Submit”><a href=“”>#</a></button>