We Keep Coding

Issues with using negative numbers in a prompt box

Very new to JavaScript, the first programming language I learned was Java. I am trying to make a simple website that displays the shortest distance between an infinite number of points using prompt boxes and a 2D array.
This code works as expected, however when one of the points has a negative number in it, nothing ever displays for an answer, throwing the error:
Uncaught TypeError: Cannot read property '0' of undefined
at run (index.html:54)
at HTMLButtonElement.onclick (index.html:63)
Google Chrome highlights the error at this line:
toRun = "Shortest distance is " + min + " with these points: (" + finalPoints[0][0] + ", " + finalPoints[1][0] + ") and (" + finalPoints[0][1] + ", " + finalPoints[1][1] + ").";
How can I get this program to work with negative numbers as well?
function run() {
var x, y;
var finalPoints = [];
var min = 0;
var toRun;
var temp;
var list = []; //using 2d array to store points
while (true) {
x = prompt("Enter an X-Value: ");
if (x == null || x == "") {
break;
}
y = prompt("Enter a Y-Value: ");
if (y == null || y == "") {
break;
}
list.push([x, y]);
}
if (list.length < 2) {
toRun = "Sorry, you didn't enter enough points for this program to run correctly. Please try again.";
} else if (list.length == 2) {
toRun = "Distance between points (" + list[0][0] + ", " + list[0][1] + ") and (" + list[1][0] + ", " + list[1][1] + ") is " + Math.sqrt(Math.pow((list[0][0] - list[1][0]), 2) + Math.pow((list[0][1] - list[1][1]), 2));
} else {
min = Math.sqrt(Math.pow((list[0][0] - list[1][0]), 2) + Math.pow((list[0][1] - list[1][1]), 2));
for (var i = 0; i < list.length; i++) {
for (var j = 0; j < list.length; j++) {
temp = Math.sqrt(Math.pow((list[i][0] - list[j][0]), 2) + Math.pow((list[i][1] - list[j][1]), 2));
if (temp < min && temp != 0) {
min = temp;
finalPoints.push([list[i][0], list[j][0]]);
finalPoints.push([list[i][1], list[j][1]]);
}
}
}
toRun = "Shortest distance is " + min + " with these points: (" + finalPoints[0][0] + ", " + finalPoints[1][0] + ") and (" + finalPoints[0][1] + ", " + finalPoints[1][1] + ").";
}
document.getElementById("output").innerHTML = toRun;
}
body {
background-color: #0d0d0d;
}
p,
button,
h3 {
color: #FFFFFF;
background-color: #0d0d0d;
}
button {
border: 1px solid #FFFFFF;
}
<h3>Continue entering points. When done, click cancel or don't enter anything.</h3>
<br>
<button onclick="run()" style="size:40%">Click me to start!</button>
<p id=output>(Output will display here).</p>

I am currently stuck on how to display this array

This is the code I currently have. I am having issues displaying the ordinals as I am not sure what for loop to put then in. Can someone please assist?
var bandsString = "";
var newBandString = "";
var bandsListArray = ["Linkin Park", "Atmosphere", "Rage Against The Machine", "Immortal Technique", "System of a Down"];
for (var i = 0; i < bandsListArray.length; i++) {
var currentBand = bandsListArray[i];
bandsString += "<li> My #" + [i + 1] + " band is " + currentBand + "</li>";
}
var bands = i;
if (bands == 0) {
bands = i + "st";;
} else if (bands == 1) {
bands = i + "nd";
} else if (bands == 2) {
bands = i + "rd";
} else if (bands == 3) {
bands = i + "th";
} else if (bands == 4) {
bands = i + "th";
} else {
}
for (var i = 0; i < bandsListArray.length; i++) {
var newBandList = bandsListArray[i];
newBandString += "<li>My # " + [i + 1] + " band is " + currentBand + "</li>";
}
document.write(bandsString);
document.write(newBandString);

I'm not exactly sure what you're trying to do, but does this help? Instead of manually working out how to put the correct ordinal suffix ('st', 'nd', 'rd', etc.) on the numbers, I googled a function.
The ordinal_suffix_of function works like this:
This first part is the start of the function. Hopefully this is self-explanatory. We're creating a function that accepts one parameter, that will be named i inside the function.
function ordinal_suffix_of(i) {
This next part defines j and k. You can declare multiple variables while only typing var once by using commas, as this code does:
var j = i % 10,
k = i % 100;
This would do exactly the same thing:
var j = i % 10;
var k = i % 100;
The percent sign (%) is called "modulus" and is a mathematical operator. What it does is divide the left operand by the right operand and returns the remainder. So in the case of j, it's being assigned remainder of dividing i by 10. If i was 14, for example, j would be 4. If i was 179, j would be 9. The same thing happens for k except that it's divided by 100 instead of 10.
What it's effectively doing is extracting the last 1 digit (for j) and the last 2 digits (for k) and then just checking (in the if statements) what ordinal suffixes they should have.
The reason for k is that you always want numbers ending in 1, 2, or 3 to have the suffixes st, nd , and rd except when the number ends in 11, 12, or 13, in which case it should get the suffix th. So for example, 112 should be 112th, and 313513 should be 313513th. k handles this by making it so that if the number ends in 11, 12, or 13 we only add th. Note that 11 % 100 will result in 11, so this works for 11, 12, and 13 as well.
var bandsString = "";
var newBandString = "";
var bandsListArray = ["Linkin Park", "Atmosphere", "Rage Against The Machine", "Immortal Technique", "System of a Down"];
for (var i = 0; i < bandsListArray.length; i++) {
var currentBand = bandsListArray[i];
bandsString += "<li> My #" + (i + 1) + " band is " + currentBand + "</li>";
}
for (var i = 0; i < bandsListArray.length; i++) {
var newBandList = bandsListArray[i];
newBandString += "<li>My " + ordinal_suffix_of(i + 1) + " band is " + newBandList + "</li>";
}
function ordinal_suffix_of(i) {
var j = i % 10,
k = i % 100;
if (j == 1 && k != 11) {
return i + "st";
}
if (j == 2 && k != 12) {
return i + "nd";
}
if (j == 3 && k != 13) {
return i + "rd";
}
return i + "th";
}
document.write(bandsString);
document.write(newBandString);

Try this, just make the code more simple
var bandsString = "";
var newBandString = "";
var bandsListArray = ["Linkin Park", "Atmosphere", "Rage Against The Machine", "Immortal Technique", "System of a Down"];
for (var i = 0; i < bandsListArray.length; i++) {
var currentBand = bandsListArray[i];
bandsString += "<li> My #" + [i + 1] + " band is " + currentBand + "</li>";
newBandString += "<li> My #" + numeric(i+1) + " band is " + currentBand + "</li>";
}
function numeric(i){
var bands = i+"th";
if (i == 1) {
bands = i + "st";;
} else if (i == 2) {
bands = i + "nd";
} else if (i == 3) {
bands = i + "rd";
}
return bands;
}
document.write(bandsString);
document.write(newBandString);

If this is what you are trying to achieve is:
My 2nd band is Atmosphere
Then this how you might achieve it
var bandsString = "";
var newBandString = "";
var bandsListArray = ["Linkin Park", "Atmosphere", "Rage Against The Machine", "Immortal Technique", "System of a Down"];
for (var i = 0; i < bandsListArray.length; i++) {
var currentBand = bandsListArray[i];
bandsString += "<li> My #" + (i + 1) + " band is " + currentBand + "</li>";
newBandString += "<li>My " + numberSuffix(i + 1) + " band is " + currentBand + "</li>";
}
function numberSuffix(number){
if(number % 10==1) return number+'st';
if(number % 10==2) return number+'nd';
if(number % 10==3) return number+'rd';
return number+'th';
}
document.write(bandsString);
document.write(newBandString);

Trying to make loop exit , but it currently just continues looping for 100 times

I am trying to make so when the looping of 100 hits on the character exits the loop when the life dice rolls to 0. How it currently is is all gets looped 100 times. I am not quite sure how I need to go about solving this, any tips would be helpful. My code is below.
function addChar(fname, lname, speed, agility, wep, outfit, mood) {
this.fname = fname;
this.lname = lname;
this.speed = speed;
this.agility = agility;
this.wep = wep;
this.outfit = outfit;
this.mood = mood;
this.special = function(specialMove) {
specialMove();
}
this.jumpKick = function() {
var jmpkckTimes = Math.floor(Math.random() * (100 - 33 + 1)) + 33;
document.write("He jumpkicks " + jmpkckTimes + " times. ");
if (jmpkckTimes > 70) {
document.write("He enters rage mode! ");
} else {
document.write("He does not have enough kicks for rage mode. ");
}
}
this.hits = function() {
var allHits = Math.floor(Math.random() * (100 - 33 + 1)) + 33;
document.write(" He gets attacked for " + allHits + " HP.");
}
this.lifes = function() {
var life = Math.floor(Math.random() * (3 - 0 + 1)) + 0;
if (life > 0) {
document.write(" The life dice rolls a " + life + ". You have survived! For now...");
} else {
document.write(" The life dice rolls a " + life + ". You have died!");
}
}
}
var myChar = new addChar('Johhny', 'Kicker', 10, 7, 'Ancient Greataxe', 'Barrows', 'angry');
document.write(myChar.fname + " " + myChar.lname + "'s speed is " + myChar.speed + "<br>");
document.write(myChar.fname + " " + myChar.lname + "'s agility is " + myChar.agility + "<br>");
document.write(myChar.fname + " " + myChar.lname + "'s weapon of choice is: " + myChar.wep + "<br>");
document.write(myChar.fname + " " + myChar.lname + " feels " + myChar.mood + "<br>");
document.write(myChar.fname + " " + myChar.lname + " attempts his special: ");
myChar.special(myChar.jumpKick)
for (i = 1; i < 101; i++) {
myChar.hits(myChar.allHits)
myChar.lifes(myChar.lifes)
}
function myOutfit() {
document.getElementById("demo").innerHTML = ("He is wearing " + myChar.outfit)
}
var start = Date.now();
var response = prompt("Do you think my character has what it takes?", "");
var end = Date.now();
var elapsed = (end - start) / 1000;
console.log("You took " + elapsed + " seconds" + " to type: " + response);

You need to have a way to communicate outside of the object, of what is happening inside the object.
For example, when something happens in a function, like lifes() or hits(), you should assign a value to a variable on the object to retain state. That way you can access the state from the for loop.
Example:
this.isAlive = true; // starting condition
this.lifes = function() {
var life = Math.floor(Math.random() * (3 - 0 + 1)) + 0;
this.isAlive = (life > 0);
if (this.alive) {
document.write('you survived');
} else {
document.write('you died');
}
Now in your for loop, you can access isAlive:
// loop until 100 attempts or you die, which ever comes first
for (i = 1; i < 101 && myChar.isAlive; i++) {
myChar.hits(myChar.allHits)
myChar.lifes(myChar.lifes)
}

well in general you can break out of foor loops aswell as prevent further execution of a foor loop and continue the next iteration:
for (var i = 0; i < 10; i++) {
if (i == 4) continue;
if (i == 8) break;
console.log(i);
}
this will basically print: 0, 1, 2, 3, 5, 6, 7
(as you can see it kind of skipped 4)
(it will also work in while / do while loops)
so in your case you could check if the return value of one of your functions is true or false or do some other kind of conditional checking in order to break out of the loop.
or similar to how Rob Brander wrote in his answer:
var maxTurns = 100;
var turns = 0;
while (myChar.isAlive && ++turns <= maxTurns) {
myChar.hits();
myChar.lifes();
}
console.log("character is: " + myChar.isAlive ? "alive" : "dead");
console.log("after: " + turns + " turns.");

.append not working on click

Simple button that should be creating new <p> elements when its clicked but it isn't working and I'm not sure why as I've compared it to other code of mine.
Demo
var battle = function() {
while(monsterHP > 0){
var playerDam = Math.floor(Math.random() * ((playerAtk - monsterAtk) + 2);
$('#battle').append("<p>You have hit the monster for " + playerDam + " damage. The monster has " + (monsterHP - playerDam) + "HP left</p>");
monsterHP -= playerDam;
if(monsterHP <= 0) {
$('#battle').append("<p>You have defeated the monster</p>");
}
}
}
$('#battleButton').click(function() {
battle();
}

You have many syntax errors in your code. If you correct them (as below), then it works fine. When you write a JQuery append, you need to put a ')' after your argument. Likewise, functions need to have a '}' after them.
var playerAtk = 5;
var playerDef = 5;
var playerHP = 10;
var monsterAtk = 4;
var monsterDef = 4;
var monsterHP = 8;
var battle = function() {
while(monsterHP > 0){
var playerDam = Math.floor(Math.random() * ((playerAtk - monsterAtk) + 2));
$('#battle').append("<p>You have hit the monster for " + playerDam + " damage. The monster has " + (monsterHP - playerDam) + "HP left</p>");
monsterHP -= playerDam;
if(monsterHP <= 0) {
$('#battle').append("<p>You have defeated the monster</p>");
}
}
}
$('#battleButton').click(function() {
battle();
});

getting statistics from a textarea

Getting text statistics from a textarea.
which would be better?
this one?
function getStats() {
var text = textarea.value,
stats = {};
stats.chars = text.length;
stats.words = text.split(/\S+/g).length - 1;
stats.lines = text.replace(/[^\n]/g, "").length + 1;
return stats.lines + " lines, " + stats.words + " words, " + stats.chars + " chars";
}
or this one?
function getStats() {
var text = textarea.value,
chars = text.length,
words = text.split(/\S+/g).length - 1,
lines = text.replace(/[^\n]/g, "").length + 1;
return lines + " lines, " + words + " words, " + chars + " chars";
}

The second one.
Not for any performance reasons, but you are just declaring a Javascript object when there is no need for one.
Creating an object to store your variables would only make sense if you were using it like:
function getStats() {
var text = textarea.value,
stats = {};
stats.chars = text.length;
stats.words = text.split(/\S+/g).length - 1;
stats.lines = text.replace(/[^\n]/g, "").length + 1;
return stats;
}