I am tying to change the href link using JavaScript. In my example I would like to change the url path from "linktwo.html" to "problem3.html.
I know that there are probably easier ways of doing this, but this is for practice purposes.
Using my example as below, what am I doing wrong to change the href?
HTML:
<body onload="changeLink()">
<div id="p">
<h1> first link </h1>
</div>
<div id ="q">
second link
</div>
Javascript:
<script type="text/javascript">
function changeLink(){
document.getElementById("q").href.innerHTML="problem3.html";
}
</script>
Option One :
Change the Java Script as below
<script type="text/javascript">
function changeLink(){
document.getElementById("q").href.innerHTML=" second link ";
}
</script>
Option Two :
change the code as below
HTML :
<body onload="changeLink()">
<div id="p">
<h1> <a id ="p1" href="linkone.html"> first link </a></h1>
</div>
<div id ="q">
<a id ="q1" href="linktwo.html"> second link </a>
</div>
JAVA SCRIPT :
<script type="text/javascript">
function changeLink(){
document.getElementById("q1").removeAttribute("href");
document.getElementById("q1").setAttribute("href","problem3.html");
}
</script>
Please check following code
<script type="text/javascript">
function changeLink(){
document.getElementById("q").href ="problem3.html";
}
</script>
First, you should put the ID on the link itself, not the containing div.
second link
Then, you should use the href property without innerHTML.
function changeLink(){
document.getElementById("my_link").href = "problem3.html";
}
Give an id for the href
</head>
<body onload="changeLink()">
<div id="p">
<h1> first link </h1>
</div>
<div id ="secondDiv">
second link
</div>
and remove the innerHTML part from the javascript:
<script type="text/javascript">
function changeLink(){
document.getElementById("q").href = "problem3.html";
}
</script>
You can also do:
<a id="changeurl" href="linktwo.html"> second link </a>
Give your anchor an id and then in the script area:
link = document.getElementById('changeurl');
link.removeAttribute('href');
link.setAttribute('href','problem3.html');
First you get the object. Then you remove the current href attribute. After that you can add a new one! Hope this helps and better answers your question.
Thank you all for the helpful information! Further experimenting resulted in me coming up with changing my javascript to this.
function changeLink(){
document.getElementById("q").childNodes[1].href="problem3.html";
Not sure if this is practical or not but was an added solution to everyones solutions.
Related
I have 2 htm files: a.htm and b.htm. In b.htm I have 2 divs, in one is a link to a.htm which I would like to open in second div but it opens as new page in new tab. I'm not good in javascript but I looked many examples so I believe I'm very close to solution but obviously have some error somewhere. Please help!
So, in a.htm I have this:
<html>
<body>
TEST
</body>
</html>
In b.htm I have this:
<html>
<head>
<script language="JavaScript">
function url2div(url,target){
document.getElementById(target).innerHTML = '<iframe style="width:100%;height:100%;" frameborder="0" src="' + url + '" />';
}
</script>
</head>
<body>
<div id="menu" style="background-color:#FFD700;height:100px;width:100px;float:left;">
Click
</div>
<div id="content" style="background-color:#EEEEEE;height:100px;width:400px;float:left;">
Original content
</div>
</body>
</html>
Store your link inside the function instead of the href attribute:
Click
Change JS to this:
function url2div(url, element) {
var iframe = document.createElement('iframe');
iframe.setAttribute('src', url);
element.appendChild(iframe);
}
JSFiddle Demo #1
if you want to open the link in the same iframe, store the link in any other property other than href. Then, use your current function and it should work fine!
Click
JSFiddle Demo #2
I think this isn't as complicated as you're making it. Also, the previous answer isn't quite doing what the OP is asking...so here's my stab at it:
First, I assume html5, so you don't need the "javascript" as part of your script tags. Secondly, I don't think you need to pass around all those variables. Your anchor tag should reference
<a href=b.htm#content onclick="url2div();"<\a>
and your javascript should be
otherPageText = "<iframe src=\"HtmlPage2.html\" width=\"200\" height=\"200\"></iframe>";
document.getElementById("content").innerHTML = otherPageText;
After that, if you need variables, carefully try to pass them in one at a time.
Part of the original problem is that you're passing "this" which references the new page, not the old one, but by the time that happens you're on the new page and not bringing over the one you want back to the first page. Part of why I stayed away from it.
PS Sorry for the bad formatting. This is all very new to me...
I have multiple buttons corresponding to multiple text areas to clear. I need to send to have a function to handle all of these buttons and handle each seperately
<html>
<head>
<script src="jquery-1.6.js"></script>
<script type="text/javascript">
function getUniqueButtonValue(value)
{
alert(value);
$("value").hide();
}
</script>
</head>
<body>
<button id=someUinqueId value=something>Clear Selection</button>
</body>
</html>
Setting aside the fact that you're placing a unique id in the value attribute rather than the id attribute... here's a fiddle.
$(document).ready(function(){
$("button").click(function(){
var me = $(this);
// do whatever with me
alert(me.val());
me.hide();
});
});
There seem to be numerous problems with the code you've posted in your question. Firstly, (unless you're using <!DOCTYPE html> as your doctype) you can't have id values starting with a number.
Secondly, the jQuery (I'm assuming it's jQuery and not some other JS library) in your getUniqueButtonValue function is not going to work, because the selector is going to look for a value element, which is unlikely to exist.
I'm assuming that the value attribute of your button is meant to correspond to the id of another element, which you want to hide when the button is clicked.
As you have what appears to be jQuery code in your example, I will give you a jQuery solution to this, as it's far simpler:
$(document).ready(function() {
$("button").click(function() {
alert(this.value);
$("#" + this.value).hide();
});
});
Also, you don't close your body tag, but I'm guessing that's just a mistake in copying and pasting the code into the question.
You can do this:
<button id=123 value=uniqueId545 onclick="javascript:getUniqueButtonValue($(this).val());">Clear Selection</button>
try this
$("#123").click(function(){
getUniqueButtonValue($(this).val());
});
I'm not sure what you are trying to do here. If i guess correctly this is what you want (ids shouldn't begin with a number so I put an 'a' before the 123:
$("#a123").click(function(){
getUniqueButtonValue($("#a123").getAttribute('value');
}
function getUniqueButtonValue(value)
{
alert(value);
$("#"+value).hide();
}
</script>
</head>
<body>
<button id=123 value=uniqueId545>Clear Selection</button>
</html>
You can save yourself a lot of work by trying:
<button class="clearbutton" value="#Foo">Clear Foo</button>
<input type="text" name="foo" id="foo" />
With the following JavaScript:
$('.clearbutton').click(function(e) {
$($(this).val()).val('');
});
i want to delete a particular class from my object as my requirement is to delete that dom data before displaying content. I have written a sample code but not able to get why that is not working. I jquery's remove is also not working. Please help me to get it solve. Thanks in advance
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// complete html
var test;
test = $('#issue_detail_first_row').html();
var x = $(test).find('#issue_detail_nav').not('.p1');
$('#sett').html(x);
});
</script>
</head>
<body>
<div id="issueDetailContainer">
<div id="issue_detail_first_row">
<div>
<div id="issue_detail_nav">
<div>test</div>
<div id="gett">
<div class="p1">
this content need to be deleted 1
</div>
</div>
<div class="p1">
this content need to be deleted 2
</div>
</div>
</div>
</div>
<br/><br/><br/><br/>
<div id="sett">
</div>
You need to remove the content from the DOM directly.
$("#issue_detail_first_row .p1").remove();
That will select the .p1 elements and remove them from the DOM
you can use remove function on javascript object.
If you want to preprocess it before displaying.
example
var a =$("#issue_detail_first_row").html();
var jhtml =$(a)[0];
$(jhtml).find('.p1').remove();
alert($(jhtml).html());
now use jhtml .
demo
http://jsfiddle.net/WXPab/14/
It seems that you're trying to duplicate a section, but without the .p1 elements.
You could use the clone()[docs] method to clone the section, the remove()[docs] method to remove what you don't want, and then insert its HTML.
$(document).ready(function() {
var test = $('#issue_detail_first_row').clone(); // clone it
test.find('.p1').remove(); // find and remove the class p1 elements
$('#sett').html( test.html() ); // insert the new content
});
Working example: http://jsfiddle.net/YDZ9U/1/
Only thing is that you'll need to go through and update the IDs in the clone, so that they're not duplicated on the page.
I need to display on a webpage a div when a user clicks on a button.
Does someone know how to do it ?
My code so far :
<body onload ="init()">
<input type="button" value="Display the div tree" onclick="check();" />
<script ="text/javascript">
function check() {
// I'd like to display on the page the div tree
}
</script>
<div id = "tree" style="display:none"> // I don't want to display it unless the user clicks on the button "Display the div tree"
</div>
</body>
thanks,
Bruno
document.getElementById('tree').style.display='';
Include this in your check function
i'm not sure if i understood the question, this seems a bit too easy:
function check() {
document.getElementById('tree').style.display=''; // or display='block';
}
EDIT :
the reason this dooesn't work for you is an error in your code. please change this line:
<script ="text/javascript">
to
<script type="text/javascript">
and everything wiill be fine. also, you should place the script in the head of your document, but thats not absolutely neccessary.
I'm trying to get href value using jQuery:
<html>
<head>
<title>Jquery Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
alert("As you can see, the link no longer took you to jquery.com");
var href = $('a').attr('href');
alert(href);
event.preventDefault();
});
});
</script>
</head>
<body>
jQuery
</body>
</html>
But it doesn't work. Why?
You need
var href = $(this).attr('href');
Inside a jQuery click handler, the this object refers to the element clicked, whereas in your case you're always getting the href for the first <a> on the page. This, incidentally, is why your example works but your real code doesn't
You can get current href value by this code:
$(this).attr("href");
To get href value by ID
$("#mylink").attr("href");
It's worth mentioning that
$('a').attr('href'); // gets the actual value
$('a').prop('href'); // gets the full URL always
It works... Tested in IE8 (don't forget to allow javascript to run if you're testing the file from your computer) and chrome.
if the page have one <a> It Works，but，many <a> ,have to use var href = $(this).attr('href');
Assuming you have this html :
<a class ="linkClass" href="https://stackoverflow.com/"> Stack Overflow</a>
You can get and display the href attribute with this JS snippet :
<script>
$(".linkClass").click(function() {
alert($(this).attr("href"));
});
</script>
**Replacing href attribut value to other**
<div class="cpt">
testoneLink
</div>
<div class="test" >
testtwoLInk
</div>
<!--Remove first default Link from href attribut -->
<script>
Remove first default Link from href attribut
$(".cpt a").removeAttr("href");
Add Link to same href attribut
var testurl= $(".test").find("a").attr("href");
$(".test a").attr('href', testurl);
</script>
If your html link is like this:
<a class ="linkClass" href="https://stackoverflow.com/"> Stack Overflow</a>
Then you can access the href in jquery as given below (there is no need to use "a" in href for this)
$(".linkClass").on("click",accesshref);
function accesshref()
{
var url = $(".linkClass").attr("href");
//OR
var url = $(this).attr("href");
}