Javascript - clear an attribute of an element - javascript

I have an HTML element:
<a id="link" href="javascript : void(0);" onclick="jsFunction();">Some Text</a>
And when a button is clicked I want the onclick attribute to be cleared. Something like
<a id="link" href="javascript : void(0);" onclick="">Some Text</a>
I tried doing this way :
document.getElementById('link').onclick="";
which didn't work.

Use removeAttribute()
document.getElementById('link').removeAttribute('onclick');
SEE DEMO

Related

On click event on HTML requires double click

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.

How to conditional set the id attribute of a HTML element with angular js?

I want to set the id attribute of a HTML element conditionally.
Simple way:
<!-- expression = true -->
<div ng-if="expression">
<a href id="this-one">Anchor with id</a>
</div>
<div ng-if="!expression">
<a href>Anchor without id</a>
</div>
output-if-expression-true = <a href id="this-one">Anchor with id</a>
output-if-expression-false= <a href>Anchor without id</a>
Can I avoid this with something like a ternary operator ? for example ...
<a href ng-attr-id="{{expresion ? 'this-one': ''}}">Anchor</a>
Why do you ask if you already know the answer :-)? Try it out, it is indeed
<a href ng-attr-id="{{expresion ? 'this-one': ''}}">Anchor</a>
The above solution didn't work for me. The following did:
id="{{expression ? 'this-one': 'that-one'}}"

Html and javascript: how to switch download link to button

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

jQuery Div OnClick trigger sibling link

How would I make <div class="hover"></div> on click trigger <a href="http://example.com" target="_blank">? I've tried using the sibling selector and I can't seem to get the hang of it..
When somebody clicks on div.hover I need a new window to open using the href of the sibling anchor.
<ul id="photoUL">
<li>
<div class="hover"></div>
<a href="http://example.com" target="_blank">
<img width="150" height="150" style="border: 1px solid #000000;" title="2013 Dirty Duathlon" src="http://example.com/example.jpg">
</a>
EXAMPLE
</li>
$('div.hover').on('click',function(){
window.location.href = $(this).next('a').attr('href');
});
Demo ---> http://jsfiddle.net/NGwL9/
Demo: http://jsfiddle.net/kuJPC/
This will open http://example.com in a new tab when .hover is clicked which will have the same behavior as <a href="http://example.com" target="_blank">
$('.hover').click(function() {
window.open('http://example.com','_newtab');
});
If you don't want to use "window.open", you can put a click handler on the hover and use the next function to simulate the click of the next anchor tag.
$('.hover').click(function(){
$(this).next('a')[0].click();
});
Here is a working jsfiddle:
http://jsfiddle.net/4FNJM/1/

Add data element to element

I have a link. Like this:
I want remove this title and put the title text in a data attribute. As data-title. How can i make this with jquery.
So remove the title element. And place the text of the title element. In a new title data element.
Thanks
// you'd probably wanna give an unique id to your anchor to more easily identify it
var anchor = $('a');
var title = anchor.attr('title');
anchor.removeAttr('title');
anchor.attr('data-title', title);
// set title data-title to value of title
$("a").attr("data-title", $("a").attr("title"))
// clear title
$("a").attr("title", "");
Also I would give your link a class, so this action doesn't run on every a on the entire page.
Try:
$("a").attr("data-title", $("a").attr("title"));
$("a").removeAttr("title");
User attr method to set the attribute of element. And removeAttr method to remove the attribute
$("a").attr("data-title", $("a").attr("title"));
$("a").attr("title", "");
// or
$("a").removeAttr("title");
PS: Would suggest a unique id or a class for the anchor element
<a id="1" href="#" title="Title from this link 1"></a>
<a id="2" href="#" title="Title from this link 2"></a>
var t = $("a[title='Title from this link 1']").attr("title");
$("#2").attr("title", t);
jsfiddle link : http://jsfiddle.net/NEBh4/
you can see the changes happen to the links in the result window by using firebug or any other dev tool
$(document).ready(function(){
//example code one
var tempLink = $('#link');//cash the jquery object for performance
tempLink.attr('data-title', tempLink.attr('title')).removeAttr('title');
/*In above example I used an id to capture the html element, which mean u can only do above step only for one element. If you want to apply above step for many links you can use the following code. In this case I'm using a class name for the link element*/
//example code two
$('.link').each(function(){
$(this).attr('data-title', $(this).attr('title')).removeAttr('title');
});
});
HTML for the above example
<!-- for example code one -->
<a id="link" class="link" href="#" title="Title from this link"></a>
<!-- for example code two -->
<a class="link" href="#" title="Title from this link 1"></a>
<a class="link" href="#" title="Title from this link 2"></a>
<a class="link" href="#" title="Title from this link 3"></a>

Categories