Javascript和DOM - 日期和时间

我正在创建一个简历网站，并且正在尝试创建一个函数，当页面加载时根据一天的时间显示问候语（作为标题）时将加载该函数。这是我到目前为止（你可以忽略工资计算器部分）：Javascript和DOM - 日期和时间

<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>

当我加载页面时没有任何显示。我不确定该从哪里出发。任何帮助将不胜感激。

来源

2017-05-04 Jordan Jackson

你不会对问候做任何事情。你需要把它放到一个可视化元素中，现在它只是一个JavaScript变量。 –

我想我明白你在说什么。你能告诉我如何做到这一点？ –

类似于'document.getElementById（'results'）。textContent = greeting;'。还要注意@zepplin在答案中所提出的观点。 –

您需要设置greeting变量文本节点的值，然后移动内部onLoad funtion HTML元素创建代码如下 -

<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> 
</div> 

<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(greeting); 
    firstVariable.appendChild(secondVariable); 
    document.getElementById("fulldiv").appendChild(firstVariable); 
} 
</script>

来源

2017-05-04 20:10:44

非常感谢！ –

欢迎您！如果它解决了您的问题，请注册并接受答案。 –

最后你的代码的几行的onLoad功能外定义：

function onLoad() { 
... 
} 
var firstVariable = document.createElement("h1"); 
var secondVariable = document.createTextNode(d); 
firstVariable.appendChild(secondVariable); 
document.getElementById("fulldiv").appendChild(firstVariable);

这就是为什么它不能按预期工作。

来源

2017-05-04 20:10:54 zeppelin

Javascript和DOM - 日期和时间

回答

相关问题