Beginning JS: Input

• The HTML input type number
  • A good reference
  • This lets you get a number from the user.

  <li> <label for="input0"> Enter a number:</label>
  <input type="number" id="input0" /> 

• Enter a number:
• There are lots of controls over what you can do here.
  • We will use min, max, value
  • You should feel free to use whatever you wish.

  <li> <label for="input1">Enter a number:</label>
  <input type="number" min="0" max="20" value="3" id="input1"/> 

• Enter a number:
• We can get data the same as before
  • With an event
    • In this case it is onchange

    • <li> <label for="input3">Enter a number:</label>
      <input type="number" value="0"  onchange="ChangeScript()" id="input3"/>
      <script>
      function ChangeScript() {
           box = document.getElementById("input3")
           value = parseInt(input3.value)
           console.log("We got a ", value)
      }
      </script> 

    • Enter a number:
  • For multiple types of input I will
    • Build the input boxes for each piece of data
    • Then build a button with a callback to a function that queries all of the data.
    • We will see this in the next notes so ...
• There are many other input methods
  • We will see these later.
  • But I encourage you to explore and select the one that is right for your application.