document.getElementById 沒有得到輸入

Question

我試圖通過document.getElementById獲取輸入中的內容，它確實獲得了其他值，但特別是對於這個它沒有。

let title_input = document.getElementById('HomeworkTitle').value; 這就是我想要做的，然后在這里使用它：

function saveHomework() {

        let title_input = document.getElementById('HomeworkTitle').value;
        let image_input = document.getElementById('image').value;
        let progress_input = document.getElementById('progress').value;
        let description_input = document.getElementById('description').value;
        let duedate_input = document.getElementById('duedate').value;

        axios.post('/storeHomework', {

            subject_id: {{ $id->id }},
            title: title_input,
            image: image_input,
            progress: progress_input,
            description: description_input,
            duedate: duedate_input

        }).then((response) => {

            console.log(response)
            $("#exampleModal .close").click();

        }).catch((error) => {

            console.log(error.response.data)

        });
        $('#thisdiv').load(document.URL +  ' #thisdiv');
    }

    saveHomework();

在 HTML 我得到：

<div class="form-group">
                <label for="exampleInputEmail1">Title:</label>
                <input type="text" name="HomeworkTitle" id="HomeworkTitle" class="form-control" aria-describedby="help">
                <small id="help" class="form-text text-muted">Ex: Investigate blah blah blah.</small>
            </div>  

            <div class="form-group">
                <label for="exampleInputEmail1">Description:</label>
                <textarea type="text" name="description" id="description" class="form-control" aria-describedby="help"></textarea>
                <small id="help" class="form-text text-muted">Point out here details about the homework (optional).</small>
            </div> 

            <div class="input-group mb-3 px-2 py-2 rounded-pill bg-white shadow-sm">
                <input id="image" type="file" name="image" onchange="readURL(this);" class="form-control border-0">
                <div class="input-group-append">
                    <label for="upload" class="btn btn-light m-0 rounded-pill px-4"> <i class="fa fa-cloud-upload mr-2 text-muted"></i><small class="text-uppercase font-weight-bold text-muted">Choose file</small></label>
                </div>
            </div>

             <div class="form-group">
                <label for="exampleInputEmail1">Deadline:</label>
                <input class="form-control" type="date" id="duedate" name="duedate">
            </div> 

            <div class="form-group">
                <label for="exampleInputEmail1">Current progress:</label>
                <div class="range-slider">
                    <input class="range-slider__range" type="range" value="0" min="0" max="100" step="10" id="progress" name="progress">
                    <span class="range-slider__value">0</span>
                </div>
            </div> 
</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary btn-submit" onclick="saveHomework()">Add Homework</button>
      </div>
    </div>

不知道為什么它不起作用。

Answer 1

如果您確定您的 javascript 文件已正確鏈接，請嘗試此操作

document.getElementById("HomeworkTitle").value;

Answer 2

你遇到了什么錯誤？ 也許你的輸入是空的，這就是為什么你什么都不紳士？

 function saveHomework() { const title = document.getElementById("HomeworkTitle"); console.log(title.value) }

 <input type="text" id="HomeworkTitle" value="somevalue"> <button onclick="javascript:saveHomework()">save</button>

Answer 3

請檢查這個

 var title_input = '' let check = document.getElementById("HomeworkTitle") check.addEventListener("focusout", myFunction); function myFunction() { title_input = check.value console.log(check.value) } /////////////here you can you variable////////////////// //axios.post('/storeHomework', { //console.log('title_input',title_input) //title: title_input, //here // } function saveHomework() { let image_input = document.getElementById('image').value; let progress_input = document.getElementById('progress').value; let description_input = document.getElementById('description').value; let duedate_input = document.getElementById('duedate').value; axios.post('/storeHomework', { subject_id: {{ $id->id }}, title: title_input, image: image_input, progress: progress_input, description: description_input, duedate: duedate_input }).then((response) => { console.log(response) $("#exampleModal.close").click(); }).catch((error) => { console.log(error.response.data) }); $('#thisdiv').load(document.URL + ' #thisdiv'); }

 <div class="form-group"> <label for="exampleInputEmail1">Title:</label> <input type="text" name="HomeworkTitle" id="HomeworkTitle" class="form-control" aria-describedby="help"> <small id="help" class="form-text text-muted">Ex: Investigate blah blah blah.</small> </div> <div class="form-group"> <label for="exampleInputEmail1">Description:</label> <textarea type="text" name="description" id="description" class="form-control" aria-describedby="help"></textarea> <small id="help" class="form-text text-muted">Point out here details about the homework (optional).</small> </div> <div class="input-group mb-3 px-2 py-2 rounded-pill bg-white shadow-sm"> <input id="image" type="file" name="image" onchange="readURL(this);" class="form-control border-0"> <div class="input-group-append"> <label for="upload" class="btn btn-light m-0 rounded-pill px-4"> <i class="fa fa-cloud-upload mr-2 text-muted"></i><small class="text-uppercase font-weight-bold text-muted">Choose file</small></label> </div> </div> <div class="form-group"> <label for="exampleInputEmail1">Deadline:</label> <input class="form-control" type="date" id="duedate" name="duedate"> </div> <div class="form-group"> <label for="exampleInputEmail1">Current progress:</label> <div class="range-slider"> <input class="range-slider__range" type="range" value="0" min="0" max="100" step="10" id="progress" name="progress"> <span class="range-slider__value">0</span> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary btn-submit" onclick="saveHomework()">Add Homework</button> </div> </div>