To and Fro

?

“Stage Right” HTML

<h1 id="stageRight">?</h1>

Buttons HTML

<button onclick="hideToAndFro(); toAndFro.stop();">Stop</button>
<button onclick="hideToAndFro(); toAndFro.go();">Go</button>
<button onclick="toAndFro.showThis(); showToAndFro();">this</button>

JavaScript

<script>

function showToAndFro() {
  document.getElementById("toAndFro").setAttribute("style", "display:inline");
}

function hideToAndFro() {
  document.getElementById("toAndFro").setAttribute("style", "display:none");
}

function Oscillation(string1, string2, frequencyInMs) {

  var keepGoing;
  var showString1 = true;
  var whereToShow = document.getElementById("stageRight");

  function show(someString) {
    whereToShow.innerHTML = someString;
  }

  function showOneStringThenTheOther() {
    show(showString1 ? string1 : string2);
    setTimeout(showTheOther, frequencyInMs);
  }

  function showTheOther() {
    showString1 = !showString1;
    if (keepGoing) {
      showOneStringThenTheOther();
    }
  }

  this.go = function() {
    if (!keepGoing) {
      keepGoing=true;
      showOneStringThenTheOther();
    }
  }

  this.stop = function() {
    keepGoing = false;
  }

  this.showThis = function() {
    show(this.toString());
  }

  this.toString = function() {
    return "an Oscillation that goes " + string1 + " and " + string2;
  }
}

var toAndFro = new Oscillation("Back", "Forth", 1000);

</script>

Copy of HTML and JavaScript for display purposes only

<pre id="toAndFro" style="display:none">


&lt;h1 id=&quot;stageRight&quot;&gt;?&lt;/h1&gt;
&lt;button onclick=&quot;hideToAndFro(); toAndFro.stop();&quot;&gt;Stop&lt;/button&gt;
&lt;button onclick=&quot;hideToAndFro(); toAndFro.go();&quot;&gt;Go&lt;/button&gt;
&lt;button onclick=&quot;toAndFro.showThis(); showToAndFro();&quot;&gt;this&lt;/button&gt;

&lt;script&gt;

function showToAndFro() {
  document.getElementById("toAndFro").setAttribute("style", "display:inline");
}

function hideToAndFro() {
  document.getElementById("toAndFro").setAttribute("style", "display:none");
}

function Oscillation(string1, string2, frequencyInMs) {

  var keepGoing;
  var showString1 = true;
  var whereToShow = document.getElementById("stageRight");

  function show(someString) {
    whereToShow.innerHTML = someString;
  }

  function showOneStringThenTheOther() {
    show(showString1 ? string1 : string2);
    setTimeout(showTheOther, frequencyInMs);
  }

  function showTheOther() {
    showString1 = !showString1;
    if (keepGoing) {
      showOneStringThenTheOther();
    }
  }

  this.go = function() {
    if (!keepGoing) {
      keepGoing=true;
      showOneStringThenTheOther();
    }
  }

  this.stop = function() {
    keepGoing = false;
  }

  this.showThis = function() {
    show(this.toString());
  }

  this.toString = function() {
    return "an Oscillation that goes " + string1 + " and " + string2;
  }
}

var toAndFro = new Oscillation("Back", "Forth", 1000);

&lt;/script&gt;
</pre>