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-input”的元素，因此它总是返回 undefined。

由于输入框是页面上唯一具有“todo-input”类的元素，您可以使用下面修改后的代码来选择特定元素并获取其值。请记住，在 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] 配对，这将有效地选择页面上的文本框并显示其值。

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

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

Answer 3

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

getElementsByClassName 返回 array-like object 非对象。

<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>

从文本输入字段获取文本

3 个答案: