Jump to content
vmars316

How to connect css html and js ?

Recommended Posts

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>
                  <!--  <script>generateText(20)<script>  -->
               </p>
            </div>
         </div>
      </section>
      <div>

and 

      <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>

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 ! 

Share this post


Link to post
Share on other sites
<!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>

 

Share this post


Link to post
Share on other sites

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 by Funce

Share this post


Link to post
Share on other sites

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 by vmars316
typo

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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 by Funce

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×