How do I solve the problem

Question

1.00/5 (1 vote)

See more:

<!DOCTYPE html>
<html>
    <head>
		<link rel="stylesheet" type="text/css" href="part1.css"/>
    </head>
    <body>
		<div>
				<img src="bg1.jpg" width=100% height=700px/>
		</div>
		<div>
	       	<script>
				function printTime()
				{
					var d = new Date();
			
					var years = d.getFullYear();
					var months = d.getMonth() + 1;
					var dates = d.getDate();
					
					document.body.innerHTML ="<p>" + days + ", " + dates + "/" + months + "/" + years + "</p>";
				}
				setInterval(printTime,1000);
			</script>
		</div>
		<div>
			<h2> TO DO LISTS </h2>
			<p> Enter text into the input field to add items to your list (maximum 30 characters) </p>
			<p> Click the "X" to remove the item from your list. </p>
		</div>
    </body>
</html>

What I have tried:

why my code like TO DO LISTS , ENter text .... after script tag cannot display on webpage?

Posted 10-Apr-20 20:26pm

Member 14795610

Updated 14-Apr-20 7:31am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2020-04-14T07:32:00

Quote:

JavaScript

document.body.innerHTML ="<p>" + days + ", " + dates + "/" + months + "/" + years + "</p>";

That line replaces the entire contents of the <body> element with the string you've specified. The <img>, <h2>, and the two existing <p> elements will be removed.

If you want those elements to remain, you need to update the content of a different element instead. For example:

HTML

<div>
    <h2> TO DO LISTS </h2>
    <p> Enter text into the input field to add items to your list (maximum 30 characters) </p>
    <p> Click the "X" to remove the item from your list. </p>
    
    <!-- Add this element: -->
    <div id="print-time-output"></div>
</div>

JavaScript

function printTime()
{
    ...
    
    // Replace the contents of the new output element, rather than the whole body:
    document.getElementById("print-time-output").innerHTML ="<p>" + days + ", " + dates + "/" + months + "/" + years + "</p>";
}

OriginalGriff · Accepted Answer · 2020-04-10T21:28:00

Solution 1

Because days is not defined:

JavaScript

document.body.innerHTML ="<p>" + days + ", " + dates + "/" + months + "/" + years + "</p>";

So the script dies there.

In Chrome, you can find out what is happening with your code - and see any errors - by opening the page and pressing F12. Look at the "Console" tab, and you will see:

Uncaught ReferenceError: days is not defined
    at printTime (New1.html:20)
139New1.html:20 Uncaught ReferenceError: days is not defined
    at printTime (New1.html:20)
printTime @ New1.html:20

Posted 10-Apr-20 21:28pm

OriginalGriff

Updated 10-Apr-20 21:30pm

v3

Comments

Member 14795610 11-Apr-20 23:01pm

After defined day, the webpage still cannot display what it should display?

OriginalGriff 12-Apr-20 1:54am

And what does it display that it shouldn't, or not display that it should?
What does the console (and other dev tools in the browser) show you is happening?
What does the generated HTML look like, for example?

Remember that we can't see your screen, access your HDD, or read your mind - we only get exactly what you type to work with.

Member 14795610 12-Apr-20 4:17am

the code after script tag start from "TO DO LISTS" onwards is not display on screen.My console did not show any error information.

OriginalGriff 12-Apr-20 4:27am

And?
What does the HTML look like - you did look at the HTML, I assume?

Member 14795610 13-Apr-20 2:24am

any wrong with my html code?

OriginalGriff 13-Apr-20 2:35am

How would I know? I can't see it!
Your function modifies the HTML, so the data displayed will not be exactly as shown above. You need to learn to use browser tools to look at exactly what is being rendered, if you are going to solve this...