帶有時間的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>