html / javascript onclick function with time

onclick javascript
javascript click button by id
how to call javascript function on button click in html
javascript onclick href
onclick function jquery
javascript click event
jquery onclick call function
html button onclick link

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>

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

Javascript - date, time, button, onclick, and innerHTML, <input> elements donot have textContent you should change value .Set your onclick event to another function which would change value on� The two key methods to use with JavaScript are: setTimeout(function, milliseconds) Executes a function, after waiting a specified number of milliseconds. setInterval(function, milliseconds) Same as setTimeout(), but repeats the execution of the function continuously.


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>

html / javascript onclick function with time, onclick. Reading time 2 min. Published Aug 10, 2017. Updated Oct 10 It runs a specified line of code when you click a HTML object that has the onclick attribute. The JavaScript onclick functions can be triggered by object.onclick or object. onclick JavaScript: Main Tips. The onclick JavaScript event occurs when the user clicks on an element. It runs a specified line of code when you click a HTML object that has the onclick attribute. The JavaScript onclick functions can be triggered by object.onclick or object.addEventListener.


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

Master onclick JavaScript: JavaScript Click Event Explained, The onclick event in JavaScript lets you as a programmer execute a in the html , they will see an alert showing onclick Event triggered . It also reloads the webpage, Sometimes the onclick event is not working in the javascript validations i.e scripts the html page wherever call the functions in onclick event the user must need to be check and also rename the function does not work that time. If the function onclick() is defined in the user input or like buttons it gets a higher


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.

JavaScript Onclick Event Explained, In HTML: <element onclick="myScript">Try it. In JavaScript: Example. Click on a <button> element to display the current day, date and time: <button� return simply means that we will return something back to the method or function that called our function addingFunction. In the result, you can see that return sent back 777. The final statement that executed was more like document.write(777); References. JavaScript Functions (w3schools) js Functions (quirksmode) JavaScript Function Invocation


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>

onclick Event | JS Reference, DOM Reference, Mainly, if we use the onclick button for event attributes and is supported by all the Only one click event handler will be assigned for the single object at a time. Javascript Web Development Front End Technology Both onclick & href have different behaviors when calling JavaScript directly. Also the script in href won’t get executed if the time difference is short.


HTML onclick Button, I first tried cell 1 which uses a function (displayDate) inside quotation, nothing works. html`<button onclick="${displayDate()}">The time is?</button>� I have some JavaScript code in an HTML page with a button. I have a function called 'click()' that handles the onClick event of the button. The code for the button is as follows: &lt;input type="


why html`<button onclick="displayDate()">The time is?</button>` not , DOCTYPE html>; <html lang="en">; <head>; <meta charset="UTF-8">; <title>Call Multiple JavaScript Functions on Click of a Button</title>; </head>; <body> Tag: javascript,jquery,html,button,onclick. I already researched this question on Stack Overflow but was not able to address my issue via this and this question. Here's my problem: I have a three buttons, each calls chooseMap() function onclick which then redirects user to a new page based on button id. Everything works but I have to click


How to Call Multiple JavaScript Functions in a Single onClick Event, The JavaScript onclick event allows you to run code when a user clicks an HTML element. JavaScript events like onclick allow you to make web� @Toniq - Whatever you're trying to do, put the code in a function and call that function in your onclick handler. Writing more than a single command or two in inline HTML is a bad idea. Writing more than a single command or two in inline HTML is a bad idea.