为什么在javascript中单击时未设置输入值？

Question

我正在使用 django 框架来制作考勤应用程序。 出席 id 用户选择缺席的下拉菜单比它调用一个函数比隐藏输入框设置缺席的值。 这是我的模板

<form action="/index" method="POST">
                                            {% csrf_token %}
                                            {% for staffs in staff %}
                                                <input type="hidden" name="staff_id{{staffs.id}}" value="{{staffs.id}}">
                                                <input type="hidden" name="attendance{{staffs.id}}" id='input_attendance{{staffs.id}}'>
                                                <tr>
                                                    <td> {{staffs.id}} </td>
                                                    <td> {{staffs.name}} </td>
                                                    <td>
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='present{{staffs.id}}'>
                                                                Present
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" onclick="attendance_present({{staffs.id}})">Present</a>
                                                                <a class="dropdown-item" onclick="attendance_absent({{staffs.id}})">Absent</a>
                                                                <a class="dropdown-item" onclick="attendance_half_day({{staffs.id}})">Half-day</a>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td> {{staffs.role}} </td>
                                                </tr>
                                                
                                            {% endfor %}
                                            <tr>
                                                <button type="submit" style="float:right" class="btn btn-info">Save</button>
                                            </tr>
                                        </form>
<script>
        function attendance_present(id) {
            let per = '#present' + id
            document.querySelector(per).textContent = "Present"
            document.querySelector(per).classList.remove("btn-outline-danger")
            document.querySelector(per).classList.remove("btn-outline-warning")
            document.querySelector(per).classList.add("btn-outline-primary")

            let input_attendance = 'input_attendance' + id
            document.queryselector(input_attendance).value = "present"
        }

        function attendance_absent(id) {
            let per = '#present' + id
            document.querySelector(per).textContent = "Absent"
            document.querySelector(per).classList.remove("btn-outline-primary")
            document.querySelector(per).classList.remove("btn-outline-warning")
            document.querySelector(per).classList.add("btn-outline-danger")

            let input_attendance = 'input_attendance' + id
            document.queryselector(input_attendance).value = "absent"
        }

        function attendance_half_day(id) {
            let per = '#present' + id
            document.querySelector(per).textContent = "Half-day"
            document.querySelector(per).classList.remove("btn-outline-primary")
            document.querySelector(per).classList.remove("btn-outline-danger")
            document.querySelector(per).classList.add("btn-outline-warning")

            let input_attendance = 'input_attendance' + id
            document.queryselector(input_attendance).value = "half-day"
        }
</script>

但不是设置主代码的值

<input type="hidden" name="attendance{{staffs.id}}" id='input_attendance{{staffs.id}}'>
<script>
function attendance_absent(id) {

        let input_attendance = 'input_attendance' + id
        document.queryselector(input_attendance).value = "absent"
    }
</script>

这里的 {{staffs.id}} 来自 django 表。

Answer 1

我找到了答案 在这里，我使用queryselector但是我想从id设置，js找不到，答案是

document.queryselector(input_attendance).value = "absent"

document.getElementById(input_attendance).value = "absent"