I need that use href="" attribute for button
like this <button href="link">click me</button> Instead of <a href="link">
that's wrong .
I think that I've to try this code
<button onClick="FN('MY Link For Example www.stackoverflow.com')" >click me</button>
<script>
function FN('URL'){
--> Go to MY Link For Example www.stackoverflow.com
}
<script>
So what do u guys suggest I should do ?
Try this. This will navigate to the link on click.
<button onclick="window.location.href='http://www.stackoverflow.com'">click me</button>
Why you don't use <a type="button" href=""></a>
Or if you really want a button, so <button onclick="window.location.href=""></button>
I think this will solve your problem
<a href="http://www.stackoverflow.com/">
<button>click me</button>
</a>
href attribute can not be used on button tag , if you want button like appearance for your a tag you can use add style to your a tag and make it look like button , add bootstrap reference then add button class to your anchor tag.
Custom Bootstrap Button , but if you still want to use button tag then adding onclick event is better option
Related
I have created a button on a landing page, I would like users to be redirected to another section (in my case the contact section) on the same page when they click this button. I have tried doing this but it's not working
document.querySelector('#btn').
addEventListener('click',()=>{
document.querySelector('#contact').
style.scrollBehavior = 'smooth'
})
<button id="btn">Discover Now</button>
<section id = "contact" class="contact"></section>
I have also tried this
<button>Discover Now</button>
but did not work, where am I doing it wrong?
In CSS, set scroll-behavior property like this:
html {
scroll-behavior: smooth;
}
In HTML, add an a tag with a href attribute refering to certain section:
Click
<div id="contact"></div>
Just
Discover Now
You can't put a link inside a button. Use CSS to make the link look like a button.
You having a ; inside a javascript object { behavior:'smooth' ; } which make an error syntax, you also could press f12 to check the console logs, im sure it yelling at you the same when you click the button, something like unexpected token ;:
<button id="btn">Discover Now</button>
<section id = "contact" class="contact">
<script>
document.querySelector('#btn').
addEventListener('click',()=>{
document.querySelector('#contact').
scrollIntoView({
behavior:'smooth'
});
</script>
You are missing a closing section tag.
<section id = "contact" class="contact">
lorem ipsum
</section>
You may want to check on this page for explanations:
https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section1
Why use javascript? You can do this with just html. All you need is:
Discover now
<div id="contact">Contact section</div>
Neither of your examples are valid html btw.
using scrollit it is easy to customize http://www.bytemuse.com/scrollIt.js/
Discover now
That's what i recommend using.
You can use javascript with this
<button id="contact">Discover now</button>
document.getElementById("contact").addEventListener("click", function(){
location.hash = "contact";
});
It is pretty simple. I just want to have a clickable word/button that will activate an image to appear into a div. What is the cleanest way to do this? thanks
Quickest way would be to add a blank image tag where you want the image to appear, and then use jquery to add/change the source
$('#button').click(function(){
$('#imgonclick').attr('src', 'http://example.com/myimage.jpg');
});
whhere #button is a button with class button, and #imgonclick is an img tag with class of imgonclick
Jquery is super easy, but if you have to stick to JavaScript you can try something like this:
<div id="image"></div>
<button id="imgBtn" type="button" onclick="displayBtn()">Click Me</button>
function displayBtn() {
document.getElementById("image").src = "something.gif";
}
OR... if the div already has an image src property set, just show it.
<div id="image" src="something.gif" style="display: none;"></div>
<button id="imgBtn" type="button" onclick="displayBtn()">Click Me</button>
function displayBtn() {
document.getElementById("image").style.display = "block";
}
I have this anchor which has an onclick function that changes the background color of certain div to green. It is properly working but the problem is it needs to be double clicked in order for the function to be executed.
HTML:
<a onclick="btngreen()" href="">MENU</a>
Javascript:
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = 'green';
}
You could use ondblclick
<a ondblclick="btngreen()" href="">MENU</a>
As per my understanding of your problem.
Try this code. use # in href
<a onclick="btngreen()" href="#">MENU</a>
or you can use
<a onclick="btngreen()" href="javascript: void(0)">MENU</a>
Works fine for me. Only issue I had was your empty href="" tag so I removed it. You could also use href="#" if you do not want to remove it.
<script>
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = "green";
}
</script>
<a onclick="btngreen()" href="#">MENU</a>
<div id="nameofdiv" style="width:100px;height:100px;"></div>
If you do not need the button to be a link, you could simple change it to another tag such as <p> since the a will be trying to naviagte the page.
<p onclick="btngreen()">menu</p>
<script type="text/javascript">
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = "green";
}
</script>
or you could also just default the link to not navigate from the page such as this example below.
<a onclick="btngreen()" href="#">menu</a>
<script type="text/javascript">
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = "green";
}
</script>
Using the href="#" is a dead link and will not navigate the page anywhere.
I have this code.
<li class="active">
Weekly Payment
</li>
<li>
Advance Payment
</li>
<li>
Expenses
</li>
My question is that can I use <button> instead of <a> to achieve this? I changed it to buttons but they are not working.
Yes. Use <button type="button" onclick="window.location.href='YOUR URL HERE'">Link Text</button>
You can't use href in button but you can use data-href attribute to do this work. When button clicked get value of data-href and use window.location.hash to going to target id.
$("button").click(function(){
window.location.hash = $(this).data("href");
});
#first, #second, #third {
height: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-href="#first">First</button>
<button data-href="#second">Second</button>
<button data-href="#third">Third</button>
<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
You can try to take a look at this
Or you can create a button with a <a href> inside of it. I dont know wat you are trying to achieve with changing it into a button?
<button type="button">
hello
</button>
if it is for the style you can just apply a style to the a tag like this Go to Google
Goodluck!
Whenever you use #something in an anchor tag's href attribute it actually take you to an element in same page who's id is 'something'. You can use it like this as well:
click
In this case it will take you to the anotherpage.aspx page's element who's id is 'something'.
Now the purpose of button is completely different, but there are some ways to satisfy your requirement but that is not recommended. You should use anchor tag in this situation.
Here is a great link to show the difference between anchor and button tag. Check it.
Thanks.
Button does not have href functionality, so unless you use some JS functions to simulate this - No, you can't
You can use the styles over <a class="your-btn-style"> to show your anchor like a button.
If you are using bootstrap, you can simply add class="btn btn-primary" in your anchor for example :
Advance Payment
I also used this approach in my project :
I have a export to excel link on my page like:
<a download="queryResults.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">Export to CSV</a>
I would like to present it as a button, I tried something like:
<button download="queryResults.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">Export to CSV</button>
Hoe should I get it to work? Thanks.
<a download="queryResults.csv"
onclick="return ExcellentExport.csv(this, 'datatable');" href="#">
<button>Export to CSV</button>
</a>
The button element has no href attribute. Instead you have to provide a type attribute, which has to be type="button". See the specs here: HTML button tag