jeudi 4 mai 2017

Javascript and DOM - Date and Time

I am creating a resume site and I'm trying to create a function that will load when the page loads that displays a greeting (as a heading) depending on the time of day. Here is what I have so far (you can ignore the salary calculator part):

    <body onload = "onLoad()">
        <div id="fulldiv">
    <p> Enter the following information to find out if the potential salary is too little, almost enough, or a good salary.</p>

    <p>Hourly Wage:
    <input type="text" name="wage" id="txt_wage" value ="0.00"/></p>

    <p>Hours Per Week:
    <input type="text" name="hours" id="txt_hours" value= "0.0"/> <br/><br/>

    <button value="calculate" onclick="calcSalary(); validateForm(); validateFormH()">Calculate</button></p>

    <p id="results"></p>
    <p id="resultstext"></p>

    <script src="salaryExternal.js" type="text/javascript"></script>

    <script type="text/javascript">
    function onLoad() {
        var d = new Date();
        var z = d.getHours();
        var greeting;
        if (z < 12) {
            greeting = "Enjoy the rest of your morning!"
        } else if (z < 17) {
            greeting = "Enjoy the afternoon!"
        } else {
            greeting = "Have a good evening!"
        }
        }
        var firstVariable = document.createElement("h1");
        var secondVariable = document.createTextNode(d);
        firstVariable.appendChild(secondVariable);
        document.getElementById("fulldiv").appendChild(firstVariable);
    </script>


            </div>

Nothing is showing up when I load the page. I'm not sure where to go from here. Any help would be greatly appreciated.

Aucun commentaire:

Enregistrer un commentaire