I do not know if my code even works because i cant get past the onlclick is null. i am trying to take text from a textarea and put it into a paragraph in HTML. With a check box. if the box is checked then it will clear the <p> tag. if unchecked it will leave the stuff in the p-tag and just make a new p-tag. thanks guys
window.onload = function() {
document.getElementById("paste").onclick = function() {
//var y = document.getElementById('paste').onclick
var paragraph = document.getElementById('box').value;
var x = document.getElementById("write");
var getInfo = document.getElementById('ParaWrite');
if (x.checked === true)
paragraph =+ "<p>"+paragraph+"</P>";
else
return;
getInfo.innterHTML === paragraph;
}
}
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TeXt BoX</title>
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="Textbox.css">
</head>
<body>
<h1></h1>
<form name="form1" id="form1">
<input type='checkbox' name='write' id='write' value='Check' />
<label for='write'>Append Paragraph</label><br/>
<textarea type="text" id="box"/></textarea>
<input type='button' value="Paste typed text" id="Paste"/>
</form>
<p id="ParaWrite"></p>
<script type="text/javascript" src="TextPara.js"></script>
</body>
</html>
I do not know if my code even works because i cant get past the onlclick is null. i am trying to take text from a textarea and put it into a paragraph in HTML. With a check box. if the box is checked then it will clear the <p> tag. if unchecked it will leave the stuff in the p-tag and just make a new p-tag. thanks guys
window.onload = function() {
document.getElementById("paste").onclick = function() {
//var y = document.getElementById('paste').onclick
var paragraph = document.getElementById('box').value;
var x = document.getElementById("write");
var getInfo = document.getElementById('ParaWrite');
if (x.checked === true)
paragraph =+ "<p>"+paragraph+"</P>";
else
return;
getInfo.innterHTML === paragraph;
}
}
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TeXt BoX</title>
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="Textbox.css">
</head>
<body>
<h1></h1>
<form name="form1" id="form1">
<input type='checkbox' name='write' id='write' value='Check' />
<label for='write'>Append Paragraph</label><br/>
<textarea type="text" id="box"/></textarea>
<input type='button' value="Paste typed text" id="Paste"/>
</form>
<p id="ParaWrite"></p>
<script type="text/javascript" src="TextPara.js"></script>
</body>
</html>
- are you pasting wrong html code? – pktangyue Commented Feb 5, 2013 at 4:09
- 1 How do you see this error exactly and on what line is it? – Explosion Pills Commented Feb 5, 2013 at 4:11
- its on ln 2 the error is from crome console "Uncaught TypeError: Cannot set property 'onclick' of null " – Austen H Commented Feb 5, 2013 at 4:13
- HTML fixed. thanks for pointing that out. – Austen H Commented Feb 5, 2013 at 4:13
-
you id is
Paste, but you usedocument.getElementById("paste")– pktangyue Commented Feb 5, 2013 at 4:15
2 Answers
Reset to default 3id name is case sensitive. Change your onclick assigning call to
document.getElementById("Paste").onclick =
change paste to Paste
Also it not =+ correct one is +=
Your selector is looking for an id paste, but your element has an id Paste:
var thisWillBeNull = getElementById('paste') ==> null
thisWillBeNull.onclick ==> TypeError: Cannot read property 'onclick' of null