HTML, CSS, JS Unexpected end of input error

Question

I am working on a card game but I am getting this error, unexpected end of input. I know nothing about this error so any help would be appreciated. The codepen is also not displaying anything and it is giving the error as well as the compiler in StackOverflow. Any help would be greatly appreciated.

var turn = true;

var enemyCards = document.getElementById('enemy-cards');

var friendlyCards = document.getElementById('friendly-cards');

var friendlyHealth = document.getElementById('friendly-health-value');

var enemyHealth = document.getElementById('enemy-health-value');

var goodHealth=20;
var badHealth=20;

var enemyCardArray = [[2, 3], [2, 4]];

var friendlyCardArray = [[4, 3], [3,2]];

function initialSetup() {
  for (var i=0; i < enemyCardArray.length; i++) {
    var card = enemyCardArray[i]
    var damage = card[0];
    var health = card[1];
    enemyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>"
  }

  for (var i=0; i < friendlyCardArray.length; i++) {
    var card = friendlyCardArray[i]
    var damage = card[0];
    var health = card[1];
    friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>"
  }
}

function setup() {
       enemyCards.innerHTML = "";//<--Set it to "" here, not in for loop
       friendlyCards.innerHTML = "";//<--Set it to "" here, not in for loop
       for (var i = 0; i < enemyCardArray.length; i++) {
            var card = enemyCardArray[i]
            var damage = card[0];
            var health = card[1];
            //enemyCards.innerHTML = "";
            enemyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + "</h1><h1 class='health'>" + health + "</h1></div>";
                }

       for (var i = 0; i < friendlyCardArray.length; i++) {
              var card = friendlyCardArray[i]
              var damage = card[0];
              var health = card[1];
              //friendlyCards.innerHTML = "";
              friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + "</h1><h1 class='health'>" + health + "</h1></div>";
                }
            }

function battle() {
  if (turn === true){
    for (var i = 0; i<friendlyCardArray.length; i++) {
      if (friendlyCardArray.length == enemyCardArray.length){
        enemyCardArray[i][1] -= friendlyCardArray[i][0];
        if (enemyCardArray[i][1] < 1){
          enemyCardArray.splice(i, 1);
        }
      }if(friendlyCardArray.length>enemyCardArray.length){
        for (var i=0; i<enemyCardArray.length; i++){
          enemyCardArray[i][1] -= friendlyCardArray[i][0];
        if (enemyCardArray[i][1] < 1){
          enemyCardArray.splice(i, 1);
        }
       }
        for (var i=enemyCardArray.length+1; i>enemyCardArray.length; i++){
          badHealth-=friendlyCardArray[i][0];
          if (i == frienlyCardArray.length+1){
            break;
          }
        }
        
      }if(friendlyCardArray.length<enemyCardArray.length){
        for (var i=0; i<friendlyCardArray.length; i++){
          enemyCardArray[i][1] -= friendlyCardArray[i][0];
        if (enemyCardArray[i][1] < 1){
          enemyCardArray.splice(i, 1);
      }
    }
        
  }if (turn === false){
    
  }
}
initialSetup();
battle();
setup();

body {
  margin: 0;
  font-family: sans-serif;
  position: relative;
}

#enemy-cards{
  background-color: #873a00;
  width: 100%;
  height: 270px;
}

#friendly-cards{
  background-color: #873a00;
  width: 100%;
  height: 270px;
  position: fixed;
  bottom: 0;
}

.card {
  width: 150px;
  height: 250px;
  background-color: #afafaf;
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  position: relative;
  float:left;
}

.damage {
  text-align: left;
  position: absolute;
  bottom:0;
  left: 20px;
}

.health {
  text-align: right;
  position: absolute;
  bottom:0;
  right: 20px;
}

#friendly-health{
  float:left;
  width: 50%;
  background-color: lightgreen;
  height: 200px;
}
#friendly-health-value{
  position: fixed;
  left: 25%;
  vertical-align: middle;
  color: white;
}

#enemy-health-value{
  position: fixed;
  left: 75%;
  vertical-align: middle;
  color: white;
}

#enemy-health{
  float:left;
  width: 50%;
  background-color: #f73f27;
  height: 200px;
}

<div id="game">
  <div id="enemy-cards">
  </div>
  <div id="health">
    <div id="friendly-health">
      <h1 id="friendly-health-value">20</h1>
    </div>
    <div id="enemy-health">
      <h1 id="enemy-health-value">20</h1>
    </div>
  </div>
  <div id="friendly-cards">
  </div>
</div>

Nope he is missing 2 } in the end of his last function. :) — Huelfe
– Huelfe, Commented May 8, 2017 at 10:14
battle() IS the last function, isn't it? Not necessarily in the end, depends on how all those for loops and if statements are supposed to be nested :) — Lennholm
– Lennholm, Commented May 8, 2017 at 10:19
if you properly indent your code, it will be much easier, for you and everybody looking at yor code, to find the misplaced braces — vals
– vals, Commented May 8, 2017 at 10:52

Hash · Accepted Answer · 2017-05-08 10:21:02Z

1

Use JSHint & JSLint It Will Show Your Mistakes & Warnings. Hope It Helps You.

edited May 8, 2017 at 10:21

answered May 8, 2017 at 10:14

Hash

8,1089 gold badges38 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hash · Accepted Answer · 2017-05-08 10:27:01Z

Fixed Your Js

var turn = true;

var enemyCards = document.getElementById('enemy-cards');

var friendlyCards = document.getElementById('friendly-cards');

var friendlyHealth = document.getElementById('friendly-health-value');

var enemyHealth = document.getElementById('enemy-health-value');

var goodHealth = 20;
var badHealth = 20;

var enemyCardArray = [
    [2, 3],
    [2, 4]
];

var friendlyCardArray = [
    [4, 3],
    [3, 2]
];

function initialSetup() {
    for (var i = 0; i < enemyCardArray.length; i++) {
        var card = enemyCardArray[i];
        var damage = card[0];
        var health = card[1];
        enemyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + " <
            /h1><h1 class='health'>"+health+"</h
        1 > < /div>"
    }

    for (var i = 0; i < friendlyCardArray.length; i++) {
        var card = friendlyCardArray[i];
        var damage = card[0];
        var health = card[1];
        friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + " <
            /h1><h1 class='health'>"+health+"</h
        1 > < /div>"
    }
}

function setup() {
    enemyCards.innerHTML = ""; //<--Set it to "" here, not in for loop
    friendlyCards.innerHTML = ""; //<--Set it to "" here, not in for loop
    for (var i = 0; i < enemyCardArray.length; i++) {
        var card = enemyCardArray[i];
        var damage = card[0];
        var health = card[1];
        //enemyCards.innerHTML = "";
        enemyCards.innerHTML += "<div class='card'><h1 class='damage'>" +
            damage + "</h1><h1 class='health'>" + health + "</h1></div>";
    }

    for (var i = 0; i < friendlyCardArray.length; i++) {
        var card = friendlyCardArray[i];
        var damage = card[0];
        var health = card[1];
        //friendlyCards.innerHTML = "";
        friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>" +
            damage + "</h1><h1 class='health'>" + health + "</h1></div>";
    }
}

function battle() {
    if (turn === true) {
        for (var i = 0; i < friendlyCardArray.length; i++) {
            if (friendlyCardArray.length == enemyCardArray.length) {
                enemyCardArray[i][1] -= friendlyCardArray[i][0];
                if (enemyCardArray[i][1] < 1) {
                    enemyCardArray.splice(i, 1);
                }
            }
            if (friendlyCardArray.length > enemyCardArray.length) {
                for (var i = 0; i < enemyCardArray.length; i++) {
                    enemyCardArray[i][1] -= friendlyCardArray[i][0];
                    if (enemyCardArray[i][1] < 1) {
                        enemyCardArray.splice(i, 1);
                    }
                }
                for (var i = enemyCardArray.length + 1; i > enemyCardArray.length; i++) {
                    badHealth -= friendlyCardArray[i][0];
                    if (i == frienlyCardArray.length + 1) {
                        break;
                    }
                }

            }
            if (friendlyCardArray.length < enemyCardArray.length) {
                for (var i = 0; i < friendlyCardArray.length; i++) {
                    enemyCardArray[i][1] -= friendlyCardArray[i][0];
                    if (enemyCardArray[i][1] < 1) {
                        enemyCardArray.splice(i, 1);
                    }
                }

            }
            if (turn === false) {

            }
        }
    }
}
initialSetup();
battle();
setup();

Collectives™ on Stack Overflow

HTML, CSS, JS Unexpected end of input error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related