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 !
