html / javascript onclick function with time

Question

I would like that when clicking on my label I would execute a javascript function that would return the exact time of that click, with hours, minutes and seconds. I have a javascript function that does what I want, but when I click on the label, nothing appears to me. Am I doing something wrong?

 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> elements donot have textContent you should change value .Set your onclick event to another function which would change value on each click.

You can also add the following line in getTime() to get rid of other 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: (assign timestring to value property of input field instead of textContext property)

<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

Just put the time displaying too inside the getTime function

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

I'd say the most likely issue here is that you're using const as a variable declarator in vanilla JS. Your browser might not know how to properly handle it, and thus it breaks. Your code is working online here (CodePen) when it's compiled with Babel. Perhaps change your code to:

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();

Having the document.getElementById outside of getTime is not an issue.

EDIT

I didn't realize you were setting the value of an input, simply change:

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

To:

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

I'd like to add though, if you are going to use Let/Const Declarations, I'd recommend you compile your code with something like Babel so that it works across browsers.

Answer 5

You need to use value & not 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>