When I use .value to get an input value it returns Undefined

Question

When ever I get the value of a text input using .value, then display it on a web page it displays Undefined.

I have viewed many fixes and none worked.

Java Script

function user() {
    let userNum = 1;
    let userSays = document.getElementsByClassName("text_box").value;
    let x = document.createElement("P");
    let y = document.getElementById("chat_box");
    x.setAttribute("class", "chatUser");
    x.setAttribute("id", 'u'+ userNum);
    x.innerHTML = "@User:" + userSays;
    y.appendChild(x);
    userNum += 1;
    updateScroll()
}

HTML

</div>

<input class = "text_box" type="text" placeholder="This does something">
<button id = inputPrint onclick= 'user()'>User</button>

When the person on the page types something in the input box, then hits the User button, it should display. User: What user typed

However it currently displays. User: Undefined

`.getElementsByClassName()` returns a **list** of elements, even if there's only one matching element on the page. You have to iterate through the elements of the list and operate on each one individually. — Pointy, Dec 19 '18 at 16:40

score 0 · Accepted Answer · answered Dec 19 '18 at 16:40

0

getElementsByClassName() returns collection. You have to use specific index.

Change

let userSays = document.getElementsByClassName("text_box").value;

To

let userSays = document.getElementsByClassName("text_box")[0].value;

answered Dec 19 '18 at 16:40

Giulio Bambini

4,695
4
21
36

Thank you, That fixed the problem – Acelib25 Dec 19 '18 at 16:43
@Acelib25, you are most welcome :) – Giulio Bambini Dec 19 '18 at 16:47

When I use .value to get an input value it returns Undefined

1 Answers1