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

Beene

preview is a nodelist – Selfeffacing

var preview = document.querySelector ("#preview"); or var preview = document.getElementById ("preview"); – Selfeffacing

Answer 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.

Preparator

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

@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. – Cale

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? – Beene

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. – Thirsty

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

Answer 2

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.

Trouble

Answer 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)

Antenatal

Answer 4

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

Or you can just sue querySelector instead of querySelectorAll!

Oliphant

Answer 5

try this:

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

Sokoto

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