I'm getting many errors like "Expected 'use strict' at column 4, not column 2." What does this mean?

Question

I'm assuming since it mentions columns that it's off based off of there being a difference in spaces of the open and closed tags. How do I fix these though? It seems like the few I solve, the more pop up. I've tried redoing my code since I started and it worked, however it was just missing the alert(...Popup) in my change() function and didn't have the variable tickbag. I'm just astounded that it could be fine and then just shatter with minimal code additions that "shouldn't" (according to what I know) have any affect on the program as a whole.

Here is my code:

// Travel Calculator JavaScript
// don't forget to validate at https://jslint.com

/*jslint devel: true, browser: true */

// self-executing "global" anonymous function
// it's here to keep variable and function scope
// contained within our script
(function () {

  // use strict enforces more rules
  // rules make us better programmers
  "use strict";

  // === === === === === === === === === === === === ===
  // === === === ===   global variables  === === === ===
  // === === === ===      begin here     === === === ===
  // === === === === === === === === === === === === ===



  var mileage = 100;
  var mpg = 20;
  var ppg = 2.50;
  var payrate = 15;
  var travelers = 2;
  var ticketprice = 250;
  var baggage = 25;
  var vehicletotal = 0;
  var persontotal = 0;
  var airtotal = 0;
  var vehicleperson = 0;
  var output = 0;
  var hotel = 300;
  var tickbag = 0;


  // this is how ouputting the console log works. will miss up code
  // if not here
  console.log("-- travel-calculator.js starting --");

  console.log("-----------------------------\n\n\n");

  // === === === === === === === === === === === === ===
  // === === === ===   global functions  === === === ===
  // === === === ===      begin here     === === === ===
  // === === === === === === === === === === === === ===

  function byID(element) {
    return document.getElementById(element);
  }

  function calculate() {

    // grab the current column1 column and save it!
    mileage = Number(byID("mileage").value);
    mpg = Number(byID("mpg").value);
    ppg = Number(byID("ppg").value);
    travelers = Number(byID("travelers").value);
    payrate = Number(byID("payrate").value);
    ticketprice = Number(byID("ticketprice").value);
    baggage = Number(byID("baggage").value);
    hotel = Number(byID("hotel").value);

    vehicletotal = (mileage / mpg * ppg);
    persontotal = (travelers * (8 * payrate));
    tickbag = (ticketprice + baggage);
    airtotal = (ticketprice + baggage) * travelers;
    vehicleperson = vehicletotal + persontotal + hotel;

    output = "Vehicle Costs: $" + (vehicletotal).toFixed(2) + "\n";
    output += "Traveler Costs: $" + persontotal.toFixed(2) + "\n";
    output += "Air Cost per Person: $" + tickbag.toFixed(2) + "\n";
    output += "Total Cost by Car: $" + vehicleperson.toFixed(2) + "\n";
    output += "Total Cost by Plane: $" + airtotal.toFixed(2) + "\n";


    alert(output);
  }

  function change() {
    var image = byID("testing");
    var carPopup = ("It is cheaper to take a car!");
    var airPopup = ("It is cheaper to take a plane!");

    if (vehicleperson < airtotal) {
      image.src = "images/green_mini_cooper.jpg";
      alert(carPopup);
    } else {
      image.src = "images/airplane.jpg";
      alert(airPopup);
    }
  }

  console.log("-- updated by click --");

  console.log("----------------------\n\n\n");

  console.log("-- updated by \"calculate\" --");

  console.log("-------------------------\n\n\n");

  byID("calculate-button").addEventListener("click", calculate);
  byID("calculate-button").addEventListener("click", change);

}());

Answer 1

jslint wants your indentation to be in sets of 4 spaces rather than 2.

If you want to continue to indent by 2 spaces generally, you can add white: true to the jslint comment at the top of your file. This will ignore the whitespace warnings.

Change: /*jslint devel: true, browser: true */

to: /*jslint devel: true, browser: true, white: true */

You can get help from the jslint site (Look for the section on whitespace): https://www.jslint.com/help.html

And test your code if you like: https://www.jslint.com/