Basic Javascript: Some control structures

• We will count from ? to ?
  Count From: Count To:

      <Li> We will count from <span id="num1">? </span> to <span id="num2">?</span>
      <div id="Output">
  
      </div>
  
      <label for="num1Input">Count From: </label>
      <input type="number" id="number1Input" value=0>
      <label for="num2Input">Count To: </label>
      <input type="number" id="number2Input" value=0>
      <input type="button" value = "Do Count" id="Button1" onclick="DoCount()"/>
  
  <script>
  "use strict"
  
  function FillSpan (value, id) {
     let element = document.getElementById(id)
     element.innerHTML = value
  }
  
  function FillSpans(valueA, valueB){
      FillSpan(valueA, "num1")
      FillSpan(valueB, "num2")
  }
  
  function FindDirection(a,b) {
      if (a < b) {
         return "up"
      } else if (a > b) {
         return "down"
      } else {
         return "same"
      }
  }
  
  function LogSame(value) {
     let workArea = document.getElementById("Output")
     workArea.innerHTML = "<h3> Count:</h3>"
     workArea.innerHTML += "The numbers are the same the count is "
     workArea.innerHTML += "<p>  " + value.toString()
  
  }
  
  function ExecuteCount(start, stop, increment) {
     let workArea = document.getElementById("Output")
  
     let output
     
     output = "<h3> Count:</h3>"
  
     console.log(increment)
     for (let i = start; i != stop; i += increment) {
         console.log(start, stop, i, increment)
         output += i.toString() + "<br>"
     }
     output += stop.toString() + "<br>"
  
     workArea.innerHTML = output
  }
  
  
  function DoCount() {
      let number1  = parseInt(document.getElementById("number1Input").value)
      let number2  = parseInt(document.getElementById("number2Input").value)
  
      FillSpans(number1, number2)
  
      let countDir = FindDirection(number1, number2)
  
      switch (countDir) {
         case "up":
             ExecuteCount(number1, number2, 1)
             break
         case "down":
             ExecuteCount(number1, number2, -1)
             break
         default:
             LogSame(number1)
      }
  
  }
  </script>
  

• The above contains two new elements
  • A span which is for in line control.
  • I will us this to fill in values inside of a line of text.
  • A div which is for block control.
  • I will use this to hold a "paragraph" of the output.
• Let's start with FindDirection
  • An if-else if- else statement
  • Just like C++
• How about DoCount
  • A switch/case statement
  • breaks are needed
  • But we can switch on anything.
  • Default works as well.
• Several functions change the innerHTML attribute of an element.
  • In the console, select Elements.
  • You can see the values associated with the element that you select.
  • You can change many of these in javascript.
• You should look this code over carefully.
• It might be useful for your homework.