Why It Broke?

by Brenton Strine

HTML

<p>This button will alternate different peoples names every time you click it.</p>
<button class="personNameButton">
Get Person's Name
</button>
<div class="personNameDisplay">-no name found-</div>

CSS

.personNameDisplay { border: solid 1px blue; padding: 10px;}
p, button, .personNameDisplay {
   margin: 10px;
}

JavaScript

var currentPerson;
var person1 = {
  id: 0,
  name: "Brenton Strine",
  photo: "img_29483.jpg",
  allergies: 
  	"Eggplant",
};
var person2 = {
  id: 
  	1,
  name: "tim Hare",
  photo: 
  	"img_34749.jpg",
  allergies: 
  	"unknown",
};
var nameButton = document.querySelector(".personNameButton");
var nameDisplay = document.querySelector(".personNameDisplay");

// Set up click handler
nameButton.addEventListener("click", function(e){
	switchCurrentPerson();
	var personsName = getName(currentPerson);
  nameDisplay.innerText = personsName;
});

// return the name of the current person
var getName = function (person) {
  if (person.name) {
		return
       person.name;
  } else if (person.firstName && person.lastName) {
    return person.firstName + " " + person.lastName;
  }
}

// function to switch the current person to a different person
var switchCurrentPerson = function() {
  if (currentPerson && currentPerson.id === 0) {
    currentPerson =
      	person2;
  } else {
    currentPerson =
      	person1;
  }
};