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

Posted 2023-02-24

【中文标题】为啥在javascript中单击时未设置输入值？

【英文标题】：why the value of input is not set on click in javascript?为什么在javascript中单击时未设置输入值？

【发布时间】：2021-10-28 22:08:55

【问题描述】：

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

<form action="/index" method="POST">
                                            % csrf_token %
                                            % for staffs in staff %
                                                <input type="hidden" name="staff_idstaffs.id" value="staffs.id">
                                                <input type="hidden" name="attendancestaffs.id" id='input_attendancestaffs.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='presentstaffs.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="attendancestaffs.id" id='input_attendancestaffs.id'>
<script>
function attendance_absent(id) 

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

这里的 staffs.id 来自 django 表。

【参考方案1】：

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

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

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