In my html page I want to get html node on its href click.
example:
HTML FILE
<!DOCTYPE html>
<html>
<body>
<p>Click1</p>
<p>Click2</p>
</body>
</html>
When Click1 is clicked I want to value: W3
When Click2 is clicked I want to value: google
Currently, I am using document.documentElement.outerHTML to get complete html string and parse it. Is there a better way to get data-type value on a href click?
jQuery:
$('a').click(function(){ console.log( $(this).data('type') ) })
JavaScript:
var link = document.querySelectorAll('a');
for (var i = 0; i < link.length; i++) {
link[i].addEventListener('click', function(e) {
console.log(this.dataset.type)
});
}
Related
My Code:
$('.classname').on ("click" ,function() {
var newpage = "Html Elements for blank page";
var mywindows = window.open("","_blank","");
mywindows.document.open() ;
mywindows.document(newpage);
mywindows.document.close() ;
});
<button class="classname">Click here</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I want to make it short By Using:
$('html').html('my html elements');
but I can't success to use this, It Always shows result in the current page, and opens a blank page, and I don't have any idea to fix it!
Here is the code:
$('.classname').on ("click" ,function() {
var newpage = window.open('','_blank','');
newpage.$('html').html('my html elements are here');
});
Document is not a function to use parameters in it.
Else you can not use open and close function with document.
I have an anchor with id='peter'. When i click this, the hyperlink of anchor 'jack' must now add the id of 'peter' at the end of its hyperlink.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$('#peter').click(function(){
$('#jack').attr('href', '?id=peter');
});
});
</script>
</head>
<body>
Click
Yahoo
</body>
</html>
Expectation:
the hyperlink of second anchor must now be -
http://www.yahoo.com?id=peter
Can someone help me out how to add this id by 'jQuery'?
Replace your existing javascript code with this code:
$(document).ready(function(){
$('#peter').click(function(){
var attr = $('#jack').attr('href') + "?id=peter";
$('#jack').attr('href', attr);
});
});
You have to append param to the href attribute:
var href = $('#jack').attr('href');
$('#jack').attr('href', href + '?id=peter');
One way can be to replace the href attribute:
$('#jack').attr('href', 'http://www.yahoo.com?id=peter');
Another option is to add it at the end of the current value:
var href = 'http://www.yahoo.com'
$('#jack').attr('href', href + '?id=peter');
i'm completely new to Javascript and I wanted to create an Greasemonkey Script that replaced "/text/othertext/" to "/text2/text3" on all the href elements of the document. That's what i came up with, and as expected, it doesn't work:
var links = document.getElementsByTagName('a');
for (i=0; i<links.length; i++)
{
var gethref = links[i].getAttribute('href');
gethref = gethref.replace(/text\/othertext/g,'text2\/text3');
links[i].setAttribute("href", gethref);
}
Thanks in advance!
Edit: ok, i know why my script is not working, but i don't know if it can be fixed, i'm trying to replace elements that load after the page is completely loaded (maybe with ajax?)
http://i.imgur.com/7n5V7Bi.png
This code works. Your code looks okay too. Perhaps you are loading the script before the document elements? Note how my elements are listed before my script:
link
link
<script>
var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++) {
var href = links[i].getAttribute('href');
href = href.replace('before', '#');
links[i].setAttribute('href', href);
}
</script>
Edit, based on your comments a dirty fix to cause delay in your app before running a script is to use the setTimeout function. To delay five seconds for example, you might use it like this:
link
link
<script>
setTimeout(function() {
var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++) {
var href = links[i].getAttribute('href');
href = href.replace('before', '#');
links[i].setAttribute('href', href);
}
}, 5000); // < --- note the time in ms here
</script>
Not too sure why your code wouldn't be working.
I've put together the following snippet which might help.
(function() {
var anchors = document.querySelectorAll('a');
for(var i = 0; i < anchors.length; i++) {
var newHref = anchors[i].getAttribute('href').replace(/text\/othertext/g,'text2\/text3');
anchors[i].setAttribute('href', newHref);
}
}());
a {
display: block;
}
<!DOCTYPE html>
<head></head>
<body>
Some link
Some other link
</body>
If you run this snippet you'll see only one anchor is updated correctly as intended.
Hope that helps you out!
The easiest solution would be to wrap your code in this:
window.onload = function(){
/* your code here */
};
This will ensure that your code (especially if you've placed your script in the of the document, won't load until the whole page is loaded (including text, images, etc).
window.onload = function() {
document.body.innerHTML = document.body.innerHTML
.replace('<a href="text/othertext/"', '<a href="text2/text3"');
};
<!DOCTYPE html>
<head></head>
<body>
Some link
Some other link
</body>
My html is
<div id="ctup-ads-widget-2" class="caption slide-heading " data-x="380" data-y="80" data-speed="1800" data-start="1200" data-easing="easeOutExpo">Hui</div>
I am trying to change the values of dat=x and data-y dynamically
I tried both below which did not work.
<script>
$('#ctup-ads-widget-2').click(function() {
$(this).attr("data-x", "580");
});
</script>
and
<script>
$('#ctup-ads-widget-2').click(function() {
$(this).data('x') = "580";
});
</script>
and
<script>
window.onload = function() {
var anchors = document.getElementById('ctup-ads-widget-2');
for (var i = 0; i < anchors.length; i++) {
anchors[i].setAttribute('data-x', '580');
anchors[i].setAttribute('data-y', '30');
}
}
</script>
console screenshot
error screenshot
You can't use it like
$(this).data('x') = "580";//won't work
Try with data()
$(this).data("x","580"); //$(this).attr("data-x", "580") should also work
Update
Enclose it in $(document).ready..
$(document).ready(function(){
$('#ctup-ads-widget-2').click(function() {
$(this).data("x","580");
});
})
If data-attribute needs to be dynamically added on an element,
$("this").attr("data-x", "5");
can be used.
From seeing your screenshots, it's clear that jQuery was not loaded properly.
Use <script> tag to load jQuery file before end of </body> tag.
Example:
<body>
...
..
<script src="js/jQuery.js"></script>
<script src="js/yourfile.js"></script>
</body>
got this example:
<html>
<head>
<script type="text/javascript">
function init(){
var linkPage = document.getElementById('linkid').href;
window.location.href = linkPage;
}
onload=init;
</script>
</head>
<body>
GO HERE
</body>
</html>
this script clicks the link "GO HERE". (works perfect)
but in my example i got no class or id in the link.
LINK NAME
is only thing that never change is the name of the link ("LINK NAME")
is it possible to search for "LINK NAME" and then click it like the working script above?
or something that will do what i need :D
JS has no way to search for a node by text contents (that I know of).
Array.prototype.forEach.call(document.getElementsByTagName('a'), function (elem) {
if (elem.innerHTML.indexOf('LINK NAME') > -1) {
window.location = elem.href;
}
});
Iterate over the links in the document and check the text:
for(var i = 0, len = document.links.length; i < len; i += 1) {
if(document.links[i].textContent === "LINK TEXT") {
document.links[i].click();
}
}
I'd just use the following bit, which uses jquery selection.
var link = $("a:contains('LINK TEXT')"); //get the a
var click = document.createEvent("Event"); //create event
click.initEvent("click", true, true);
link.dispatchEvent(click); // make it happen