0
フォームから入力したユーザーからテーブルに新しいデータ行を作成しようとしています。彼らが新しいデータセットのために複数の行を作成するとき、最初のものを上書きしないように新しい行IDを新しいdiv IDに追加する必要があります。このフォームは、[新しい経費の作成]ボタンをクリックすると表示されます。nullの 'innerHTML'のプロパティを設定できません
しかし、私はこれを行うコードがあると信じて、私はタイトルにエラーを取得します。私はボタンが押されたときに検出するためにJqueryを使用しています。エラーは、私のjavascriptの56行目で発生しているようです。
サイトはこちらhttp://54.171.230.22/
大文字と小文字を区別ユーザー名でアクセスすることができますスタック
大文字と小文字を区別パスワード：次に、スタック
"あなたの時間" のページを。
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."
}
});
});
空の文字列に設定する – JoshRagem
サイトでユーザー名とパスワードを要求します –
ユーザー名スタックとパスワードスタックを使用します（大文字と小文字は区別されます） – Teale