javascript - Uncaught rangeError : Invalid string length

so i have just started to learn javascript, literally had 2 classes on it. So my knowledge is very very limited. But I am trying to make an appointment application and i keep receiving a Uncaught rangeError :Invalid string length error, and i have no idea why or how to fix it. Basically I have been given some code to copy without much explanation to it, so if anyone can help me with this error it would be greatly appreciated. The code where the error is appearing is below and i believe it is the line table += appt.tableRow(); which is causing the issue. There is obviously more to this code, but not sure if it needs to be given, as the issue is in the showTable function

Edit : I just added the whole javascript code to make it easier

var Appointment = function(subject, description,date, time) {
this.subject = subject;
this.description = description;
this.datetime = new Date(date + " " + time);
thispleted = false;

};

Appointment.prototype.isDue = function(){
var now = new Date();
if(this.datetime > now){
    return false;
} else {
    return true;
}
};

Appointment.prototype.whenDue = function(){
return this.datetime -  new Date();
}

Appointment.prototype.toString = function(){
var s = this.subject +'\n'+
    this.datetime.toString() + '\n';
if(thispleted){
    s +="Not Completed\n\n";
}
return s
};

Appointment.prototype.howManyDaysTill = function() {
var ms = (this.datetime -  new Date()) / 24/60/60/1000
return ms;
};

Appointment.prototype.howManyHoursTill = function () {
var hours = (this.datetime - new Date()) /60/60/1000
return hours;
};

Appointment.prototype.getDate = function() {
return this.datetime.toDateString();
};

Appointment.prototype.getTime = function (){
return (this.datetime.getHours()) + ":" + (this.datetime.getMinutes());
};

Appointment.prototype.tableRow = function(){
var tr = "<tr><td>" + this.getDate() + "</td><td>" +
    this.getTime() + "</td><td>" + this.subject +
    "</td></tr>";
return tr;
};

var appointments = [];

window.onload = function(){
var newButton = document.getElementById("new");
newButton.onclick = function () {
    var subj = prompt("Enter a subject title for the appointment");
    var desc = prompt("Enter a description for the appointment");
    var date = prompt("Enter the appointment date in the format (e.g) 'Sep 
25, 2012");
    var time = prompt("Enter the appointment time in the format hh:mm");
    var a = new Appointment((subj,desc,date,time));
    appointments.push(a);
    return showTable();
};

var showTable = function() {
var tableDiv = document.getElementById("table"),
    table = "<table border='1'>" +
        "<thead><th>Date</th><th>Time</th><th>Subject</th><th>Completed</th> 
</thead>";
for (var i = 0, j = appointments.length; i < j; j++) {
    var appt = appointments[i];
    table += appt.tableRow();
}
table += "</table>";
tableDiv.innerHTML = table;
};


}

HTML5

 <!DOCTYPE html>
<html lang="en" xmlns="">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="appointments.js"></script>
<title>Appointments</title>
</head>
<body>
<button id="new">New Appointment</button>
<div id ="table"></div>
<header>
    <h1>
        Appointments Book
    </h1>
    <p> Enter appointment details and press OK to add, Cancel to revert.</p>
</header>
<table>
<tr>
    <td>Subject : </td> <td>input type="text" size="40" id="subject"</td>
</tr>
<tr>
    <td>Description</td>
    <td>
        <textarea rows = "5" cols=""50" maxlength="200" id="description">
</textarea>
    </td>
</tr>
<tr> <td>Due Date:</td><td><input type ="date" id="duedate"/></td>
</tr>
</table>
<button id = "OK">OK </button><button id = "cancel">Cancel</button>
<hr/>
</body>
</html>

Edit : I just added the whole javascript code to make it easier

var Appointment = function(subject, description,date, time) {
this.subject = subject;
this.description = description;
this.datetime = new Date(date + " " + time);
this.pleted = false;

};

Appointment.prototype.isDue = function(){
var now = new Date();
if(this.datetime > now){
    return false;
} else {
    return true;
}
};

Appointment.prototype.whenDue = function(){
return this.datetime -  new Date();
}

Appointment.prototype.toString = function(){
var s = this.subject +'\n'+
    this.datetime.toString() + '\n';
if(this.pleted){
    s +="Not Completed\n\n";
}
return s
};

Appointment.prototype.howManyDaysTill = function() {
var ms = (this.datetime -  new Date()) / 24/60/60/1000
return ms;
};

Appointment.prototype.howManyHoursTill = function () {
var hours = (this.datetime - new Date()) /60/60/1000
return hours;
};

Appointment.prototype.getDate = function() {
return this.datetime.toDateString();
};

Appointment.prototype.getTime = function (){
return (this.datetime.getHours()) + ":" + (this.datetime.getMinutes());
};

Appointment.prototype.tableRow = function(){
var tr = "<tr><td>" + this.getDate() + "</td><td>" +
    this.getTime() + "</td><td>" + this.subject +
    "</td></tr>";
return tr;
};

var appointments = [];

window.onload = function(){
var newButton = document.getElementById("new");
newButton.onclick = function () {
    var subj = prompt("Enter a subject title for the appointment");
    var desc = prompt("Enter a description for the appointment");
    var date = prompt("Enter the appointment date in the format (e.g) 'Sep 
25, 2012");
    var time = prompt("Enter the appointment time in the format hh:mm");
    var a = new Appointment((subj,desc,date,time));
    appointments.push(a);
    return showTable();
};

var showTable = function() {
var tableDiv = document.getElementById("table"),
    table = "<table border='1'>" +
        "<thead><th>Date</th><th>Time</th><th>Subject</th><th>Completed</th> 
</thead>";
for (var i = 0, j = appointments.length; i < j; j++) {
    var appt = appointments[i];
    table += appt.tableRow();
}
table += "</table>";
tableDiv.innerHTML = table;
};


}

HTML5

 <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3/1999/html">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="appointments.js"></script>
<title>Appointments</title>
</head>
<body>
<button id="new">New Appointment</button>
<div id ="table"></div>
<header>
    <h1>
        Appointments Book
    </h1>
    <p> Enter appointment details and press OK to add, Cancel to revert.</p>
</header>
<table>
<tr>
    <td>Subject : </td> <td>input type="text" size="40" id="subject"</td>
</tr>
<tr>
    <td>Description</td>
    <td>
        <textarea rows = "5" cols=""50" maxlength="200" id="description">
</textarea>
    </td>
</tr>
<tr> <td>Due Date:</td><td><input type ="date" id="duedate"/></td>
</tr>
</table>
<button id = "OK">OK </button><button id = "cancel">Cancel</button>
<hr/>
</body>
</html>

Share Improve this question edited Oct 7, 2017 at 1:29 asked Oct 7, 2017 at 0:43 user8700773

You're using appointments.length but I don't see your appointments variable elsewhere – Gerardo Commented Oct 7, 2017 at 0:58

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

The for loop must increment on i and not on j. The current one is causing a infinite looping and hence the following line is creating a string that is too big to handle by the JS engine and hence the error

table += appt.tableRow();

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Uncaught rangeError : Invalid string length - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)