I am trying to access href attribute of HTML <a> element but somehow that value gets changed automatically.
Following is my code :
function getTDElement(anchorString)
{
var td = document.createElement('td');
// i think this is not a good way to add child to html element but
// i have to do it for some unavoidable reason
td.innerHTML = anchorString;
var anchor = td.firstChild;
// following line prints url like
// http://localhost/myservlet?myParam=foobar
console.log(anchor.href);
return td;
}
// im passing only /myservlet?myParam=foobar in following line
getTDElement("<a href=/myservlet?myParam=foobar>display</a>");
I am not able to understand why and how href attribute of element changes automatically.
Can anyone please shed some light on this issue?
The href property on a link element is a special property, not a simple string. It is liable to change your href value to the absolute URL it thinks it resolves to. You can get the unchanged value using getAttribute.
console.log(anchor.getAttribute('href'));
Related
I'm trying to use JavaScript to create an ID for my links and also to tell it where to link to.
My JavaScript has generated a link element in my HTML:
<a id = "NB4-CAXL-14U-12-AAG"> Link Text </a>
And that appears as it should.
I then have a variable eopartnum[i]:
console.log(eopartnum[i]); //output: NB4-CAXL-14U-12-AAG
This variable matches my ID for my link above. Then i tried to access that link via the ID and assign an href to it, like so:
var linktoprod = document.getElementById(eopartnum[i]);
console.log(linktoprod); //returns null
linktoprod.href = "http://www.enviroptics.com/"; //Cannot set property 'href' of null(…)
Why does my linktoprod come up as null? Is my syntax wrong?
JSfiddle for full code: http://jsfiddle.net/98oL12tk/17/ Lines 106-109 in JS section.
The problem is that you are calling getElementById() before you append the table to the document. At the time that you are querying for the ID, it doesn't yet exist. This example seems a bit contrived; I think you could just set firstcelllink.href = 'http://www.enviroptics.com/';
EDIT: probably more appropriate to use firstcelllink.setAttribute('href', 'http://www.enviroptics.com/');
I'm trying to add a search link to an online form with a userscript using jQuery. I don't work too much in firefox and I feel like things that would normally work in chrome don't in ff 9/10 times for me. But anyway... this needs to be with ff.
I'm taking the text from a <p> element and creating a search url out of it (or trying to). Right now this is the function I'm trying that should be doing it... but it's doing nothing, not even any errors in console
$(function() {
var companyName = $('p')[7]; // Element that contains the name text
var companyText = companyName.text(); // Retrieve the text from element
var mixRankUrl = $("<a></a>").innerHTML("Search Mixrank"); // Create an <a> element
mixRankUrl.href = 'https://mixrank.com/appstore/sdks?search=' + companyText; // Define the href of the a element
var sdkPara = $('label.control-label')[10]; // Where I want it to go
sdkPara.append(mixRankUrl); // Append the element
});
Also, whoever wrote the html uses hardly any ids, and most classes are assigned to 10 or more elements... so unless there's a better way, I'm sort of stuck using node selectors (which stay the same form to form).
The problem is that you try to use jQuery method on DOM element. Don't understand why you don't have any errors with your code.
For exemple : $('p')[7] return a DOM element while $('p').eq(7) return a JQuery object. So you can't use a jQuery method like text() on your DOM element. You need to deal with jQuery object.
For the same reason, you had a problem with the declaration of your label object and with the modification of the href attribute of your link.
Try like this :
$(function() {
var companyName = $('p').eq(7); // Element that contains the name text
var companyText = companyName.text(); // Retrieve the text from element
var sdkPara = $('label.control-label').eq(10); // Where I want it to go
var mixRankUrl = $('<a>',{
text: 'Search Mixrank',
href: 'https://mixrank.com/appstore/sdks?search=' + companyText
}).appendTo(sdkPara); // Append the element
});
I am trying to change content of the first cells of rows into some images. Below is my Javascript code which doesn't work. I tried to use p.appendChild(img), but as it's in a for loop, each time I pressed the button that invokes this, it will append another image to that row. I reckon that I am not using .src correctly? Can someone please help?
var rowx =document.getElementById(rowid); //the row that I want to change its first cell
var uri= "baseuri"+rowid;
img = document.createElement('img');
img.src= uri;
var p = rowx.cells[0];
p.src=img; //this doesn't change the first cell's content.if I use p.appendChild(img) it will append new img each time it gets executed.
cells gives you an HTMLCollection of td elements, which do not support a source attribute. if you want to edit the content you would need to append or modify its innerHTML, like
rowx.cells[0].innerHTML="";
rowx.cells[0].appendChild(img);
You don't need to create another image, you can simply change the src property of the current one:
rowx.cells[0].querySelector('img').src = uri;
If the image is the only (or 1st) element inside the cell, you can use firstElementChild, even better:
rowx.cells[0].firstElementChild.src = uri;
References: querySelector and firstElementChild
.
I am trying to add a link to a page I cannot directly access the HTML on, aside from the footer. Using Javascript, I am attempting to use the createElement() method. I have successfully used the same process to create a link element in the header.
function createForgotPasswordLink(){
var pwlink=document.createElement("a")
pwlink.setAttribute("id", "forgotPssLink")
pwlink.setAttribute("href", "http://www.mysite.com/page.aspx")
pwlink.innerHTML("Forgot Password?")
document.getElementsByTagName("body")[0].appendChild(pwlink)
}
createForgotPasswordLink();
The only difference between the two scripts is that when making the link element, I appendChild() on the head not body and I do not set the innerHTML of the link element as I have done in the above a element. For some reason, the above code does not work. Even after removing line 5.
You are using the property .innerHTML like a method. Don't use parens, use an =. Also, I wouldn't bother setting the attributes, just set the property values directly. The code is more straightforward and easier to read:
function createForgotPasswordLink() {
var pwlink = document.createElement("a");
pwlink.id = "forgotPssLink";
pwlink.href = "http://www.mysite.com/page.aspx";
pwlink.innerHTML = "Forgot Password?";
document.body.appendChild(pwlink)
}
Alrite, I have seen other Questions with similar titles but they don't do exactly what Im asking.
I have 2 x HTML documents, one containing my page, one containing a element with a paragraph of text in it. As-well as a separate .js file
what I want to do is extract this text, store it as a JS variable and then use jQuery to edit the contents of an element within the main page. This is the conclusion I came to but it didnt work as expected, im not sure if it is me making a syntax error or if i am using the wrong code completely:
$(document).ready(function(){
var c1=(#homec.substring(0))
// #homec is the container of the text i need
$(".nav_btn #1").click(function(c1){
$(".pcontent span p") .html(+c1)}
);
});
i know +c1 is most probably wrong, but i have been struggling to find the syntax on this one. thankyou in advance :D
var c1=(#homec.substring(0)) will throw an error because #homec is not a valid variable name, is undefined, and does not have a property function called substring. To get the html of an element with an id of homec, use the html method:
var c1 = $("#homec").html();
c1 should not be an argument of the click function because it is defined in the parent scope. +c1 is unnecessary because you do not need to coerce c1 to a number.
If you are trying to add content to the end of the paragraph, use the append method:
$(".pcontent span p").append(c1)
That means you should use this code instead:
$(document).ready(function() {
var c1 = $("#homec").html();
$(".nav_btn #1").click(function() {
$(".pcontent span p").append(c1)
});
});
P.S. Numbers are not valid ID attributes in HTML. Browsers support it, so it won't make anything go awry, but your pages won't validate.
Try this:
$(".nav_btn #1").click(function(c1){
var para = $(".pcontent span p");
para.html(para.html() + c1);
});
The JQuery text() function will allow you to get the combined text contents of each element in the set of matched elements, including their descendants. You can then use the text(value) function to set the text content of your target paragraph element. Something like this should suffice:
$(document).ready(function() {
var c1 = $("homec").text();
$(".nav_btn #1").click(function() {
$(".pcontent span p").text(c1);
});
});
See the JQuery documentation for more details on the text() function. If you need to capture the full structure of the other document, then try the html() function instead.