How to connect css html and js ?


#1

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 !


#2

Oops ;
The code didn’t show properly . 2nd try either :slight_smile:
Here is the code:
http://vmars.us/ShowMe/MiniCode-Forum.html


#3

In the Chrome developer tools, there are two issues that get caught on page load itself:

Try fixing them and seeing if they help your code to run :slight_smile:

Also, when using createElement, you need to specify a valid HTML element like p, div, img, etc. What you are currently specifying is an element and its property:

var p.tgh = document.createElement('p.tgh');

You should change it to just be p to avoid one potential issue.


#4

Got it !
I have been working on it for a while and have gotten it to this stage :

<html>
  <!-- Go To https://www.google.com/search?num=20&newwindow=1&hl=en&authuser=0&ei=XetDXJKlG46GtQXV1J9Q&q=html5+css+js&oq=html5+css+js&gs_l=psy-ab.12..35i39j0j0i22i30l6j0i22i10i30j0i22i30.239301.283270..287372...2.0..0.112.3082.19j14…0…1…gws-wiz…6…0i71j0i13i30j0i8i13i30j0i131j0i20i263.RsTbO1V_iYY -->
  <!-- Go To file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/DIY-Html-Master-WIP-02.html -->

  <head>
    <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>
    <title>DIY-Html-Master-WIP-02.html</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Sans-Serif;
        line-height: 1.5em;
      }

      #header {
        background: #ccc;
        height: 100px;
        text-align: center;
      }

      #header,
      h1 {
        margin: 0;
        padding-top: 10px;
        text-align: center;
      }

      #wrapper {
        overflow: hidden;
      }

      #section {
        padding-bottom: 10010px;
        margin-bottom: -10000px;
        float: left;
        width: 100%;
      }

      #content {
        margin-left: 230px;
        /* Same as ‘nav’ width */
      }

      .innertube {
        margin: 15px;
        /* Padding for content */
        margin-top: 0;
      }

      p {
        color: #000555;
      }

      #p_ah {
        color: #555555;
        text-align: center;
        font-size: 18px
      }

      #p_tgh {
        color: #999999;
        text-align: left;
        font-size: 12px font-size: 12px
      }

      #nav-01 {
        padding-bottom: 10010px;
        margin-bottom: -10000px;
        float: left;
        width: 230px;
        margin-left: -100%;
        background: #eee;
      }

      nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      nav ul a {
        color: darkgreen;
        text-decoration: none;
      }

      #footer {
        clear: left;
        width: 100%;
        background: #ccc;
        text-align: center;
        padding: 4px 0;
      }

    </style>
  </head>

  <body>
    <header id=“header”>
      <div class=“innertube”>
        <br>
        <h1 contenteditable>DIY-Html-Master-WIP-02.html</h1>
      </div>
    </header>
    <div id=“wrapper”>
      <section id=“section”>
        <div id=“content”>
          <div class=“innertube”>
            <!-- div.section.content.innertube.p -->
            <p contenteditable id=“p_ah”>Article Heading</p>
            <p contenteditable id=“p_tgh”>Text paragraph</p>
          </div>
        </div>
      </section>
      <nav id=“nav-01”>
        <div class=“innertube”>
          <h1 contenteditable>URL Links</h1>
          <ul>
            <li><a id=la1 href=“file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-01.html”>Link 1</a></li>
            <li><a id=la2 href=“file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-02.html”>Link 2</a></li>
            <li><a id=la3 href=“file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-03.html”>Link 3</a></li>
            <li><a id=la4 href=“file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/Hey-Buddy.html”>Hey Buddy !</a></li>
          </ul>
        </div>
      </nav>
    </div>
    <footer id=“footer”>
      <div class=“innertube”>
        <p contenteditable>Footer…</p>
      </div>
    </footer>
    <div>
      <!-- Buttons Header createNewLink -->
      <button onclick=“createArticleHeading()”>Add New Article Heading</button>
      <button onclick=“createTextArea()”>Add New Text Area</button>
    </div>
    <!-- Buttons Header -->
    <script type=‘text/javascript’>
      var TextParagraph = “Text Paragraph”
      var ArticleHeading = “Article Heading”

    </script>
    <script id=“js” contenteditable>
      function createTextArea() {
        var p_tgh = document.createElement(“p”);
        p_tgh.innerHTML = TextParagraph;
        p_tgh.setAttribute(“contenteditable”, “true”);
        var content = document.getElementById(“content”);
        content.appendChild(p_tgh);
      }

    </script>
    <script id=“js” contenteditable="">


    </script>
    <script id=“js” contenteditable>
      function createArticleHeading() {
        var p_ah = document.createElement(‘p’);
        p_ah.innerHTML = ArticleHeading;
        p_ah.setAttribute(‘contenteditable’, ‘true’);
        var content = document.getElementById(‘content’);
        content.appendChild(p_ah);
      }

    </script>
  </body>

</html>

Can test it here :slight_smile: view-source:http://vmars.us/ShowMe/DIY-Html-Master-WIP-02.html
But still have a prob with ‘created TextArea and ArticleArea’
loose their styles when created .
Should I put this as a separate ?
Thanks


#5

zomg! what have you done to this poor code! :slight_smile:

I’ll see if I can fix. In the mean time, keep in mind that you can put code between three backticks to format it :wink:

```
your code here
```

#6

I’ll see if I can fix.
Awesome, Thanks
In the mean time, keep in mind that you can put code between three backticks to format it .
Oh ! Thanks. I’ll try to remember…


#7

I just modified the page slightly .
http://vmars.us/ShowMe/DIY-Html-Master-WIP-02.html
Just add a document.URL to top of page .
Thanks