Javascript DOM <Progress> element

Description

Javascript DOM <Progress> element

View in separate window 

  <!DOCTYPE html> 
  <html lang="en"> 
  <body> 
      <form id="form1" name="form1"> 
          <p> 
              <label for="driverName">Driver Name: </label> 
              <input type="text" id="driverName" name="driverName" /> 
          </p> 
          <p> 
              <label for="speed">Speed (Miles/Hour): </label> 
              <input type="number" id="speed" name="speed" /> 
              <meter id="speedMeter" value="0" low="55" optimum="75" 
                     high="90" max="120"></meter> 
          </p> 
          <p> 
              <label for="vehicle">Vehicle Type: </label> 
              <input type="text" id="vehicle" name="vehicle" /> 
          </p> 
      </form> 
      <p> 
          Form Completion Progress: 
          <progress id="completionProgress" max="3" value="0"></progress> 
      </p> 

      <script> 
          let myForm = document.form1; 
          let completionProgress = document.getElementById("completionProgress"); 
          let speedMeter = document.getElementById("speedMeter"); 

          function countFieldData() { 
              let count = 0; // w  w  w  .  ja v  a2  s  .  c o m

              for (let index = 0; index < myForm.length; index++) { 
                  let element = myForm[index]; 
                if (element.value) { 
                    count++; 
                } 
            } 

            return count; 
        } 

        function formInputChange() { 
            completionProgress.value = countFieldData(); 

            speedMeter.value = myForm.speed.value; 
        } 

        myForm.addEventListener("input", formInputChange); 
    </script> 
</body> 
</html>



PreviousNext

Related