Customize your JavaScript font with CSS

Question

Customize your JavaScript font with CSS

I am new to using JavaScript and I recently attempted to add a date to my website using the following code:

external script_

var mydate=new Date() 
var year=mydate.getYear() 
if (year < 1000) year+=1900 
var day=mydate.getDay() 
var month=mydate.getMonth() 
var daym=mydate.getDate() 
if (daym"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+ "")

The issue is that in my HTML file, it appears like this:

<p><strong>Current Date is : </strong><script src="js/datescript.js" id="sc"></script><br>

I want the text of the script to match the text of the , how can I achieve this?

javascript jquery html css

Answer 1

Answer №1

At first glance, it appears that some essential Javascript code is missing and the final if statement is quite incorrect as there are references to dayarray and montharray which have not been defined.

Furthermore, the JavaScript seems to only be assigning variables without actually displaying any output. When including the script inline, it will not dynamically insert output into the designated part of the DOM.

The best approach would likely be to assign an id to the element where you want the output to appear and then input the desired content accordingly.

Check out this Demo Fiddle for more clarity!

Here is how your HTML should look:

<p id='date'><strong>The Current Date is : </strong></p>

And this is the correct way to structure your Javascript:

var mydate = new Date();
var year = mydate.getYear();
if (year < 1000) year += 1900;

var day = mydate.getDay();
var month = mydate.getMonth();
var daym = mydate.getDate();

var el= document.getElementById('date');
el.innerHTML+=mydate;

Update:

If you prefer the output to also be bold, just adjust the placement of the id in your HTML like so:

Updated HTML Code:

<p><strong id='date'>Current Date is : </strong></p>

Answer 2

At first glance, it appears that some essential Javascript code is missing and the final if statement is quite incorrect as there are references to dayarray and montharray which have not been defined.

Furthermore, the JavaScript seems to only be assigning variables without actually displaying any output. When including the script inline, it will not dynamically insert output into the designated part of the DOM.

The best approach would likely be to assign an id to the element where you want the output to appear and then input the desired content accordingly.

Check out this Demo Fiddle for more clarity!

Here is how your HTML should look:

<p id='date'><strong>The Current Date is : </strong></p>

And this is the correct way to structure your Javascript:

var mydate = new Date();
var year = mydate.getYear();
if (year < 1000) year += 1900;

var day = mydate.getDay();
var month = mydate.getMonth();
var daym = mydate.getDate();

var el= document.getElementById('date');
el.innerHTML+=mydate;

Update:

If you prefer the output to also be bold, just adjust the placement of the id in your HTML like so:

Updated HTML Code:

<p><strong id='date'>Current Date is : </strong></p>

Answer 3

Answer №2

To display the current date in your HTML, follow these steps:

STEP 1:

Create an HTML element with a unique ID for the variable part of the date. For example:

<p><strong>Today's Date : <span id="dateVar"></span></strong>

STEP 2:

Have your JavaScript function execute when the document is ready (using jQuery is recommended):

$(document).ready(function() {
    showDate();
}

function showDate() {
    var currentDate = new Date();
    var year = currentDate.getYear();
    if (year < 1000) {
        year += 1900;
    } 
    var day = currentDate.getDay();
    var month = currentDate.getMonth();
    var date = currentDate.getDate();

    //Get dateString
    var element = document.getElementById('dateVar'); // Get the HTML element to insert the date
    element.innerHtml = *yourDateString*;
}

That's all you need to do to display the date on page load. If you want it to appear on a button click, call the showDate() function again after setting up an on-click event-listener (more information here).

Answer 4

To display the current date in your HTML, follow these steps:

STEP 1:

Create an HTML element with a unique ID for the variable part of the date. For example:

<p><strong>Today's Date : <span id="dateVar"></span></strong>

STEP 2:

Have your JavaScript function execute when the document is ready (using jQuery is recommended):

$(document).ready(function() {
    showDate();
}

function showDate() {
    var currentDate = new Date();
    var year = currentDate.getYear();
    if (year < 1000) {
        year += 1900;
    } 
    var day = currentDate.getDay();
    var month = currentDate.getMonth();
    var date = currentDate.getDate();

    //Get dateString
    var element = document.getElementById('dateVar'); // Get the HTML element to insert the date
    element.innerHtml = *yourDateString*;
}

That's all you need to do to display the date on page load. If you want it to appear on a button click, call the showDate() function again after setting up an on-click event-listener (more information here).

Answer 5

Answer №3

Your JavaScript is responsible for generating HTML content, but the styling process remains the same as with any other HTML elements.

In this case, because the script element is situated within a paragraph, any text nodes it creates will inherit the same styling as other child nodes of that paragraph.

The issue arises when there are no other text nodes to compare with, as the remaining text in the paragraph is enclosed within a  element.

To address this problem, consider moving the script inside the  element to ensure consistent styling across all generated text.

Answer 6

Your JavaScript is responsible for generating HTML content, but the styling process remains the same as with any other HTML elements.

In this case, because the script element is situated within a paragraph, any text nodes it creates will inherit the same styling as other child nodes of that paragraph.

The issue arises when there are no other text nodes to compare with, as the remaining text in the paragraph is enclosed within a  element.

To address this problem, consider moving the script inside the  element to ensure consistent styling across all generated text.

Answer 7

Answer №4

Your external JS file contains multiple errors that need to be addressed before proceeding:

var mydate=new Date(); // Remember to always terminate statements with a semicolon!
var year=mydate.getYear();
if (year < 1000) 
    year+=1900;
var day=mydate.getDay();
var month=mydate.getMonth();
var daym=mydate.getDate();

if (daym"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+ "") 
  // The variables dayarray and montharray are not defined
  // Additionally, the if statement lacks a valid condition or block: if ( expression ) statement;

Answer 8

Your external JS file contains multiple errors that need to be addressed before proceeding:

var mydate=new Date(); // Remember to always terminate statements with a semicolon!
var year=mydate.getYear();
if (year < 1000) 
    year+=1900;
var day=mydate.getDay();
var month=mydate.getMonth();
var daym=mydate.getDate();

if (daym"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+ "") 
  // The variables dayarray and montharray are not defined
  // Additionally, the if statement lacks a valid condition or block: if ( expression ) statement;

Customize your JavaScript font with CSS

Answer №1

Check out this Demo Fiddle for more clarity!

Answer №2

Answer №3

Answer №4

Similar questions

What could be causing Jquery to not function properly in an Angular controller?

Assign different classes to each element sequentially

Issue with hamburger icon in Bootstrap navbar following height adjustment of the navbar

Dynamic path variables showcased in a static JSON configuration file

Encountering the error message "ws02 script tag does not define Map"

Leverage NextJS's getServerSideProps feature with a specific sub path in the URL

JavaScript Date() constructor failing to capture the correct day

Code for jQuery function

Switching from an alert to a modal in React Native

How can I incorporate the mix-blend-mode into my d3 stroke technique?

What is the process for displaying a JSON element within an HTML component in a Bootstrap modal?

Everything remained the same until an unexpected Ionic TypeError occurred, indicating that co.event is undefined

Tips for aligning text to match the starting point of other text

Is it possible to delay the execution of a JavaScript export statement in any way?

What is causing Microsoft Edge to highlight this span and behave as though it's a hyperlink?

Tips for refreshing the current Angular 2 Component

What is the best way to determine if a URL parameter is present when compared to an Array?

retrieve the parent id of <ul> elements and store them in an array

Looking to access HTML elements in React without relying on setTimeout?

Even in the face of errors, Selenium with Node.js continues to run seamlessly. The challenge arises specifically with the 107.xx version of the Chrome browser and Chrome driver