JavaScript中onchange事件获取this.value返回undefined问题求助

我尝试通过JavaScript获取表单输入框的值，但控制台输出undefined，相关代码如下：

HTML代码 #

<td onchange="validate_hours(this)">{{ form.monday }}</td>

JavaScript代码 #

function validate_hours(elem) {
   console.log(elem.value)
}

Django表单字段{{ form.monday }}渲染后的实际HTML为：

<input type="number" name="form-0-monday" value="4.0" step="any" placeholder="0.0" id="id_form-0-monday">

问题原因 #

你把onchange事件绑定在了<td>元素上，而<td>本身并没有value属性，所以打印elem.value自然会得到undefined。实际的输入值存储在<td>内部的<input>标签里。

解决方案 #

方案1：直接给Django表单输入框绑定事件

在Django表单定义时，给字段的widget添加onchange属性，让事件直接绑定到输入框上：

class YourForm(forms.Form):
    monday = forms.FloatField(
        widget=forms.NumberInput(attrs={
            'onchange': 'validate_hours(this)',
            'step': 'any',
            'placeholder': '0.0'
        })
    )

此时HTML会渲染成带onchange的输入框，函数中的this指向输入框本身，就能正确获取value。

方案2：修改JavaScript函数，从<td>中获取输入框

如果不想修改表单定义，调整函数逻辑，从传入的<td>元素中找到子输入框：

function validate_hours(elem) {
    const inputElem = elem.querySelector('input');
    if (inputElem) {
        console.log(inputElem.value);
    }
}

方案3：使用事件委托（推荐）

给包含这些<td>的表格绑定事件，通过事件冒泡来捕获输入框的change事件，适合动态生成的表单：

document.querySelector('table').addEventListener('change', function(e) {
    const target = e.target;
    // 筛选出目标输入框
    if (target.tagName === 'INPUT' && target.id.includes('monday')) {
        console.log(target.value);
    }
});

这种方式不需要给每个<td>或输入框单独绑定事件，维护更方便。

内容的提问来源于stack exchange，提问作者Carlos S. C.