Removing the href attribute - javascript

I'm trying to write a code for pagination. One function is to disable the current link so it looks like text and to be unclickable. In html page this could be achieved by omitting the href attribute like :
<a>Link</a>
I couldn't do that in javaScript,
AvdonPagination.prototype.manageLinks = function(link){
if(link){
this.current.href = '#';
this.current = link;
}else{
this.current = this.links[0];
}
this.current.href = null;
}
because
this.current.href = null;
produces
Link
Also I tried this.current.href="", and this.current.disabled=true, but neither of them works.
How I can achieve <a>Link</a>?

try this removeAttribute("href")

Try the attached code snippet.
It uses javascript and currently removes the link function to the third link.
You can easily adapt it by adding more lines in javascript to reflect the lines you want to remove the link (but keep text).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a id="test-1" href="test-1">test-1</a>
<a id="test-2" href="test-2">test-2</a>
<a id="test-3" href="test-3">test-3</a>
<script>
document.getElementById("test-1").removeAttribute("href");
</script>
</body>
</html>

Related

When i execute an if condition with the continue keyword in a while loop my browser dosen't open

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<head>LOOPS</head>
<h1 id="string"></h1>
<script language="javascript" type="text/javascript">
let w = 10;
while(w<=15){
console.log(w)
if(w==13){
continue;
}
w++
};
</script>
</body>
</html>
So...As you can see here, Whenever i live reload this on my browser(firefox, chrome) It just keeps on reloading and dosen't open but when i use the for loop and then use the if condition to skip a loop, It opens.
Please is there something i'm doing wrong, Because i just started learning javascript.
It's because you're creating an infinite loop. When you have the if statement and the continue keyword, it will skip to the next loop without incrementing w variable.

why does not onload() work when i close the tab?

i wrote this simple function to show a message when you close the window but it didnt work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onunload="closing()">
<script language="javascript">
function closing(){
alert('Bye');
}
</script>
</body>
</html>
Your popup blocker might block it. MDN docs source
That sort of behavior - alerts popping up on a close, are usually not desired by users.
Did you try using the unload event?

How to link JavaScript file to HTML [duplicate]

This question already has answers here:
Javascript can't find element by id? [duplicate]
(5 answers)
Closed 3 years ago.
I am creating a very simple HTML file and I am trying to link it to a JavaScript file so that the text changes when I click on it.
I have copied it almost entirely from W3 and it works when I place the javascript code within the HTML script tags, but when I try to source it using the script tags (see the first example below) I am not able to get the JavaScript file to link to the HTML.
Any help you can give me is appreciated. I am currently using Visual Studio Code to do this if that gives any hints as to what I am doing wrong.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TextChange</title>
<script src="js/script.js"></script>
</head>
<body>
<p>This example uses the HTML DOM to assign an "onclick" event to a p element.</p>
<p id="demo">Click me.</p>
</body>
</html>
JavaScript
document.getElementById("demo").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
Alternate HTML that works
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TextChange</title>
</head>
<body>
<p>This example uses the HTML DOM to assign an "onclick" event to a p element.</p>
<p id="demo">Click me.</p>
<script>
document.getElementById("demo").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
</body>
</html>
When I render the HTML and view the source and click on the .js extension, I am able to view the javascript file. Despite this, the text that I want to change when I click on it does not change if I click on it.
Your JS file is included before the element, so getElementById() returns null.
Move it after the element, or make it wait for the document's loaded event.
Your script tag must be on the bottom of your html code (before the closure of <body> tag) so your javascript can use and detect the different DOM elements after they get rendered :
<html>
<body>
<!-- your code here -->
<script src="js/script.js"></script>
</body>
</html>

How to get all html string from iframe?

Assume i have iframe contain sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="import" href="sample.html">
</head>
<body>
<p>top</p>
<iframe src="sample.html" frameborder="0" id="myframe"></iframe>
<p>bottom</p>
<textarea cols="30" rows="10"></textarea>
</body>
</html>
I want to get all content include <!DOCTYPE html> ...</html>. I try to search arround the web but what i found only get content from body using
var cont = document.getElementById('myframe').contentWindow.document;
console.log(cont.body);
I don't want to use AJAX to get content file.
How to get ALL content from iframe include html tag?
Try accessing cont.documentElement.innerHTML to get the contents of <html> tag.
If you want also the <html> tag, use cont.documentElement.outerHTML.
To get the doctype information, try using cont.doctype.
var cont = document.getElementById('myframe').contentWindow.document;
console.log(cont.documentElement.outerHTML, cont.doctype);
You could also use XMLSerializer if its supported in the browser:
console.log(new XMLSerializer().serializeToString(cont));
try this:
Using document.doctype to get the document doctype
Using document.getElementsByTagName("*"); to get most of the html
https://jsfiddle.net/4hhf6nLm/
following line will retrieve inner html of iframe
document.getElementById('myframe').contentWindow.document.body.innerHTML
Check this answer for more information

Is there any way to load redirected page in div in jquery?

I have some links (like first link in below) and want to get links that is redirected to (like second one)
For example:
I have link below:
http://dx.doi.org/10.1007/146.1435-5655
And need to get this link:
http://link.springer.com/journal/146
that redirect (or converted) from first one.
When I use .load() function in jQuery it return some javascript codes that I think it get second link from dx.doi.org server.
How can I get second link? (http://link.springer.com/journal/146)
In other word, I have http://dx.doi.org/10.1007/146.1435-5655 and need only http://link.springer.com/journal/146 in string (not content of http://link.springer.com/journal/146)
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="swPicForm">TODO write content</div>
<script type="text/javascript" src="js/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$("#swPicForm").load("http://dx.doi.org/10.1007/146.1435-5655", null, function() {
alert($("#swPicForm").html());
});
</script>
</body>
</html>
Result is:
function (e){return v.access(this,function(e){var n=this[0]||{},r=0,i=this.length;if(e===t)return n.nodeType===1?n.innerHTML.replace(ht,""):t;if(typeof e=="string"&&!yt.test(e)&&(v.support.htmlSerialize||!wt.test(e))&&(v.support.leadingWhitespace||!pt.test(e))&&!Nt[(vt.exec(e)||["",""])[1].toLowerCase()]){e=e.replace(dt,"<$1></$2>");try{for(;r<i;r++)n=this[r]||{},n.nodeType===1&&(v.cleanData(n.getElementsByTagName("*")),n.innerHTML=e);n=0}catch(s){}}n&&this.empty().append(e)},null,e,arguments.length)}
thanks all

Categories

Resources