TernaryConditional

Advanced Implementation

by David McClelland

HTML

<div>
  <div>
    <button onclick="toggleArthur()">
      Arthur?
    </button>
    <div>
      <input type='text' id="arthurStatus" />
    </div>
  </div>
  <button onclick="toggleKing()">
    King Arthur?
  </button>
  <div>
    <input type='text' id="kingStatus" />
  </div>
  <button onclick="toggleArcher()">
    Archer?
  </button>
  <div>
    <input type='text' id="archerStatus" />
  </div>
</div>

<div id="output">
  <text type="text" id="textOut"></text>
</div>

JavaScript

var isArthur = true,
  isKing = true,
  isArcher = true,
  weapon,
  helmet,
  arthurStatus,
  textOut;

function startUp() {
  arthurStatus = document.getElementById("arthurStatus");
  textOut = document.getElementById("textOut");
}

function toggleArthur() {
  startUp();
  isArthur = !isArthur;
  arthurStatus.value = isArthur;
  console.log("isArthur: " + isArthur);
  buildLegend();
}

function toggleKing() {
  isKing = !isKing;
  kingStatus.value = isKing;
  console.log("isKing: " + isKing);
  buildLegend();
}

function toggleArcher() {
  isArcher = !isArcher;
  archerStatus.value = isArcher;
  console.log("isArcher: " + isArcher);
  buildLegend();
}

function buildLegend() {

  isArthur && isKing ? (weapon = "Excalibur", helmet = "Goosewhite") :
    isArcher ? (weapon = "Longbow", helmet = "mailHelm") : (weapon = "Longsword", helmet = "Iron Helm");
  console.log("current weapon: " + weapon + "\ncurrent helmet: " + helmet);
  textOut.innerText = "current weapon: " + weapon + "\ncurrent helmet: " + helmet;
}