element.setAttribute is not a function

Question

So, i know that this has already been answered, but none of the previous answers managed to make my code work. I have a html structure as the following:

<div class="form">
    <div class="formrow">
        <div class="previewcontainer">
            <object id="preview">
            <object>
        </div>
    </div>
</div>

I am trying to set the data attribute to the object like this:

var link = "http://www.someurl.com";
var preview = document.querySelectorAll ("#preview");
preview.setAttribute("data", link);

However, I get an error preview.setAttribute is not a function

Solution 1

or this:

var link = "http://www.someurl.com";
var preview = document.getElementById("preview"); //getElementById instead of querySelectorAll
preview.setAttribute("data", link);

Be sure to run the code after the element is created, or use jQuery code:

$( document ).ready(function() {
}


    

@Lazarus Rising mentioned,

Uncaught TypeError: Cannot read property 'setAttribute' of null

In that case, the element doesn't exist yet in the document. You need to run the code after the element is created, say after the load event or a script below the element.

Solution 2

If you should use querySelectorAll the answer of @Viktor Akanam will help you

Or you can just sue querySelector instead of querySelectorAll!

Solution 3

If you assign the variable using any selector capable of selecting more than one element at a time (eg. getElementsByClassName , querySelectorAll ) then it shows the error so use any selector that select single element at a time (Eg: getElementById)

Solution 4

when using querySelectorAll(), treat this as an array, you need a 'for loop' to step through the different elements. eg.

var link = "http://www.someurl.com";
var preview = document.querySelectorAll ("#preview");
for (var i = 0; i < preview.length;  i++ {
preview[i].setAttribute("type", 'href');
}

This will now change the 'type attributes' of all the elements with an id of 'preview' to a link.

View more solutions

Comments

[Lazarus Rising]

doing this I get "Cannot read property 'setAttribute' of undefined"

[Lazarus Rising]

I got "Uncaught TypeError: Cannot read property 'setAttribute' of null"

[RobG]

@LazarusRising—in that case, the element doesn't exist yet in the document. You need to run the code after the element is created, say after the load event or a script below the element.

[Lazarus Rising]

Actually, that really was the problem, but I had disqualified it because I was only writing the content of a function to a code I don't have full access on. Would you mind editing your answer so that it is accepted?

[JsAndDotNet]

I was trying to select an element that wasn't there. Gives the same error. Doh! This answer gave me a pointer in the right direction.

[inubs]

I though i was clear on "Be sure to run the code after the element is created", but i guess not...