How change href value after window loading - javascript

here is a a link with text:
<a id="linkk" href="/allgemeinen/sfsdf-sd-d-d-fd/"><p class="posttt">blablabla</p></a>
I want to delete nlinked after window loadend, here is js code:
<script>
window.onload = function() {
var aEl = document.getElementById('linkk');
aEl[0].href = "javascript:void(0)";
};
</script>
here is a example: https://geburtstagsplanet.com/allgemeinen/sfsdf-sd-d-d-fd/
but it doesn't work, why?

<srcipt>
window.onload = function() {
var aEl = document.getElementsByClassName('linkk');
aEl[0].href = "javascript:void(0)";
};
</script>
or
<srcipt>
window.onload = function() {
var aEl = document.getElementsByClassName('linkk');
aEl[0].removeAttribute('href');
};
</script>

document.getElementsByClassName() returns a collection of elements. You probably need to refer to a specific element in the collection. So
aEl.href
should actually be
aEl[0].href

Firstly, your open script tag is misspelled. Should be <script> not <srcipt>
Secondly, getElementsByClassName returns an array. If you are trying to do this operation for all links, you need to iterate over the result:
<script>
window.onload = function() {
var aEl = document.getElementsByClassName('linkk');
for(var link in aEl) {
link.href = "javascript:void(0)";
}
};
</script>
Also, if you are using getElementsByClassName, you should update your HTML accordingly:
<a class="linkk" href="/allgemeinen/sfsdf-sd-d-d-fd/"><p class="posttt">blablabla</p></a>

Below code should work.
<script>
window.onload = function() {
const elem = document.getElementsByClassName('linkk');
for( let i = 0; i < elem.length; i++ ){
elem[i].href = '#';
}
}
</script>

Related

Non-independence of two javascript scripts

He Guys,
I have two scripts that work fine separately. One is for loading images and one is for loading Youtube iframe embeds.
However they don't seem to work together. Could you help out?
<iframe width="560" height="315" frameborder="0" data-src="https://www.youtube.com/embed/fKnbOJ4NAvS" src=""></iframe>
<a rel="nofollow" target="_blank" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.domain.com"><img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="googleplus.png"></a>
<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
You have made a couple of invalid assumptions.
Firstly, all scripts occupy the same global name space. Multiple <script>...</script> tags are not independent, therefore.
<script>
//script 1
</script>
<script>
//script 2
</script>
is equivalent to :
<script>
//script 1
//script 2
</script>
Secondly, repeated assignments of functions to window.onload are not cumulative. With window.onload = init followed by a second window.onload = init, the second assignment will override the first.
Now you should understand that your second script nullifies the first.
To fix, you could give the two functions unique names, and call them from a single (anonymous) window.onload handler :
<script>
function init_1() {
var imgElements = document.getElementsByTagName('img');
for (var i=0; i<imgElements.length; i++) {
if(imgElements[i].getAttribute('data-src')) {
imgElements[i].setAttribute('src', imgElements[i].getAttribute('data-src'));
}
}
}
function init_2() {
var vidElements = document.getElementsByTagName('iframe');
for (var i=0; i<vidElements.length; i++) {
if(vidElements[i].getAttribute('data-src')) {
vidElements[i].setAttribute('src', vidElements[i].getAttribute('data-src'));
}
}
}
window.onload = function() {
init_1();
init_2();
};
</script>
You could alternatively omit init_1() and init_2(), and write everything direcly inside an anonymous window.onload handler :
<script>
window.onload = function() {
var imgElements = document.getElementsByTagName('img');
var vidElements = document.getElementsByTagName('iframe');
var i;
for (i=0; i<imgElements.length; i++) {
if(imgElements[i].getAttribute('data-src')) {
imgElements[i].setAttribute('src', imgElements[i].getAttribute('data-src'));
}
}
for (i=0; i<vidElements.length; i++) {
if(vidElements[i].getAttribute('data-src')) {
vidElements[i].setAttribute('src', vidElements[i].getAttribute('data-src'));
}
}
};
</script>
It is perfectly OK to reuse the variable i in this way.
You will notice that I renamed you variables to avoid "Defer", which has a very specific meaning in JavaScript.

Replace All Words In Document Body Doesn't Work

Firstly sorry for my english, i have code that doesnt work when I execute it on
<script language="javascript" src="/thecode.js"></script>
I put thecode.js on footer
var msg=document.body.innerHTML;
for(var i=0;i<msg.length;i++){
var tx=document.body[i].innerHTML;
tx=tx.replace(/dog/ig,'animal');
tx=tx.replace(/apple/ig,'fruit');
tx=tx.replace(/\[VIdEo\]/ig,'Video');
tx=tx.replace(/http\:\/\/example\.com/ig,'http://thelink.com');
document.body.innerHTML=tx;}
I think i dont make any fault, but when i execute it, its doesnt work.
thank for your attention... :)
no need to iterate body element
try this:
want to change to with that js? i have used to make it
function addTitleToSurveyUrls() {
var elements = document.getElementsByTagName('a');
for(var el in elements) {
var element = elements[el];
var href = element.getAttribute("href");
if(href.indexOf('survey_')>-1) {
element.setAttribute('title', 'Some TITLE HERE');
}
}
}
function replaceBodyElements() {
var tx=document.body.innerHTML;
tx = tx.replace(/dog/ig,'animal');
tx = tx.replace(/apple/ig,'fruit');
tx = tx.replace(/\[VIdEo\]/ig,'Video');
tx = tx.replace(/http\:\/\/example\.com/ig,'http://thelink.com');
document.body.innerHTML=tx;
}
window.onload = function(){
replaceBodyElements();
addTitleToSurveyUrls();
// ... some another operations
};
also
document.onreadystatechange = function () {
var state = document.readyState;
if(state == 'complete') {
replaceBodyElements();
addTitleToSurveyUrls();
}
}​
I've used onload event because maybe document has dynamic elements and etc. so better wait while all elements get loaded and change it.
or You can replace window.onload with window.document.onload

Click a link with href attribute and execute the Javascript function

My script contains a link a element with href attribute of "#login" as below.
Login
I want to my Javascript function detect the "href" element in the link and execute. How can I do this? My Javascript function is
window.onload = function() {
document.getElementsByTagName("a[href=#login]").onclick = function(e) {
e.preventDefault();
alert("working");
}
}
Why have I seen no querySelector love in these answers?
If you want to use that CSS selector to grab your link, nothing is stopping you:
window.onload = function() {
document.querySelector("a[href='#login']").onclick = function(e) {
e.preventDefault();
alert("working");
}
}
Login
EDIT:
I saw in another answer that you believe there may be multiple links on a page that match that selector, in which case you'll need to loop through them:
window.onload = function() {
var links = document.querySelectorAll("a[href='#login']"),
//always create anonymous functions outside of a loop :)
click = function(e) {
e.preventDefault();
alert("working");
}, i;
for (i = 0; i < links.length; i++) {
links[i].onclick = click;
}
}
Login
Login
Try this:
Login
function getValue()
{
alert("working");
e.preventDefault();
}
FIDDLE
Your getElementsByTagName is treating it like a jquery selector, which it is not designed to do.
It would be much simpler to give the tag an id and use getElementById:
window.onload = function() {
document.getElementById("loginLink").onclick = function(e) {
e.preventDefault();
alert("working");
}
}
Login
If for whatever reason you cannot change the html and you want to do it this way you would need to get all a tags then loop through each one to test the href attribute. Note you need to use a.getAttribute("href") to get "#login", rather than just a.href which oftens give you an full URL:
window.onload = function() {
var aTags = document.getElementsByTagName("a");
for(var i = 0; i < aTags.length; i++) {
var a = aTags[i];
if(a.getAttribute("href") == "#login") {
a.onclick = function(e) {
e.preventDefault();
alert("working");
}
}
}
}
Login
Test
Login Again

Failure in changing node content + JavaScript

I wrote this code for create menu with div tag
HTML:
<div id="firstMenuList">
<div id="firstMenu">choose▼</div>
<div id="menulist" class="menulist"></div>
</div>
JavaScript:
<script>
function ccc() {
var id="firstMenu";
var ar=new Array("hi","there","hello","world");
var node=document.createElement("div");
var parent=document.getElementById("menulist");
var nodeData="";
for (var i=0;i<ar.length;i++)
{
var node=document.createElement("div");
node.setAttribute("id",id+""+i);
node.setAttribute("class","menulist");
node.setAttribute("onclick","select("+id+""+i+")");
node.style.top=((i+1)*100)+3+"%";
node.innerHTML=ar[i];
parent.appendChild(node);
}
}
function select(id)
{
var p=document.getElementById(id);<-this doesn't work on elements that created dynamically
p.style.backgroundColor="red";
var t = p.innerHTML;
}
</script>
This code creates the menu, but when I click on the menu items code breaks.
The error is:
"parent is null"
To pass the id to the function you need to ensure that you put quotes around the id:
node.setAttribute("onclick","select('"+id+i+"')");
// note the single quotes ----------^--------^
Demo: http://jsfiddle.net/QK5Wh/1/
But you don't need to use the id to get the element when you can pass a direct reference to the element itself:
node.setAttribute("onclick","select(this)");
And then:
function select(p) {
p.style.backgroundColor="red";
var t = p.innerHTML;
}
Demo: http://jsfiddle.net/QK5Wh/
I'll suggest to avoid the inline event binding. Here is a working example:
http://jsfiddle.net/H4S2f/1/
function ccc() {
var id="firstMenu";
var cls="firstMenuList";
var ar=new Array("hi","there","hello","world");
var node=document.createElement("div");
var parent=document.getElementById("menulist");
var nodeData="";
for (var i=0;i<ar.length;i++)
{
var node=document.createElement("div");
node.setAttribute("id",id+""+i);
node.setAttribute("class","menulist");
(function(i) {
node.addEventListener("click", function() {
select(id+""+i)
});
})(i);
node.style.top=((i+1)*100)+3+"%";
node.innerHTML=ar[i];
parent.appendChild(node);
}
}
function select(id)
{
var p=document.getElementById(id);
p.style.backgroundColor="red";
var t = p.innerHTML;
}
ccc();

Appending target="_blank" to links in an iframe without using <body onload>

I'm trying to change the links in an iframe to load in a new window instead of the iframe itself. Currently I use this code in head:
$(document).ready(function() {
var oIFrame = document.getElementById("iframeID");
var oDoc = (oIFrame.contentWindow || oIFrame.contentDocument);
if(oDoc.document) oDoc = oDoc.document;
var links = oDoc.getElementsByTagName("a");
for(var i=0; i<links.length; i++) { links[i].target="_blank"; }
});
However, the code above is triggered before the iframe is fully loaded with its contents. I know this code would work if it's triggered in the body onload attribute, but I'd like to avoid that method and implement it in a function or a file instead.
Try
$("#iframeid").load(function(){
// your code
});
Have a go with:
$(document).ready(function() {
var oIFrame = document.getElementById("iframeID");
var oDoc = (oIFrame.contentWindow || oIFrame.contentDocument);
if(oDoc.document) oDoc = oDoc.document;
$(oDoc).ready(function(){
var links = oDoc.getElementsByTagName("a");
for(var i=0; i<links.length; i++) { links[i].target="_blank"; }
}
});
You could set a timeout function periodically checking if
iframe.document.readyState == 'complete'

Categories