无法将“innerHTML”的属性设置为 null答案

【问题标题】：Cannot set property of 'innerHTML' of null无法将“innerHTML”的属性设置为 null
【发布时间】：2017-04-26 05:27:24
【问题描述】：

我正在尝试根据用户从表单输入的数据在表中创建新的数据行。当他们为一组新数据创建多行时，我需要它将新行附加到新的 div ID 上，这样它就不会覆盖第一个。当您单击“创建新费用”按钮时可以找到此表单。

但是，当我相信我有执行此操作的代码时，我会在标题中看到错误。我正在使用 Jquery 来检测按钮何时被按下。该错误似乎发生在我的 javascript 的第 56 行。

该网站可以在这里访问http://54.171.230.22/

区分大小写用户名：stack

区分大小写密码：stack

然后是“你的时间”页面。

HTML

<html>

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://use.fontawesome.com/adb0270382.js"></script>
<script
    src="https://code.jquery.com/jquery-3.1.1.js"
    integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
    crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.10.2/validator.min.js"></script>
<link href="css/yourHours.css" rel="stylesheet">
<script src="../js/yourHours.js"></script>
</head>

<body>
    
    <form id="yourhours" name="yourhours" class="form-horizontal container">
    <fieldset>
        
    <legend>
        Your Hours  
    </legend>
    
    <!-- Row 1 -->
    <div class="form-group col-md-5">
        <label class="control-label" for="taskinput">Task</label>
        <input class="form-control" id="taskinput" name="taskinput" type="text">
    </div>
    <div class="col-offset col-md-2"></div>
    <div class="form-group col-md-5">
        <label class="control-label" for="paycode">Pay Code</label>
        <select class="form-control" id="paycode">
            <option value="">Select</option>
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
        </select>
    </div>
    <!-- Row 1 -->
    
    <!-- Row 2 -->
    <div class="form-group col-md-5">
            <label class="control-label" for="starttime" >Start Time (24 Hr)</label>
            <input class="form-control" id="starttime" name="starttime" type="time">
    </div>
    <div class="col-offset col-md-2"></div>
    <div class="form-group col-md-5">
            <label class="control-label" for="finishtime">Finish Time (24 Hr)</label>
            <input class="form-control" id="finishtime" name="finishtime" type="time">
            <label class="control-label" for="nextDay">Next Day?</label>
            <input id="nextDay" name="nextDay" type="checkbox">
    </div>
    <!-- Row 2 -->
        
    <!-- Row 3 -->
    <div class="form-group col-md-5">
        <label class="control-label" for="breaktime">Total Breaks Time (Hrs)</label>
        <input class="form-control" type="text" id="breaktime">
    </div>
    <div class="col-offset col-md-2"></div>
    <div class="form-group col-md-5">
            <label class="control-label" for="totalhours">Total Hours</label>
            <input class="form-control" readonly="readonly" id="totalhours" name="totalhours" data-hourcheck="hourcheck">
            <span class="help-block with-errors"></span>
    </div>
    <!-- Row 3 -->
        
    <!-- Row 4 -->
            <div class="form-group container row">
                    <legend style="font-size: 18px;">
                        Expenses
                    </legend>
                <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#newExpense">
                    Create New Expense
                </button>
                <div id="newExpense" class="collapse row container">
                    <form id="expenseForm" class="container form-vertical col-md-6">
                        <fieldset class="col-md-6">
                            <legend style="padding-top: 2%;">
                                New Expense
                            </legend>
                            <div class="form-group container col-md-5">
                                <label class="control-label" for="expenseTitle">Title</label>
                                <input class="form-control" type="text" id="expenseTitle" name="expenseName">
                            </div>
                            <div class="col-md-2"></div>
                            <div class="form-group container col-md-5">
                                <label class="control-label" for="expenseValue">Value (£)</label>
                                <input class="form-control" type="text" id="expenseValue" name="expenseValue">
                            </div>
                            <div class="form-group container col-md-6">
                                <label class="control-label" for="recipt">Recipt?</label>
                                <input type="checkbox" id="recipt" name="recipt">
                            </div>
                            <div class="col-md-10"></div>
                            <div class="form-group container col-md-6">
                                <button id="createExpense" type="button" class="form-control btn btn-primary">
                                    Create
                                </button>
                            </div>
                        </fieldset>
                    </form>
                    <div class="table-responsive col-md-6">
                        <fieldset>
                            <table id="expenseTable" class="table">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Value (£)</th>
                                    <th>Recipt?</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id='expense0'></tr>
                            </tbody>
                        </table>
                        </fieldset>
                    </div>
                </div>
        </div>
    <!-- Row 4 -->
        
    <!-- Row 5 -->
        <div class="form-group container">
            <label class="control-label" for="comments">Comments</label>
            <input type="text" class="form-control input-lg" id="comments" name="comments">
        </div>
    <!-- Row 5 -->

    </fieldset>
    </form>
    
    <script>
        $(document).bind("selectstart dragstart", function(e) {
            e.preventDefault(); 
            return false;
        });
    </script>
</body>

</html>

Javascript

function totalHours(){
var start = document.getElementById("starttime").value;
var end = document.getElementById("finishtime").value;
var breaks = document.getElementById("breaktime").value;


if ($('#nextDay').is(":checked")) {
  var hours = (24 - ((parseTime(start) / 60 )) + (parseTime(end) / 60));

  var out = hours - breaks;
  $('#totalhours').val(out);
  $('#totalhours').trigger('input');
}

else{
  var hours2 = parseTime(end) - parseTime(start);

  var out2 = (hours2 / 60) - breaks;

  $('#totalhours').val(out2);
  $('#totalhours').trigger('input');
}

function parseTime(s) {
  var c = s.split(':');
  return parseInt(c[0]) * 60 + parseInt(c[1]);
}
}

$(document).ready(function() {


$("#breaktime").keyup(function(){
totalHours();
});
var i = 0;
$("#createExpense").click(function(){
  var title = document.getElementById("expenseTitle").value;
  var value = document.getElementById("expenseValue").value;
  var recipt = $('#recipt').is(':checked');
  if(recipt === true){
    recipt = "Yes";
  }
  else{
    recipt = "No"
  }
  $('#expense'+i).html("<td> <div id='replaceTitle"+i+"'></div> </td> <td> <div id='replaceValue"+i+"'></div></td> <td> <div id='replaceRecipt"+i+"'></div> </td>");

  $('#expenseTable').append('<tr id="expense'+(i+1)+'"></tr>');

  document.getElementById("replaceTitle'+i+'").innerHTML = title;
  document.getElementById("replaceValue'+i+'").innerHTML = value;
  document.getElementById("replaceRecipt'+i+'").innerHTML = recipt;

  i++;

});
$("#yourhours").validator({
  custom : {
    hourcheck : function($el) { return Boolean($el.val() >= 1);}
    },
  errors: {
    hourcheck : "Your number of hours must be positive."
    }
  });
});

【问题讨论】：

设置为空字符串
网站要求我输入用户名和密码
使用用户名栈和密码栈（区分大小写）

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

document.getElementById("replaceTitle"+i).innerHTML = title;
document.getElementById("replaceValue"+i).innerHTML = value;
document.getElementById("replaceRecipt"+i).innerHTML = recipt;

在附加增量值之前，右引号必须匹配。

【讨论】：