从文本输入字段获取文本

Question

我在这里得到了这个代码：

<input type="text" class="todo-input" placeholder="Gebe hier dein Taskein">
<button onclick="task = document.getElementsByClassName('todo-input').value; 
window.alert(task)">Hinzufügen</button>

但是为什么我看到未定义而不是输入字段中的文本？我该怎么做才能得到输入文本？

Answer 1

document.getElementsByClassName返回一个元素数组。

要获得要通过索引检索元素的值，例如：

task = document.getElementsByClassName('todo-input')[0].value;

此外，您应该考虑使用ID而不是类。ID是唯一的，类不是。例如

<input type="text" id="myInput" class="todo-input" placeholder="Gebe hier dein Taskein">
task = document.getElementById('myInput').value;

Answer 2

因为您是按类名进行选择的，所以必须定义要选择的元素编号，否则JavaScript将返回元素集合。在您当前的代码中，JavaScript无法确定类名为"的元素；todo输入"；选择，因此它将始终返回undefined。

由于输入框是页面上唯一带有"的元素；todo输入"；类，您可以使用下面修改后的代码来选择特定的元素并获取其值。请记住，在JavaScript中，计数从0开始，因此此代码将选择页面上具有指定类名的第一个输入。

<input type="text" class="todo-input" placeholder="Gebe hier dein Taskein">
<button onclick="task = document.getElementsByClassName('todo-input')[0].value; 
window.alert(task)">Hinzufügen</button>

如上面修改的代码所示，选择器现在与[0]配对，[0]将有效地选择页面上的文本框并显示其值。

document.getElementsByClassName('todo-input')[0].value

如果您的页面将包含具有相同类名的其他元素，或者您在当前元素之前添加了具有相同类的新元素，请确保调整数值，以便选择正确的元素。

Answer 3

请检查以下链接。https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

getElementsByClassName返回array-like objectnot对象。

<input type="text" class="todo-input" placeholder="Gebe hier dein Taskein">
<button onclick="task = document.getElementsByClassName('todo-input')[0].value; 
window.alert(task)">Hinzufügen</button>