CODEWITHSUNDEEP
javascriptjqueryhtml
ben jay hutton
ben jay hutton

Reputation: 404

JavaScript is appending to a Div tag but with some strange behaviour

I have a script that for every click of the button takes the time, applies @gmail.com to the end and appends it to a defined div tag.

where the problem lies is that every time i hit the button, the first line changes to the current time, an additional line is appended each time with the correct details and they don't update it is just the first line.

can someone suggest a way to stop the first line from updating each time?

function Time() {
     var d = new Date();
     var dd = d.getDate();
     var mm = d.getMonth() + 1; //January is 0!
     var yy = d.getFullYear().toString().substr(2, 2);
     var j = document.getElementById("demo").innerHTML = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "@gmail.com<br />";

     $(document).ready(function() {
       $("button").click(function() {
         if (dd < 10) {
           dd = '0' + dd
         }
         if (mm < 10) {
           mm = '0' + mm
         }
         $("#demo").append(j);
       });
     });

     return j;

   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
    
    <button onclick="Time()">Generate</button>
    
    <div id="demo"></div>

What I expect to happen each time i press the button is for it to append the following:

[email protected]
[email protected]
[email protected]
[email protected]
...etc

Upvotes: 2

Views: 59

Answers (3)

Daniel Post
Daniel Post

Reputation: 101

This should work. The problem was the structure of your function. I took the button click outside of the Time() function and also changed var j to only declare the time instead of also already adding it to the HTML.

Also, by declaring var j after your if statements the date now displays correctly.

function Time() {
     var d = new Date();
     var dd = d.getDate();
     var mm = d.getMonth() + 1; //January is 0!
     var yy = d.getFullYear().toString().substr(2, 2);

     if (dd < 10) {
        dd = '0' + dd
     }
     if (mm < 10) {
        mm = '0' + mm
     }

     var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "@gmail.com<br />";
     
     $("#demo").append(j);

   }

$("button").click(function() {
    Time();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
    
    <button>Generate</button>
    
    <div id="demo"></div>

Upvotes: 1

Mladen P
Mladen P

Reputation: 176

You just need to append the result from Time function. 

$(document).ready(function () {
    $("button").click(function () {
        $("#demo").append(Time());
    });
});

function Time() {
    var d = new Date();
    var dd = d.getDate();
    var mm = d.getMonth() + 1; //January is 0!
    var yy = d.getFullYear().toString().substr(2, 2);
    var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "@gmail.com<br />";
    return j;
}

Upvotes: 1

Irfan434
Irfan434

Reputation: 1681

You are calling Time() onclick in your HTML. You do not need to say $("button").click again in your jquery.

Also, you do not need document.getElementById("demo").innerHTML when assiging the string to var j.

See the following code:

    
    function Time() {
     var d = new Date();
     var dd = d.getDate();
     var mm = d.getMonth() + 1; //January is 0!
     var yy = d.getFullYear().toString().substr(2, 2);
     var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "@gmail.com<br />";

        if (dd < 10) {
           dd = '0' + dd
         }
         if (mm < 10) {
           mm = '0' + mm
         }
         $("#demo").append(j);

     return j;

   }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
    
    <button onclick="Time()">Generate</button>
    
    <div id="demo"></div>

Upvotes: 2

Related Questions