-1

My question is from a rookie stand point with HTML, CSS, and JavaScript working together.

I can use the JS to get my objects to show on the pages, but I need to be able to move them the way I do any other element on the page. How do I go about doing this? CSS?

Please advise.

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();

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

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

today = mm+'/'+dd+'/'+yyyy;
document.write(today);

The output auto-appears in the top right corner, I am looking to move it to the bottom right corner of the page.

This code was taken from somewhere on this site as a training purpose, so you may have seen it before.

Thanks.

Alex Imperiale
  • 113
  • 1
  • 10
  • 1
    yes you should consider doing with css – Geeky Oct 18 '16 at 19:15
  • it creates a text node. move it around like you would any other text node. – Kevin B Oct 18 '16 at 19:15
  • Pro-tip: [don't use `document.write`](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice). Update your page with stuff like [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) and [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML). Then you can absolutely use CSS to position stuff. – Mike Cluck Oct 18 '16 at 19:16
  • Im not sure if I cannot wrap my head around the innerHTML idea of this, can someone show me in coding how I might execute this? – Alex Imperiale Oct 18 '16 at 19:51

2 Answers2

0

instead of doing document.write try appending it to a div with a class that you can style.

var div = document.getElementById('divID');
div.innerHTML = today;
Kolby
  • 2,606
  • 2
  • 20
  • 40
0

[I wish I could comment, but I don't have enough reputation] You should definitely use css for these types of styling, but if you really have to do this with javascript, try this:

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
    dd='0'+dd
} 
if(mm<10) {
    mm='0'+mm
} today = mm+'/'+dd+'/'+yyyy;

//creating and styling the green div
var mydiv = document.getElementById('demo');
mydiv.style.position = "absolute";
mydiv.style.top = "80px";
mydiv.style.left = "50px";

//applying the value of today
mydiv.innerHTML = today;
//see how this line removed the 'Hello world' html content and 
//placed the value of today?
#demo {
  background: lightgreen;
  padding: 10px; 
  font-size: 130%;
  width: 200px;
}
<div id="demo">Hello world</div>

comment out the last two lines from javascript to understand the changes. Thanks

Towkir
  • 3,546
  • 2
  • 18
  • 32
  • Okay thank you! I can follow the logic behind this now at this point, my question now becomes, how do I get the data stored in the "today" var into my output, I understand how you are executing changes but how do I pull this data in? – Alex Imperiale Oct 18 '16 at 20:10
  • @AlexImperiale I just updated the code snippet with your code, hope you understand the process now. think of innerHTML as a method that can set the HTML content of an element, and keep researching. Good luck, and if this answer helped you, don't forget to choose as a solution from the left top corner of the answer. thanks :) – Towkir Oct 18 '16 at 21:15
  • this is fantastic, thank you for commenting it for me as well it really displays the logic of the process. I really appreciate your help on this, i couldnt seem to wrap my head around it! – Alex Imperiale Oct 18 '16 at 21:51
  • You can create elements on the fly as well with `var mydiv = document.createElement('div');` if you have elements that you don't want to create in HTML or want many of them. – Peter Brand Oct 18 '16 at 22:51