Hi people...basic, basic question

Hi,

I’m completely new to javascript - like I’ve never coded it before. I’ve managed to create a javasript file and referenced it through a web page.

When the page loads, it runs the js file, that asks the user their name. So far so good, but here’s the basic question. The users name is stored in a variable declared and defined in the script, in this case “userName”. I can show the name on a web page, but I want to have that name show in multiple locations on a web page, almost like a standard letter where the recipients name is reproduced multiple times.

Is this clear? How is that done? Sorry if this is really, really basic but I’m stuck completely…

Lars

Do you mean on the same page or different pages on the website?

Hi peoray,

Sorry, I replied directly to the email. It’s on the same page, So for example, when loading the script asks for the users name, “X”, then the rest of the page loads and it says for example "Welcome “X”…
Thanks for your help,

Lars

I think in this case, you would have to know the DOM. It will allow you to use Js within your HTML as well as manipulate both your HTML and CSS within your JS code.

If you have the code, it’d be nice if you paste it here, or use codepen.io so it would be easier helping you figure it out.

I’m only starting, so it may well be all over the place. The text is just the Lorem Ipsum passage to fill the page and test some css as so on…I appreciate your help.

JavaScript File
Preformatted textvar userName;

function name() {
“use strict”;
// My first javaScript
// script that demonstrates an if condition
userName = prompt(What is your name?);
document.write(Your name is ${userName});
};
name();Preformatted text

HTML File

<!DOCTYPE HTML>
<HTML>
<HEAD>
		<TITLE></TITLE>
		<LINK type="text/css" rel="stylesheet" href="style.css" />
		<div class="topnav">
			<a class="active" href="website.php">Home</a>
			<a href="about.php">About</a>
			<a href="products.php">Products</a>
			<a href="blog.php">Blog</a>
			<a href="contact.php">Contact</a>
		</div>
					<div class="Menu">
						<a href="website.php">Home</a>
						<a href="about.php">About</a>
						<a href="products.php">Products</a>
						<a href="blog.php">Blog</a>
						<a href="contact.php">Contact</a>
					</div>
</HEAD>
<BODY>
	<HEADER>
	<br>
	<br>
	<H1>Experiment with HTML</H1>
	<hr>
	</HEADER>
<br>
<br>
	<p>Before the script...</p>
	 <p id ="name"></p>
	 <script type =  "text/javascript"  src="javaScript2.js"></script>
        <p>...after the script.</p>
	<DIV ID="CONTENT">
			<img src="avatar.png" alt="Avatar" style="width:100px" align="right" hspace="99"><BR>
			<H3>The standard Lorem Ipsum passage, used since the 1500s</H3>
			<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit <script type = "text/javascript"  name = userName()></script>, 
			sed do teiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
			Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<br>
			<br>
			<H3>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</H3>
			
			"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
			eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
			voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem 
			sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non 
			numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis 
			nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum 
			iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo 
			voluptas nulla pariatur?"<br>
			<br>
			<H3>1914 translation by H. Rackham</H3>
			
			"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give 
			you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the 
			master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but 
			because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor 
			again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because 
			occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial 
			example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But 
			who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one 
			who avoids a pain that produces no resultant pleasure?"<br>
			<br>
			<H3>Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</H3>
			
			"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque 
			corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa 
			qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita 
			distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat 
			facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis 
			debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque 
			earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis 
			doloribus asperiores repellat."<br>
			<br>
			<H3>1914 translation by H. Rackham</H3>
			
			"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the 
			charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound 
			to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as 
			saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free 
			hour, when our power of choice is untrammeled and when nothing prevents our being able to do what we like best, every 
			pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the 
			obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise 
			man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other 
			greater pleasures, or else he endures pains to avoid worse pains."</p>	
		</H3>	
	</DIV>
	<BR><BR>
	<DIV ID="FOOTER">
		<FOOTER>
			<H6>Copyright 2019</H6>
		</FOOTER>
	</DIV>
	
</BODY>	
</HTML>

yeah, definitely need to look up DOM(Document Object Model). It might be confusing trying to explain to you but spare an hour aor two to look into it and you should be able to come up with the solution of what you are trying to do.

In order to insert the name into the page, you will need to target the particular element (maybe a p tag) you want to insert the name into. You can do this either using the id or class-name (there are actually 5 methods), then use something called innerHTML or textContent to render it to the page. But like I said, might be confusing.

Although, it might be too forward asking you to go straight and learn DOM, I’m guessing you haven’t learn Arrays and Objects and other basic JS and data types. If you have already, then here are some materials to help you up to speed with the DOM


Hope this helps you!

I really appreciate the pointers…