Basic Javascript: Making a button work

• We need to learn the basics of javascript flow control.
• But let's tie in a user interface.
• The html input element.

  • <script>
    "use strict"
    
    function Button1Call() { 
        console.log("Button 1 was pressed")
    }
           
    <input type="button" value = "I am A button" id="Button1" onclick="Button1Call()"/>
           

  • There are many types, but for now we are interested in "button".
  • We want the label to read "I am a button" so we set the value
    • Later we will learn how to get this value.
  • When the button is pressed, we want it to call function Button1Call so we set the onclick value to be this.
  • We will pick up more as we go along.
  • Note, here the html document doesn't really care that the button has a function that is not yet declared.
  • I did declare a function, mostly as you would expect
    • Keyword function is required.
    • We will add parameters later.
• A second way is to have javascript request the click

  •         <li> <input type="button" value = "No Presses" id="Button2"/>
    <script>
    let button = document.getElementById("Button2")
    
    button.addEventListener("click", ButtonPress2)
    
    let pressCount = 0
    
    function  ButtonPress2() {
       console.log("Button Press 2 was called")
       pressCount++
       button.value = pressCount.toString()+ " presses"
    }
            

  • Note in this case, the button had to be declared BEFORE the script, as the script references the button.
  • We can change a variable to a string with the toString() method.
  • In javascript most things are first class objects and will have this method.
  • We can change values of the document elements by setting them. (ie button.value
  • Right click and inspect the button
    • Note it has a value attribute.
  • Note that here we are using a "global" variable, pressCount
    • because we really don't have a way to pass it into the function when we work this way.
    • This is not best, but it is what we have.
    • Try to keep these things to a minimal.
• I would probably do it this way

  • <script src="button3.js" defer > </script>
    <input type="button" value = "Anoter One?" id="Button3"/> 

  • The function (and most js code) is in a file.
  • The file is loaded with the <script> tag.
    • Note that the closing </script> is needed.
  • The file button3.js