带有时间的html / javascript onclick函数

Question

我希望在单击标签时执行一个javascript函数，该函数将返回单击的确切时间，包括小时，分钟和秒。 我有一个可以执行我想要的功能的javascript函数，但是当我单击标签时，什么都没有出现。 难道我做错了什么？

 function getTime() { const timeNow = new Date(); const hours = timeNow.getHours(); const minutes = timeNow.getMinutes(); const seconds = timeNow.getSeconds(); let timeString = '' + ((hours > 24) ? hours - 12 : hours); timeString += ((minutes < 10) ? ":0" : ":") + minutes; timeString += ((seconds < 10) ? ":0" : ":") + seconds; timeString += (hours >= 12) ? "" : ""; return timeString; } const hoursSpan = document.getElementById('hours'); hoursSpan.textContent = getTime(); 

 <div class="wrap-input100 rs1-wrap-input100 validate-input"> <span class="label-input100">Date</span> <input class="input100" onclick="getTime()" id="hours" name="Date" placeholder="Date"> <span class="focus-input100"></span> </div> 

Answer 1

<input>元素没有textContent ，应该更改value将onclick事件设置为另一个function ，该function将在每次单击时更改value 。

您还可以在getTime()添加以下行以摆脱其他changeTime()

hoursSpan.textContent = getTime();

 const hoursSpan = document.getElementById('hours'); function getTime() { const timeNow = new Date(); const hours = timeNow.getHours(); const minutes = timeNow.getMinutes(); const seconds = timeNow.getSeconds(); let timeString = '' + ((hours > 24) ? hours - 12 : hours); timeString += ((minutes < 10) ? ":0" : ":") + minutes; timeString += ((seconds < 10) ? ":0" : ":") + seconds; timeString += (hours >= 12) ? "" : ""; return timeString; } function changeTime(){ hoursSpan.value = getTime(); } 

 <div class="wrap-input100 rs1-wrap-input100 validate-input"> <span class="label-input100">Date</span> <input class="input100" onclick="changeTime()" id="hours" name="Date" placeholder="Date"> <span class="focus-input100"></span> </div> 

Answer 2

HTML：

<div class="wrap-input100 rs1-wrap-input100 validate-input">
    <span class="label-input100">Date</span>
    <!-- this reference is passed to the called function -->
    <input class="input100" onclick="getTime(this)" id="hours" name="Date" placeholder="Date">
    <span class="focus-input100"></span>
 </div>

JavaScript ：（将时间字符串分配给输入字段的value属性而不是textContext属性）

<script language="JavaScript">

    function getTime(self) {
        const timeNow = new Date();
        const hours = timeNow.getHours();
        const minutes = timeNow.getMinutes();
        const seconds = timeNow.getSeconds();
        let timeString = '' + ((hours > 24) ? hours - 12 : hours);
        timeString += ((minutes < 10) ? ":0" : ":") + minutes;
        timeString += ((seconds < 10) ? ":0" : ":") + seconds;
        timeString += (hours >= 12) ? "" : "";
        // Assign timeString to value property
        self.value = timeString;
    }

</script>

Answer 3

只需将时间显示也放在getTime函数中

function getTime() {
     const timeNow = new Date();
     const hours = timeNow.getHours();
     const minutes = timeNow.getMinutes();
     const seconds = timeNow.getSeconds();
     let timeString = '' + ((hours > 24) ? hours - 12 : hours);
     timeString += ((minutes < 10) ? ":0" : ":") + minutes;
     timeString += ((seconds < 10) ? ":0" : ":") + seconds;
     timeString += (hours >= 12) ? "" : "";


     const hoursSpan = document.getElementById('hours');
     hoursSpan.textContent = timeString;
 }

Answer 4

我想说的是，最有可能出现的问题是，您在香草JS中使用const作为变量声明器。 您的浏览器可能不知道如何正确处理它，因此它会中断。 使用Babel编译时，您的代码正在此处（CodePen）在线工作。 也许将您的代码更改为：

function getTime() {
    var timeNow = new Date();
    var hours = timeNow.getHours();
    var minutes = timeNow.getMinutes();
    var seconds = timeNow.getSeconds();
    var timeString = '' + ((hours > 24) ? hours - 12 : hours);
    timeString += ((minutes < 10) ? ":0" : ":") + minutes;
    timeString += ((seconds < 10) ? ":0" : ":") + seconds;
    timeString += (hours >= 12) ? "" : "";
    return timeString;
}

var hoursSpan = document.getElementById('hours');
hoursSpan.textContent = getTime();

在getTime之外放置document.getElementById并不是问题。

编辑

我没有意识到您正在设置输入的值，只需更改即可：

const hoursSpan = document.getElementById('hours');
hoursSpan.textContent = getTime();

至：

const hoursSpan = document.getElementById('hours');
hoursSpan.value = getTime();

不过，我想补充一下，如果您要使用Let / Const声明，我建议您使用Babel之类的代码来编译代码，以便它可以在浏览器中使用。

Answer 5

您需要使用value而不是textContent

 function getTime() { const timeNow = new Date(); const hours = timeNow.getHours(); const minutes = timeNow.getMinutes(); const seconds = timeNow.getSeconds(); let timeString = '' + ((hours > 24) ? hours - 12 : hours); timeString += ((minutes < 10) ? ":0" : ":") + minutes; timeString += ((seconds < 10) ? ":0" : ":") + seconds; timeString += (hours >= 12) ? "" : ""; let hoursSpan = document.getElementById('hoursCon'); hoursSpan.value = timeString; return timeString; } 

 <div class="wrap-input100 rs1-wrap-input100 validate-input"> <span class="label-input100">Date</span> <input class="input100" onclick="getTime()" id="hoursCon" name="Date" placeholder="Date"> <span class="focus-input100"></span> </div>