GetElementsByClassName('..')[0].value = '' does not work

Question

I'm having a trouble putting/updating the value of an element got by class name.

here is my code:

index.html:

<dl>
   <dt class="dt-messages-number">total</dt>
   <dd class="dd-messages"></dd>
   ...
</dl>

main.js :

...
var parsedRes = JSON.parse(res);
console.log(res.messages);  //prints undefined
console.log(parsedRes.messages); //prints 23 ,okay
document.getElementsByClassName('dd-messages')[0].value = '7';  //not working 
document.getElementsByClassName('dd-messages')[0].value = 7;  //not working
document.getElementsByClassName('dd-messages')[0].value =parsedRes.messages; //not working

last three code lines does not work ,it does not update the value of the description element dd-messages. Does any one have idea why is that ?

Form elements have a value attribute. A `dd` is not a form element, and has no value. You probably want to set the `innerHTML` instead. — CBroe, Sep 01 '17 at 11:02

score 3 · Accepted Answer · answered Sep 01 '17 at 11:02

3

You want to use .innerHTML instead of .value.

.value is a method used for inputs, for a text inside <tags></tags> use .innerHTML

Documentation: .innerHTML

answered Sep 01 '17 at 11:02

Melcma

608
3
14

score 2 · Answer 2 · answered Sep 01 '17 at 11:05

Use .innerText OR innerHTML instead

document.getElementsByClassName('dd-messages')[0].innerText = '7';

<dl>
   <dt class="dt-messages-number">total</dt>
   <dd class="dd-messages"></dd>
</dl>

for difference between .value, .innetText and innerHTML refer this.

score 1 · Answer 3 · edited Sep 01 '17 at 11:15

1

As mentioned above, there is no value attribute on such DOM elements.

You can use either innerHTML or innerText. If you know your value is safe and contains safe html, you can use innerHTML, otherwise you should go with innerText.

e = <your element by class name>;
e.innerText = e.textContent = "your text"; <-- does not render html--/>

edited Sep 01 '17 at 11:15

Nemani

778
5
12

answered Sep 01 '17 at 11:06

Rainer Plumer

3,693
2
24
42

score 0 · Answer 4 · answered Sep 01 '17 at 12:22

document.getElementsByClassName('dd-messages')[0].innerHTML = "Hello world"
// OR you can Also Use
var dd = document.getElementsByClassName('dd-messages');
console.log(dd.ClassName = "Hello World")

<dl>
   <dt class="dt-messages-number">total</dt>
   <dd class="dd-messages"></dd>
   ...
</dl>

GetElementsByClassName('..')[0].value = '' does not work

4 Answers4