I use a library which let me define href property on my links. But this lib don't allowed to define onclick property.
I want to execute JS function in my link. So I defined the following line (I know it's a bad practice, but I've no choice) :
Link
With this line, the JavaScript function runs correctly. But I need to get the element that fired the link clicked and the preceding code gives me Window object. I know href property doesn't fire an event but I really need to get the link clicked.
With button tag it's very simple by using onclick="get_element(this)" but with a tag I don't know how to do that.
If you want to try examples : https://jsfiddle.net/j8o7qvz2/
Do you have a solution ?
You can add this piece of Javascript code after generating all anchor tags. This will iterate to all anchor tags then set the onclick attribute based on the href then sets the href to #.
var links = document.getElementsByTagName('a');
for(var link of links) {
link.setAttribute('onclick', link.href);
link.setAttribute('href', '#');
}
function get_element(element) {
console.log(element);
}
Link
<br />
<button onclick="javascript:get_element(this);">BUTTON</button>
EDIT:
Since you can use external JS then maybe I'll add an answer with jQuery.
I don't know how jQuery does it may it iterates also but this is cleaner and shorter than Vanilla JS.
$('a').attr('onclick', $('a').attr('href'));
$('a').attr('href', '#');
function get_element(element) {
console.log(element);
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
Link
<br />
<button onclick="javascript:get_element(this);">BUTTON</button>
Related
I have the following link, which I need to use in a Wordpress/OptimizePress based site.
Click Me
The problem is that the OptimizePress LiveEditor will strip out the javascript. So you are left with this:
<a>Click Me</a>
I'd like to attach the above javascript after the page has loaded. I have three such links (forms) on this page. Each will have the same javascript. I was thinking maybe provide unique IDs for each but I'm not sure what is the best way to do this. Any ideas?
You can get onClick attribute value on Dom ready & store it into any global var.
var clickAttr;
$(document).ready(function(){
clickAttr = $('form a').attr('onClick');
});
After that on Window load you can add attribute onClick
$(window).load(function(){
$('form a').attr('onClick',clickAttr);
});
I am not sure that your requirement is satisfy with this code or not, but you can try this.
Note: I am writing for A tag which is inside form without id or class, you can add a class or id to A tag.
Try after load:
var $a = $('Click Me')
$( "a:contains('Click Me')" ).replaceWith($a)
I am creating a Chrome extension which removes the Google Redirection when clicking on a link on a Google search. I have done an inspect element on a link and I can see that there is a function called 'onmousedown' and also a 'data-href' which is the actual link to the website. I have been able to remove the 'onmousedown'. However, I was wondering how I can make the link the 'data-href'? Sorry if this is a bit hard to understand.
Here is an image of the inspect element. Basically I want to put the data-href in the a href.
Here is what I have done so far.
$(document).on("DOMSubtreeModified", function() {
$("a[onmousedown]").removeAttr("onmousedown");
});
You can use .attr() like below to get all elements with data-href attribute and it that value as the value of the href attribute.
$('a[data-href]').attr('href', function () {
return $(this).attr('data-href')
})
I have a script which is located in its own .js file, which I believe is used to look for a specific anchor and assign an onclick event where it will forward the user to another page.
$(document).ready(
function () {
"use strict";
$(".popup a").on(
'click',
function (event) {
event.preventDefault();
$("#the_link").click();
}
);
}
);
What does #the_link mean in the context of the rest of the code? I am trying to find out how and where it is getting its value from but I can't find it anywhere. Help!
I also replaced #the_link with www.google.com, but then after nothing happened where before a window pops up. What could I do to make it go to google? <-- testing purposes.
PS. I am very very new to javascript.
PSS. In honesty, I am not sure what is going on in that code above.
That is jquery, not plain javascript (so you might add the jquery tag to your question).
$() is jquery, and the # means get me the element with the id of "the_link". Go search your document for an id="the_link", there will be no # in the id field, the # is used to tell jquery you are querying by element id, as opposed to some other type of query (by other attribute, by class, etc).
In a valid HTML document, exactly one element may have a given id, so selecting by # is a way to refer to a unique element in the document.
$("#the_link") is jquery syntax, and it refers to the element with an id of "the_link" that is located in the HTML markup.
Somewhere in the HTML, you have (for example):
<a id="the_link" href="#">...</a>
Here, the href attribute is where you would insert the http://google.com to go to that link when the anchor element is clicked.
<a id="the_link" href="http://google.com">...</a>
Alternatively you can write in your javascript:
function (event) {
event.preventDefault();
window.location.href = 'http://google.com';
}
It means that you are accessing element with id the_link. Some of your elements in html has attribute id="the_link".
If you want to go to google.com when the_link is clicked:
document.getElementById("the_link").onclick = function(){
window.location.href="http://google.com" //this goes to google.com
};
Here is the code:
<span class='maincaptionsmall'>
Test
</span>
For some reasons of ajax and jquery codes in my page, I can't use HREF as Link, I mean, I can't use something like this following code:
<span class='maincaptionsmall'>Test</span>
So, How can i use jquery to get this css element maincaptionsmall and it will set it to href link ?
Even I can't use <div> too, I should use everything as <span>
Please give me an example that how to use jquery to set css element as href link.
Thanks in advance
CSS is not capable of doing such things. But JavaScript is! To change the href of an element first obtain the element:
var e = document.getElementById("elementid")
or
var e = document.getElementByClassName("elementclass")
Here are the basics on JavaScript selectors.
And then we can change the href property like so:
e.setAttribute("href", "http://google.com")
Good Luck!
You can open using JS/JQuery and CSS
Jquery has short simple code and is too fast too so I prefer that:-
Here is the Code :-
HTML
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
//Remember to add JQUERY on your page to make any jquery code work
<div id="example">Click Here</div>
JS
//UPDATED CODE:-
$(document).ready(function() {
$("#example").click(function () {
alert("K");
window.open('http://www.google.com/');
});
});
the Issue was that the function I gave you should be added under "$(document).ready(function(){"
Reg, "DIV or SPAN" u can use any tag, but give ID to that and whatever ID you are giving, mention the same in jQuery code too!
And Reg, JQUERY being called, please check on your page is there any other MAIN Jquery file being called? if there is already some other Jquery being called then this one is not required.
Please Check the updated Fiddle for your reference: http://jsfiddle.net/aasthatuteja/aPbje/
Let me know if this resolves you issue.
Enjoy!
I am working in a software which has its interface written in JavaScript
I am trying to add an HTML button to the interface by defining a button in the HTML main code, check how I did this http://dpaste.com/691324/
The problem is,, the button appears before the page loads, maybe because the HTML loads before the JS files, I don't know exactly !!! But it really looks ugly, when the button show before the page, and I want to find some trick that can delay the button or to be loaded at the same time with the javascripts..how is this possible?
I am not a javascript person, but if you are using JQuery, it should go something like this
$(document).ready(function() {
document.getElementById('divId').innerHtml = '<input type="button" value="button">';
});
'divId' would be id of Div tag (place holder) covering input tag.
Or you can also call some plain javascript function which sets innerHtml of 'divId' on 'Body' tag's onload event,
Well I think is that you should use an anchor instead, and if you want, style it as a button. Here is the way to create the button with pure JS:
var anchor = document.createElement('a');
anchor.setAttribute('href', '/opentripplanner-tripArabic/index.html');
anchor.setAttribute('class', 'please use CSS'); //inline styling is dirty
anchor.innerHTML = 'use the Arabic interface';
document.getElementById('header').appendChild(anchor);
I recommend to use anchors because you are not using a form, and you only pretend to redirect the user to another page. Either way if you want still the button, you can use document.createElement('button'); and asign the property onclick: button.onclick = function(){... instead of the href setting.
Another thing you can do is to hide the button with CSS: display:none and on load wet the element and remove the style: button.style.setProperty('display', ''); or either way use the CSS propperty visibility: hidden.