how to display results from a javascript function to an html element : I am having trouble figuring out how to display values from a JavaScript to a table in HTML. I have very little coding experience so please bare with me. I am trying to display just the even numbers between a starting number and a ending number. I believe my functions are correct but for some reason the values do not display on the page when submitted. Any help would be awesome. Thanks
   

 In HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <script type="text/JavaScript" src="displayEvens.js"></script>
        <link 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
                rel="stylesheet" type="text/css"/>
            
    </head>
    <body>
        <div class="container">
    <h1>Display Evens</h1>
    <form name="displayEvens" onsubmit="return validateItems();" 
          onreset="resetForm();">
            <div class="form-group row">
                <label for="startingNumber" class="col-sm-2 col-form-
    label">Starting Number</label>
                <div class="col-sm-10">
                <input type="number" class="form-control" ` 
                 id="startingNumber"` 
    placeholder="Enter a number"/>
                </div>
            </div>
            <div class="form-group row">
                <label for="endingNumber" class="col-sm-2 col-form-` 
    label">Ending` 
    Number</label>
                <div class="col-sm-10">
                <input type="number" class="form-control" id="endingNumber" 
    placeholder="Enter a number"/>
                </div>
            </div>
            <div class="form-group row">
                <label for="step" class="col-sm-2 col-form-
    label">Step</label>
                <div class="col-sm-10">
                <input type="number" class="form-control" id="step" 
    placeholder="Enter a number"/>
                </div>
            </div>                
            <button type="submit" id="submitButton" class="btn btn-
    default">Display Evens</button>
            <button type="reset" id="resetButton" class="btn">Reset</button>
    </form></br>
        <table id="results" class="table table-striped">
        <thead>
            <tr>
                <td>Even numbers between <span id="startingNum"></span> and 
    <span id="endingNum"></span>
                by <span id="stepNum"></span></td>
                <th>Result</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><span id="evens"></span></td>
        </tbody>
    </table>
    </div>
    <!--<div id="results" style="display:none;">
        <h3>Results:</h3>
        <span id="evens"></span>
        <h3>Your Starting Number:</h3>
        <span id="start"></span></br>
        <h3>Your Ending Number:</h3>
        <span id="end"></span></br>
        <h3>Your Step Number:</h3>
        <span id="step"></span>
    </div>-->
    </body>
    </html>

In JavaScript:

    

 

    function clearErrors() {    
    for (var loopCounter = 0; 
        loopCounter < document.forms["displayEvens"].elements.length; 
        loopCounter++) {
        if (document.forms["displayEvens"].elements[loopCounter]
           .parentElement.className.indexOf("has-") != -1) {
            
            document.forms["displayEvens"].elements[loopCounter]
               .parentElement.className = "form-group";
          }
       }    
    }
    function resetForm() {
    clearErrors();
    document.forms["displayEvens"]["startingNumber"].value = "";
    document.forms["displayEvens"]["endingNumber"].value = "";
    document.forms["displayEvens"]["step"].value = "";
    document.getElementById("results").style.display = "none";
    document.getElementById("submitButton").innerText = "DisplayEvens";
    document.forms["displayEvens"]["startingNumber"].focus();
    }
    function displayEvens(startingNumber, endingNumber, step) {

    var startingNumber = 
    parseInt(document.getElementById("startingNum").value);
    var endingNumber = parseInt(document.getElementById("endingNum").value);
    var step = parseInt(document.getElementById("stepNum").value);
    var evenNums = [];
    for (var i = startingNumber; i < endingNumber; i += step) {
        if (i % 2 == 0) {
            evenNums.push(i);
         }
      }
    document.getElementById("evens").innerText = evenNums;
    }
    function validateItems() {
    clearErrors();
    displayEvens(startingNumber, endingNumber, step);

    console.trace("got here!");

    //var startingNumber = document.forms["displayEvens"]
    ["startingNumber"].value;
    //var endingNumber = document.forms["displayEvens"]
    ["endingNumber"].value;
    //var step = document.forms["displayEvens"]["step"].value;
    if (startingNumber == "" || isNaN(startingNumber)) {
        alert("Starting Number must be filled in with a number.");
        document.forms["displayEvens"]["startingNumber"]
           .parentElement.className = "form-group has-error";
        document.forms["displayEvens"]["startingNumber"].focus();
        return false;
    }
       if (endingNumber == "" || isNaN(endingNumber)) {
       alert("Ending Number must be filled in with a number.");
       document.forms["displayEvens"]["endingNumber"]
          .parentElement.className = "form-group has-error"
       document.forms["displayEvens"]["endingNumber"].focus();
       return false;
       }
       if (endingNumber <= startingNumber) {
       alert("Ending Number must be greater than the Starting number.");
       document.forms["displayEvens"]["endingNumber"]
          .parentElement.className = "form-group has-error"
       document.forms["displayEvens"]["endingNumber"].focus();
       return false;
       }
       if (step == "" || isNaN(step)) {
       alert("Step Number must be filled in with a number.");
       document.forms["displayEvens"]["step"]
          .parentElement.className = "form-group has-error"
       document.forms["displayEvens"]["step"].focus();
       return false;
       }
       if (step < 0) {
       alert("Step Number must be filled in with a positive number.");
       document.forms["displayEvens"]["step"]
          .parentElement.className = "form-group has-error"
       document.forms["displayEvens"]["step"].focus();
       return false;
       }
    
    //document.getElementById("results").style.display = "block";
    //document.getElementById("submitButton").innerText = "Recalculate";
    document.getElementById("startingNum").innerText = 
    Number(startingNumber);
    document.getElementById("endingNum").innerText = Number(endingNumber);
    document.getElementById("stepNum").innerText = Number(step);
    document.getElementById("evens").innerText = Number(evenNums);
    return false;
    }