Not able to make setting value to "innerHTML" for an element work

Question

I'm newbie to JS. I've a code sample below, in which I've written a JS function through which I'm trying to change value of <p> tag after a button click. My question is why only setting innerHTML work with 'getElementById()'; but not with the other approaches?

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("myid").innerHTML = 'hey';
    document.getElementByName("myname").innerHTML = 'Whats';
    document.getElementByTagName("p").innerHTML = 'up! ';
    document.querySelector("p#myid").innerHTML = 'Dude.';
}
</script>
</head>
<body>

<p id="myid" name="myname">This text will be changed after button click.</p>

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

</body>
</html>

Result: I was Expecting "Dude." displayed after the click.

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) — Durga, Mar 17 '18 at 10:58

score 4 · Answer 1 · edited Mar 17 '18 at 19:40

4

The script fails on the document.getElementByName("myname").innerHTML = 'Whats'; line, because getElementByName is not a function, and it errors when the script tries to call it. The correct name is getElementsByName; elements. Same for getElementsByTagName.

Also, both functions return lists of elements and not single elements. Because of that, here, you want to use [0] to get the first element in that list, then work with it that way:

document.getElementsByName("myname")[0].innerHTML = 'Whats';

Use F12 or Ctrl+Shift+I (depending on the browser) to open up your browser console to see errors, and consult the documentation (from the site I linked for example) to make sure you're using the right function.

edited Mar 17 '18 at 19:40

L Y E S - C H I O U K H

4,765
8
40
57

answered Mar 17 '18 at 11:02

kingdaro

11,528
3
34
38

Okay thanks, what if I use document.getElementsByName("myname")[0], I've changed it in my question? – Kushal Bhalaik Mar 17 '18 at 11:04
Thanks got what I was looking for – Kushal Bhalaik Mar 17 '18 at 11:06
Sure, happy to help c: In the future, however, I'd recommend against editing your question with the solution; that's what the answers are for. – kingdaro Mar 17 '18 at 11:07

Abhishek · Answer 2 · 2018-03-17T11:05:25.477

2

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
 debugger;
    document.getElementById("myid").innerHTML = 'hey';
    document.getElementsByName("myname").innerHTML = 'Whats';
    document.getElementsByTagName("p").innerHTML = 'up! ';
    document.querySelector("p#myid").innerHTML = 'Dude.';
}
</script>
</head>
<body>

<p id="myid" name="myname">This text will be changed after button click.</p>

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

</body>
</html>

Here you have wrote document.getElementByName("myname").innerHTML = 'Whats'; which is not correct it must be document.getElementsByName("myname").innerHTML = 'Whats'; Try this It works. FYI document.getElementsByName return array of elements with same name .

edited Mar 17 '18 at 11:05

answered Mar 17 '18 at 11:03

Abhishek

972
3
12
24

This `document.getElementsByName("myname").innerHTML` is only creating an attribute `innerHTML` into the returned NodeList. Not ok! – Ele Mar 17 '18 at 11:04
but here script throw error on document.getElementByName("myname").innerHTML = 'Whats'; and rest of script is not executed – Abhishek Mar 17 '18 at 11:07

Ininiv · Accepted Answer · 2018-03-17T11:16:03.850

2

Change as follows, it works

document.getElementById("myid").innerHTML = 'hey';  
document.getElementsByName("myname")[0].innerHTML = 'Whats'; 
document.getElementsByTagName("p")[0].innerHTML = 'up! ';
document.querySelector("p#myid").innerHTML = 'Dude.';

edited Mar 17 '18 at 11:16

answered Mar 17 '18 at 11:06

Ininiv

1,325
7
12

Will mark this one as accepted, because this addresses the problem; although without explaining it. – Kushal Bhalaik Mar 17 '18 at 11:07
getElementsByName(), getElementsByTagName() are the methods not as getElementByName(), getElementByTagName(). – Ininiv Mar 17 '18 at 11:11

baeyun · Answer 4 · 2018-03-17T11:03:14.617

1

I'm sure document.querySelectorAll, document.getElementsByClassName and document.getElementsByTagName will return a NodeList object. However, document.querySelector should return the first match of that element within the given context (document).

edited Mar 17 '18 at 11:03

answered Mar 17 '18 at 11:02

baeyun

228
1
6

Not able to make setting value to "innerHTML" for an element work

4 Answers4