How to connect css html and js ?

vmars316 · January 21, 2019

Hello & Thanks ,

I have been away from coding a while:

I'm having trouble connecting css html and js .

Problem areas are:

p, ah { font-size: 2em; color: #ffdddd; }
p, tgh { font-size: 1em; color: #ddffdd; }

and

<div id="wrapper">
<section id="section">
<div id="content">
<div class="innertube">
<p contenteditable id="ah" >Article Heading</p>
<p contenteditable id="tgh">Text goes here:</p>
<p>

</p>
</div>
</div>
</section>
<div>

and

Start-up time thru it runs fine but"

When click createArticleHeader button it runs fine the first time but from then on it shows an "undefined" error .

When click TextGoesHere button it doesn't run at all .

I need help .

<!DOCTYPE html>
<html>
   <!--  How to link css to  html and js ?  -->
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>MiniCode-For-Forum.html</title>
      <style >
         body {
         margin:0;
         padding:0;
         font-family: Sans-Serif;
         line-height: 1.5em;
         }
         #section {
         padding-bottom: 10010px;
         margin-bottom: -10000px;
         float: left;
         width: 100%;
         }
         #wrapper {
         overflow: hidden;
         }
         #content {
         margin-left: 230px; /* Same as 'nav' width */
         }
         .innertube {
         margin: 15px; /* Padding for content */
         margin-top: 0;
         }
         p {
         color: #000555;
         }
      </style>
      <style>
         p, ah  {  
                    font-size: 2em;
                    color: #ffdddd;
         }
         p, tgh  {  
                    font-size: 1em;
                    color: #ddffdd;
         }
      </style >
   </head>
   <body>
      <div id="wrapper">
      <section id="section">
         <div id="content">
            <div class="innertube">
               <p contenteditable id="ah" >Article Heading</p>
               <p contenteditable id="tgh">Text goes here:</p>
               <p>
                  <!--  <script>generateText(20)<script>  -->
               </p>
            </div>
         </div>
      </section>
      <div>
         <!--  Buttons Header  -->
         <button onclick="createArticleHeader()">Add New Article Heading</button>
         <button onclick="createTextArea()">Text goes here:</button>
      </div>
      <!--  Buttons Header  -->
      <script id="js" contenteditable >
         function createArticleHeader(text) {
           var p = document.createElement('p');
           p.innerHTML = text;
           p.setAttribute('contenteditable', 'true');
           var content = document.getElementById('content');
           content.appendChild(p);
         }
         createArticleHeader("ArticleHeader...");
         createTextArea();
      </script>
      <script id="js" contenteditable >
         function createTextArea(text) {
           var p.tgh = document.createElement('p.tgh');
           p.tgh.innerHTML = text;
           p.tgh.setAttribute('contenteditable', 'true');
           var content = document.getElementById('content');
           content.appendChild(p.tgh);
         }
         createTextArea("Text goes here:");
      </script>
   </body>
</html>

Sorry for the long Post .

Thanks for your help !

BILU KUMAR SAU · January 21, 2019

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Your Page Title</title>
	 <style >
         body {margin:0;padding:0;font-family: Sans-Serif;line-height: 1.5em;}
		 #section {padding-bottom: 10010px;margin-bottom: -10000px;float: left;width: 100%;}
         #wrapper {overflow: hidden;}
         #content {margin: 15px; margin-top: 0;}
		 #content h1{color: #000}
          #content p.gg {color: #ff0000;}
      </style>
</head>

<body>
	<section id="section">
		<div id="wrapper">
			<div id="content">
				<h1>Header text</h1>
				<p class="gg">Paragraph Text</p>
			</div>
		</div>	
	</section>
	
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	
	<script>		
        $(function(){
			$('p').addClass('gg')
		})
      </script>
</body>
</html>

vmars316 · January 21, 2019

Thanks BILU KUMAR SAU :

Plenty interesting .

Sorry , I should have specified , pure js only .

At this point I would rather not tackle learning jquery .

Thanks

Funce · January 21, 2019

A good reference page I could spy was here.

https://www.w3schools.com/howto/howto_js_add_class.asp

Funce · January 21, 2019

There's a lot of errors in your code:

JS

Variable names can't have .'s in them. Make them like p_tgh
createElement literally creates an element of that type. This isn't the behaviour you desire. <p.tgh></p.tgh>
CreateTextArea is used before its defined, switch the two script blocks around.
Your text is 'undefined' due to the fact you call CreateTextArea() without any arguments. Which means the text variable is undefined.
If you want to add default text (for when you click the button) you'll need to change the buttons. onclick=CreateTextArea("Sample Text")
Why are you calling the functions createTextArea and createArticleHeader on their own?

HTML

You're missing a closing <div> (I placed the closing div right before closing body)

CSS

Class Styling uses a . in CSS. Using p,ah styles ALL <p> and ALL <ah> (which isn't a tag I've ever seen) Same with p,tgh
You probably want p.ah which is for <p class="ah"></p>

Edited January 21, 2019 by Funce

vmars316 · January 21, 2019

Thanks;

"Your text is 'undefined' due to the fact you call CreateTextArea()
without any arguments.
Which means the text variable is undefined."
Sorry , I don't understand what you mean.
Pls , explain further.

The other errors , I'm working on them.

Thanks

Edited January 22, 2019 by vmars316
typo

Funce · January 22, 2019

function createTextArea(text) {
          var p_tgh = document.createElement("p");
          p_tgh.innerHTML = text;
          p_tgh.setAttribute("contenteditable", "true");
          var content = document.getElementById("content");
          content.appendChild(p_tgh);
        }

If you call this function with no arguments ie. createTextArea()

Then inside the function, the value of text is undefined. Because text hasn't been defined to be anything.

Funce · January 22, 2019

Alternatively, instead of my fix earlier, you can add a default parameter. This will fallback to a given value, should it not be included when the function is called.

function createTextArea(text= "Sample Text") {
          var p_tgh = document.createElement("p");
          p_tgh.innerHTML = text;
          p_tgh.setAttribute("contenteditable", "true");
          var content = document.getElementById("content");
          content.appendChild(p_tgh);
        }

Edited January 22, 2019 by Funce

vmars316 · January 23, 2019

Thanks Funce

Wow Thank you very much !

It works great !

http://vmars.us/ShowMe/DIY-Html-Master-WIP-01.html

I have a lot more to do , but you jump started me .

I will Post the final version here later.

Thanks

Sign In

How to connect css html and js ?

Recommended Posts

vmars316

Link to comment

Share on other sites

BILU KUMAR SAU

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity