Can't apply the setAttributeNode to a textarea

Question

Can someone help me? I would like to do something like this on a textarea to set the maxlength attribute:

<!DOCTYPE html>
<html>
<head>
<style>
.democlass {
    color: red;
}
</style>
</head>
<body>

<h1>Hello World</h1>

<p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var h1 = document.getElementsByTagName("H1")[0];
    var att = document.createAttribute("class");
    att.value = "democlass";
    h1.setAttributeNode(att);
}
</script>

</body>
</html>

My code is:

<!DOCTYPE html>
<html>
<head>
<style>
</head>
<body>

<textarea>Hello World</textarea>

<button onclick="myFunction()">change max length</button>

<script>
function myFunction() {
    var text = document.getElementsByTagName("textarea");
    var att = document.createAttribute("maxlength");
    att.value = "100";
    text.setAttributeNode(att);
}
</script>

</body>
</html>

And if I run the script by clicking the button the console says:

Uncaught TypeError: h1.setAttribute is not a function.

Ps: i'm new at stackoverflow :)

Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Sebastian Simon, May 17 '18 at 04:03

score 2 · Accepted Answer · answered Sep 11 '15 at 07:20

You have some errors in your code. Check out this simplified one:

jsFiddle

<h1>Hello World</h1>

<textarea rows="10" cols="40"></textarea><br />
<button onclick="myFunction()">change max length</button>

<script>
    function myFunction() {
    var text = document.getElementsByTagName("textarea")[0];
    text.setAttribute("maxlength", 100);
}
</script>

guvenckardas · Answer 2 · 2015-09-11T07:11:34.220

1

Firstly, you forgot the textarea:

<!DOCTYPE html>
<html>
<head>
    <style>
    </style>
</head>
<body>

<h1>Hello World</h1>

<button onclick="myFunction()">change max length</button>
<textarea></textarea>

<script>
    function myFunction() {
        var text = document.getElementsByTagName("textarea");
        var att = document.createAttribute("maxlength");
        att.value = "100";
        text[0].setAttributeNode(att);
    }
</script>

</body>
</html>

And also document.getElementsByTagName returns you an array so you get 'h1.setAttribute is not a function.' mistake.

edited Sep 11 '15 at 07:11

answered Sep 11 '15 at 07:10

guvenckardas

738
4
8

Please don't forget 'mark as an answer' and vote up :) Thanks – guvenckardas Sep 11 '15 at 07:12
It didn't work! But i appreciate your answer! @guvenckardas – Asjon Sep 11 '15 at 08:18

score 0 · Answer 3 · answered Sep 11 '15 at 07:07

You have two problems:

You have to work on an element not a collection

Compare (specifically the last few characters of each line):

var h1 = document.getElementsByTagName("H1")[0];
var text = document.getElementsByTagName("textarea");

In the first case you are trying to work on the first H1 in the document. In the second, you are trying to work on the collection of all the textareas.

Collections are not elements and don't have all the methods that elements do.

You have to work on an element that exists

You have no textarea in the second set of code.

@Asjon — Then only the first of the two problems is your problem. — Quentin, Sep 11 '15 at 07:17

Can't apply the setAttributeNode to a textarea

3 Answers3

You have to work on an element not a collection

You have to work on an element that exists