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

var preview = document.querySelector ("#preview"); or var preview = document.getElementById ("preview"); — Arun P Johny
– Arun P Johny, Commented Feb 25, 2016 at 12:01

Rifky Niyas · Accepted Answer · 2022-01-26 09:43:58Z

12

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.

edited Jan 26, 2022 at 9:43

Rifky Niyas

2,1061 gold badge15 silver badges29 bronze badges

answered Feb 25, 2016 at 12:03

inubs

5192 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Lazarus Rising Over a year ago

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

RobG Over a year ago

@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 Over a year ago

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?

JJJCoder Over a year ago

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 Over a year ago

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

Victor Akanam · Accepted Answer · 2020-01-01 15:23:45Z

3

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.

answered Jan 1, 2020 at 15:23

Victor Akanam

312 bronze badges

Comments

Rifky Niyas · Accepted Answer · 2022-01-24 08:57:27Z

2

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)

edited Jan 24, 2022 at 8:57

Rifky Niyas

2,1061 gold badge15 silver badges29 bronze badges

answered Jul 29, 2021 at 11:07

Yogesh Anjana

211 bronze badge

Comments

Rifky Niyas · Accepted Answer · 2022-01-24 14:13:53Z

1

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

Or you can just sue querySelector instead of querySelectorAll!

edited Jan 24, 2022 at 14:13

Rifky Niyas

2,1061 gold badge15 silver badges29 bronze badges

answered Nov 11, 2020 at 18:27

med ali mahdhaoui

315 bronze badges

Comments

Alexandr Kudryashov · Accepted Answer · 2016-02-25 12:01:57Z

0

try this:

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

answered Feb 25, 2016 at 12:01

Alexandr Kudryashov

6313 silver badges16 bronze badges

1 Comment

Lazarus Rising Over a year ago

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

Collectives™ on Stack Overflow

element.setAttribute is not a function

5 Answers 5

5 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related