Ways to reposition JavaScript output within a webpage

I am new to HTML, CSS, and JavaScript and I have a question regarding how they work together.

I can use JavaScript to display objects on the page, but I'm unsure how to move them around like other elements. Is CSS the solution for this?

Any advice would be appreciated.


    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 date output appears in the top right corner by default, but I want it to be positioned at the bottom right of the page.

This code snippet was found on this website as part of a training exercise, so you may recognize it.

Thank you.

javascripthtmlcss

Answer №1

[Unfortunately, I'm unable to leave a comment due to my lack of reputation] For optimal styling, it is recommended to utilize CSS. However, if you must achieve this using JavaScript, consider the following approach:

var currentDay = new Date();
var dd = currentDay.getDate();
var mm = currentDay.getMonth()+1; 
var yyyy = currentDay.getFullYear();
if(dd<10) {
    dd='0'+dd
} 
if(mm<10) {
    mm='0'+mm
} 
currentDay = 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 = currentDay;
#demo {
  background: lightgreen;
  padding: 10px; 
  font-size: 130%;
  width: 200px;
}
<div id="demo">Hello world</div>

Please comment out the last two lines in the JavaScript code to observe the changes. Thank you

Answer №2

Have you considered trying a different approach than using document.write? One suggestion is to append it to a div element that has a specified class, making it easier to style.

var container = document.getElementById('containerDiv');
container.innerHTML = currentContent;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aligning Text Vertically with an Image in ul/li List Items

Apologies if this question has already been asked, but I've checked several similar inquiries in an attempt to merge the solution without much luck. I currently have a bootstrap row with two col-md-6's. The first column contains an image, while t ...

htmlcsstwitter-bootstrapvertical-alignment

Tips for altering the visibility of a different class on hover using jss

Exploring the features of material ui react Below is my scss code snippet (when hovering over .content, the .replyBtn becomes visible): .content { &:hover { .replyBtn { visibility: visible } } } .replyBtn { visibility: hidden; } ...

javascriptreactjsmaterial-uijss

Warnings from Webpack may appear while running the Next.js development server

Encountering these warnings when running npm dev: <w> [webpack.cache.PackFileCacheStrategy] Restoring pack from /Users/pdeva/code/monorepo/web/app/.next/cache/webpack/client-development.pack failed: TypeError: Cannot read properties of undefined (rea ...

javascriptnode.jswebpacknext.jsnext.js13

Issue with Jquery .on() causing toggleClass function to not trigger

Adding a column dynamically to a table on click with JS/Jquery is achieved as demonstrated below $("#btn").click(function(){ $('#week_title').append('<th>Week '+count+'</th>'); count++; $('.tag&ap ...

javascriptjqueryhtml

Encountered a MySQL error while attempting to insert an image into the database

I have a task to work on a website where users can upload product images that will be stored in a MySQL database. The code for my HTML form is: <FORM action="testimage1.php" ENCTYPE="multipart/form-data" method="post"> <div st ...

phpmysqlhtmlcss

Enhance the functionality of the custom transaction form in NetSuite by incorporating new actions

I'm currently working on incorporating a new menu option into the "Actions" menu within a custom transaction form in NetSuite. While I can successfully see my selection in the Actions Menu on the form, I'm running into an issue with triggering th ...

javascriptoraclenetsuite

The functionality of CSS transform appears to be malfunctioning on Firefox browser

My website, located at , features a logo that is centered within a compressed header. I achieved the centering effect using the following CSS command: .html_header_top.html_logo_center .logo { transform: translate(-63%, -2%); } This setup works perfe ...

css

Troubleshooting a React JS and material-ui issue

Having an issue with material-ui integration in reactjs. Attempting to render a FlatButton, but encountering the error message: TypeError: _context$muiTheme is undefined As a newcomer to reactjs, I'm unsure of where the problem lies. Below is my code ...

javascriptreactjsmaterial-ui

How to show ngFor value from Angular in a separate tag

I have a list of companies that I want to display in the following format: <div class="col-md-4"> <select ngModel="selectedCompany" style="width:400px;"> <option *ngFor="let x of mycompanylist&q ...

javascriptangularngforngmodel

Executing JavaScript function from external SVG file globally

I am working on an HTML page that includes an external JavaScript module <script type="text/javascript" src="js/js.js"></script> and also an external SVG map called "img/map.svg". My goal is to create clickable objects on the map that will t ...

javascriptjqueryhtmlsvg

Error: The middleware function is not recognized | Guide to Transitioning to React Redux Firebase v3

After utilizing these packages for my project, I encountered an error in middleware composition while creating a new react app with create-react-app. Below are the packages I have included. Can someone please help me identify what is missing here? HELP I ...

javascriptreactjsfirebasereduxreact-redux-firebase

tips for automatically adjusting the height and width of an image within a div

I'm struggling with fitting an image that is 1587*666 into a div that has a height of 600px and width of 300px. Can someone provide me with an example to achieve this? Here's the code snippet: <div id="myDiv" style="width:300px; height:600px ...

htmlcss

Twitter typeahead not functioning properly when used in conjunction with ajax requests

I have limited experience in the frontend world and I'm currently working on getting this to function properly. $('#the-basics .typeahead').typeahead({ hint: true, highlight: true, minLength: 6 }, { source: function (query, ...

javascriptjqueryajaxjsontwitter-typeahead

Error: Cannot read property 'X' of undefined in JavaScript when using Django framework

Using p5.js, I am creating drawings with data from a JSON provided by my Django backend. The draw function is defined at the base level of my HTML document within the script element: function draw(json) { if (json["leaf_text"]) { stroke(100) el ...

javascriptjsonajaxdjangop5.js

Ways to extract variables from a component and utilize them in App.js

Despite my efforts to search online, I could not find the answer or understand what I needed to. My issue: I need the "inputVal" variable from the "InputField.js" component to be accessible in the "App.js" component (specifically in the fetch request where ...

javascripthtmlreactjsfrontend

What is the best way to incorporate the "child_process" node module into an Angular application?

Trying to execute a shell script in my Angular application has been quite the challenge. I came across the "child process" node library that might be able to help me with this task. However, every attempt to import the library led me to the error message: ...

javascriptnode.jsangularshellelectron

Navigation menu with submenus containing buttons

I attempted to incorporate a dropdown into my existing navigation bar, but unfortunately, the dropdown content disappeared after adding the necessary code. I am now at a loss on how to troubleshoot this issue and make the dropdown function properly. Despit ...

javascripthtmljquerycssnav

A step-by-step guide to customizing MUI CSS within a React component that incorporates MUI elements

Here is a custom Reactjs component I created and used in various components: function CustomSearchBox({ handle, placeholder, inputType, ...props}) { return ( <Box sx={{ display: 'flex', ali ...

htmlcssreactjsmaterial-ui

Saving a complicated schema in Node using Mongoose fails to save or update when encountering an error

Greetings, I am facing challenges while trying to save a complex schema in MongoDB. const itemsSchema =new Schema({ cat: {type: String, required: true}, catItems: [{ items:{type: String}, isActive: {type: Boolean, default: true} }] }) ...

javascriptnode.jsmongodbmongoose

JavaScript: Efficiently Replacing Multiple Text Instances

To ensure that users do not input multiple empty paragraphs in the text editor, I have found a method to eliminate a single <p><br></p> from the text within the editor message. var str = content.replace('<p><br></p> ...

javascript