document.getbyId() 不适用于 div 类模式

Question

我需要从模态中获取值，以便将它们添加到我们的 firebase 数据库，但是当我尝试通过 document.getbyId 从模态中获取值时，它们返回 null。

这是模态代码和我正在尝试使用的 javascript：

var message_element =  document.getElementById('message');
var name_element = document.getElementById('name');
var time_element = document.getElementById('time');
var submitBtn = document.getElementById('submitBtn');
var venue_element = document.getElementById('venue');
var route_element = document.getElementById('route');
var date_element = document.getElementById('date');
function saveData(){
    alert("Hello! I am an alert box!!");
    var firebaseRef = firebase.database().ref().child("Message");
    var text = message_element.value;
    var route = route_element.value;
    var name = name_element.value;
    var date = date_element.value;
    var time = time_element.value;
    var venue = venue_element.value;
    var now = new Date();
    var today = now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate();
    var ID = now.getFullYear()+""+(now.getMonth()+1)+""+now.getDate()+""+now.getHours()+""+now.getMinutes()+""+now.getSeconds()+""+now.getMilliseconds();
     firebaseRef.child(ID).set({
        date: date,
        time: time,
        type: name,
        venue: venue,
        route: route,
        message: text
        });
}

<div id="myAdd" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Set Schedule</h4>
            </div>

            <div class="modal-body">

                <label class="control-label" for="venue" style="padding:5px 0px 0px 0px">Date</label>
                <!-- <div class='input-group date' id='datepicker'>
                    <input type="text" class="form-control" />
                    <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>   -->           
                <div class="input-group input-append date" id="datepicker1">
                    <input type="date" id="date" class="form-control" name="date" />
                    <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>

                <label class="control-label" for="venue" style="padding:5px 0px 0px 0px">Time</label>
                <input type="time" id="time" class="form-control" min="2016-01-02">   

                <label class="control-label" id="type" for="venue" style="padding:5px 0px 0px 0px">Notification Type</label>
                <select class="form-control">
                    <option>Select type</option>
                    <option>Event</option>
                    <option>Notification</option>
                    <option>Reminder</option>
                </select>  

                <label class="control-label" for="venue" style="padding:5px 0px 0px 0px">Venue</label>
                <input type="text" class="form-control" id="venue" name="venue" placeholder="Venue">


                <label class="control-label" for="venue" style="padding:5px 0px 0px 0px">Route No.</label>
                <select class="form-control" id="route">
                    <option>Select route</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>  


                <label class="control-label" for="venue" style="padding:5px 0px 0px 0px">Message</label>
                <textarea class="form-control" rows="3" id="message" placeholder="Type your message here..."></textarea>           

            </div>

            <div class="modal-footer">
                <div class="col-md-6">
                    <input class="btn btn-block btn-warning pull-right"  data-dismiss="modal" value="Cancel" /> 
                </div>

                <div class="col-md-6">
                    <input class="btn btn-success btn-block" onclick="saveData()" id="submitBtn" type="submit" value="Set Schedule" />
                </div>  
            </div>
        </div>
    </div>
</div>

Answer 1

尝试...这对我有用...正在获取数据，但错误是 firebase 未定义，但您可能已经定义了，对吗？

<script>

function saveData(){
    var message_element =  document.getElementById('message');
    var name_element = document.getElementById('name');
    var time_element = document.getElementById('time');
    var submitBtn = document.getElementById('submitBtn');
    var venue_element = document.getElementById('venue');
    var route_element = document.getElementById('route');
    var date_element = document.getElementById('date');
    alert(message_element.value);
    var firebaseRef = firebase.database().ref().child("Message");
    var text = message_element.value;
    var route = route_element.value;
    var name = name_element.value;
    var date = date_element.value;
    var time = time_element.value;
    var venue = venue_element.value;
    var now = new Date();
    var today = now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate();
    var ID = now.getFullYear()+""+(now.getMonth()+1)+""+now.getDate()+""+now.getHours()+""+now.getMinutes()+""+now.getSeconds()+""+now.getMilliseconds();
     firebaseRef.child(ID).set({
        message: text
     });
}

</script>