Develop Reference

How do I manipulate the href attribute inside of an <a> tag that I have wrapped inside of an <li> tag?

I began creating a dynamic portfolio, where an array will automatically populate an ordered list with list items. The list items will have the label as the name and the url as the link.
This has mostly worked, except the problem is that I cannot get the 'href' attribute in the tag to change. Instead of being week1/index.html, it ends up being [object Text]. You can see this in the HTML picture. When looking at the URL in my browser when viewing the HTML page, it says [object%20Text] at the end of the URL instead of week1/index.html at the end.
I have tried using setAttribute, as is shown in the code. I have also tried using newA.href = newURL. What I'm doing seems to match solutions that I have found on the internet, but it isn't working. If I remember correctly, I also tried manipulating the onclick attribute to change the link when it is clicked, but that wasn't working either. If there's a syntax issue, I am unaware of it.
I was curious if my newUrl variable had the correct information, and it does. If I do newA.appendChild(newUrl) instead of newA.appendChild(newLabel), it will correctly show that as the label of the list item. If I do newA.setAttribute("href", newLabel) instead of using newUrl, then it will show the same [object Text] inside the href attribute.
Thank you for taking the time to look at this and think about what the issue is.
The javascript code
how the HTML looks after everything:

Always paste your code here so that we can help you more easily.
you're calling
const newUrl = document.createTextNode(links[i].url);
which creates a text object
then you have newA.setAttribute("href", newUrl); which sets the href attribute to that TEXT OBJECT like it shows in your rendered html.
correct the declaration/initialization line to a string
const newUrl = links[i].url;

document.getElementById.style.backgroundImage not working

I want to assign different background images to a div depending on the page's address, so for example, if my url is http://www.mywebsite.com/mysubdirectory/ I use the following code:
if(document.URL.indexOf("mysubdirectory") >= 0){
document.getElementById("wrapper").style.backgroundImage = "url('bg-wrapper.jpg')";
}
But it's not working. I even added a bogus document.write command just to make sure the rest of the code was ok and sure enough the bogus line showed up in my browser. Is there something I'm overlooking?
EDIT: Thank you all for your answers - when I use body instead of getElementById("wrapper") in my code, the image shows up, so I doubt it's a path-related issue. I trued adding an onload attribute to the body tag but it's still not working with getElementById. Any ideas?

Your
document.getElementById("wrapper").style.backgroundImage = "url('bg-wrapper.jpg')";
code is correct.
It works fine in this jsfiddle: http://jsfiddle.net/hUuN5/
Are you sure the image is correct. Remember that the path to the file is relative to the location of the current page. NOT the css directory

I'm using Chrome 29.0.1547.66 and none of the anwers worked either.
So I tried:
document.getElementById("wrapper").style.backgroundImage = "url(http://media.nu.nl/m/m1fz6dwa6h3w.jpg)";
It worked taking off the quotation marks from the image url.
Here working as well: http://jsfiddle.net/xEujg/
html css backgroundimage javascript

Try this, I think the image url is wrong most likely. You probably need a relative path of sorts:
document.getElementById("wrapper").style.backgroundImage = "url('/bg-wrapper.jpg')";

Specifying a protocol worked for me in chrome. I couldn't get it to work using the catch all '//'. It had to be 'http://' I'm assuming it must match whatever protocol was used to load the page or iframe.
for example
element.style.backgroundImage="url(http://somedomain.com/images/myimage.jpg)"
or
element.style.backgroundImage="url('http://somedomain.com/images/myimage.jpg')"
worked for me.

If anyone is still interested in this. Here is a solution:
document.getElementById("wrapper").style.background = "url(http://media.nu.nl/m/m1fz6dwa6h3w.jpg)";

This works for me:
var pointer = "url(\'/" + imageArray[imageCounter].toString() + "\')";
document.body.style.backgroundImage = pointer
After spending a bit of time on this, it was the browser's engine parsing the CSS. No good errors in the console.

The solution is to not do everything on the same line.
You have to create a variable, assign it the url and then pass it.
let bg = "url('" + imgUrl + "')";
document.getElementById("wrapper").style.backgroundImage = bg;

In IE 7, how can you get the literal value of a link’s href attribute, if the link was created using jQuery?

If you have a regular link in HTML, you can get the value of its href attribute using jQuery’s attr function:
<a id="testLink" href="test/link.html">Test Link</a>`
>>> $('#testLink').attr('href');
testLink.html
Example:
http://jsfiddle.net/63RsQ/1/
However, if the link was created using jQuery, then in IE 7, this function returns the absolute URL that the browser would access if you clicked on the link (e.g. https://stackoverflow.com/questions/ask/testLink.html), instead of the literal value of the href attribute.
Example:
http://jsfiddle.net/xtrEB/10/
I’ve also tried this, this.href, and this.getAttribute('href'), and they all return an absolute URL.
Is there any way to get the literal value of the href attribute of a link created by jQuery in IE 7?

If you are creating the link in a way that jQuery is forced to use .innerHTML, it will work not properly and is documented in: http://api.jquery.com/html/ (also http://api.jquery.com/jQuery/#creating-new-elements) :
This method uses the browser's innerHTML property. Some browsers may
not generate a DOM that exactly replicates the HTML source provided.
For example, Internet Explorer prior to version 8 will convert all
href properties on links to absolute URLs, and Internet Explorer prior
to version 9 will not correctly handle HTML5 elements without the
addition of a separate compatibility layer.
To fix it, create the link in a way that doesn't force jQuery to use .innerHTML:
$('#test').append( $("<a>", {href: "test/link.html", text: "Test Link"}));
http://jsfiddle.net/xtrEB/12/

I think it's not possible, at least not in IE7. JQuery uses innerHTML, and IE seems to rewrite the href attribute to a Fully Qualified Domain Name (FQDN) on rendering (earlier versions of IE are known to do so). So the literal value is lost on rendering. If you know the path, you could try to find it using some string eqation, stripping the domain from the url or something. Or forget about IE<8 alltogether if possible.
May be this article sheds some light
If you use plain javascript and DOM-methods to add elements, you can retrieve the literal value even in IE7. See this jsfiddle

try this:
$('a').click(function () {
var hrf = this.href;
alert('this.href: \n' + hrf.slice(hrf.lastIndexOf('/')+1, hrf.length) );
return false;
});
http://jsfiddle.net/xtrEB/5/

IE is not showing updated IMG SRC change done in Javascript

ISSUE: IE version 7 and 8 is not showing updated IMG SRC change done in JavaScript
You can see what I mean if you go to the URL below, and on the left under (3) I want a different liner, you choose one of the swatches; lets say you choose "Asahi Chartreuse". Notice nothing happens to the preview on the left. BUT then if you go ahead and choose another swatch, you will see the preview on the left shift to show Asahi Chartreuse. So it is one behind. This is why I believe it is a "refresh" issue. It works in Chrome just fine.
In IE: Notice if you click on some other control, the refresh happens.
You can see the code here: https://www.casemodo.com/test.asp
WHAT I'VE TRIED SO FAR:
I've tried adding headers to say "no-cache".
I've tried adding "?" and random number after the png file name.
I've tried setting focus() to the image after changing the src.
I've tried, after changing src, telling the style.display to be hidden and then visible.
I've tried creating a hidden (and not hidden) text input box on the page and then setting focus() to it after changing img src.
I've tried setting window.focus().
I've tried (as you see now) setting an alert after changing the src.
GUESS: What it looks like now is the JavaScript engine just pauses after I set that src UNTIL you manually click (focus) somewhere else on the screen. So it never even gets to all of those scripts I've tried above.

Set the src attribute to null, then set it to your new url:
in jquery:
var myImg = $('#myImg');
myImg.attr('src', null);
myImg.attr('src', newUrl);
in straight js:
var myImg = document.getElementById('myImg');
myImg.src = null;
myImg.src = newUrl
This worked for me - it was driving me mad!

Try to use onclick instead of onchange. The latter doesnt work well with some form elements in some browsers.

I've seen similar IE issues solved with a seemingly bizarre reassignment of innerHTML. Suppose "container" is a variable referencing the parentNode of the img. Try "container.innerHTML = container.innerHTML". This triggers a re-rendering and may bring the errant img to life.

Comments on the question:
Please include a code snippet in the question.
Was the javascript in an onchange event, or where?
If the client browser is Google Chrome, does it work?
(Sounds like yet-another-IE-image-src-bug.)
The demonstration page you linked to has been changed since this question was posted;
as I write this, clicking on a swatch causes submit which causes load of a different page.
A suggestion:
Use setTimeout, so that the actual change occurs when the timeout event fires, instead of in the original GUI event thread.
For example, if the original javascript was
SomeFunction();
change this to
setTimeout(SomeFunction, 10);
(where image.src = newURL; is done inside SomeFunction)

This question is probably no longer relevant but we ran into the same issue today when we checked backward compatibility for one of our libraries.
The only thing that worked for us was to replace the image element by itself before changing the value for the src attribute:
var myImg = document.getElementById('myImg');
myImg.parentNode.replaceChild(myImg, myImg);
myImg.src = newUrl;

I was working with a Lazy Loading implementation, and got to a similar problem. For some reason, after changing the data-srcset attributes to srcset in code, even with the other approaches described on this page, the elements still didn't seem to get the new attributes values. After some research, I got to this page on github, about a bug fix on a lazy loading plugin. It gave me the idea to, instead of using the replace option described here, or the your_element.src=null approach, to use something like this:
your_element.setAttribute("src", your_element.getAttribute("data-srcset"));
And it ended up working for me.

Remove title tag tooltip

Is there any way to remove the tooltip from title attribute without actually remove the title.
I have a link with a title attribute like this
It is important that the title is intact since I need to read the url from there. All the fixes for this that I have found is to remove the title attribute and reuse it but in this case this is not possible.
Any ideas?

It's all about the browser. It's the browser that sees the title as a tooltip, from the browser specifications and interpretations.
You should use if you want to handle data like that, the HTML5 way (which you can use in any other document type as it's ignored) and use:
with the data- attributes, there will be no tooltip as title is not used, and you can easily get that using:
$("a").attr("data-title")
but, you will need to convert stuff and you said that you don't/can't do that.
you can easily convert all titles into data-title and clean the title using
$("a").attr("data-title", function() { return $(this).attr("title"); } );
$("a").removeAttr("title");
(all code is to be used with jQuery Framework)

As you didn't mark this question as jquery, I'm assuming that you'd be open to a pure JavaScript solution?
The following works (on Ubuntu 11.04) in Firefox 5, Chromium 12 and Opera 11, I'm unable to test in IE, but as I'm using querySelectorAll() I'd suspect that it wouldn't work well, if at all. However:
var titled = document.querySelectorAll('[title]'); // gets all elements with a 'title' attribute, as long as the browser supports the css attribute-selector
var numTitled = titled.length;
for (i=0; i<numTitled; i++){
titled[i].setAttribute('data-title',titled[i].title); // copies from 'title' to 'data-title' attribute
titled[i].removeAttribute('title'); // removes the 'title' attribute
}
JS Fiddle demo.
References:
document.querySelectorAll at the Mozilla Developer Network.

Why don't you use jQuery to move this information from title to element data.
Run this on element load:
$(el).data('url', $(el).attr('title')).attr('title', '');
And afterwards read URL like this:
$(el).data('url');
Variable el here is DOM element or element selector.