I am doing a simple practical test on how to work with form elements in JavaScript, which I don't quite understand what is wrong. I checked the web browser's firebug and the console gives no error, which I thought was odd. How am I suppose to know what went wrong, if it didn't give errors. This is the most frustrating part as I need a compiler to easily detect and fix the errors. I use Notepad++ with the JS script embedded in the HTML file. Anything that would help me efficiently understand and do JavaScript the right way would be great by referring to a software that does better or website, whatever that will enhance my understanding of it because I still don't get it and keep getting a lot of things wrong and even worst, the web console shows nothing or when I make an obvious error.
When a user clicks on the button it will create a textbox underneath it, provided checked, if not, it will remove it and replace with textnode. Here's the code: JSfiddle
JavaScript:
function frm1
{
var form1 = document.getElementById("form1");
btnCreate.onClick = function()
{
if(cbCheck.checked)
{
var txt = form1.createElement("input");
txt.type = "text";
txt.setAttribute("text","Write Here!");
}
else if(!cbCheck.checked)
{
form1.removeChild(txt);
var para = form1.createElement("p");
para.createTextNode("Text Removed!");
para.setAttribute("style","color:red;");
form1.appendChild(para);
}
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practical 340 Review JS</title>
<meta charset="utf-8"/>
<script type="text/javascript" href="test.js">
function frm1
{
var form1 = document.getElementById("form1");
btnCreate.onClick = function()
{
if(cbCheck.checked)
{
var txt = form1.createElement("input");
txt.type = "text";
txt.setAttribute("text","Write Here!");
}
else if(!cbCheck.checked)
{
form1.removeChild(txt);
var para = form1.createElement("p");
para.createTextNode("Text Removed!");
para.setAttribute("style","color:red;");
form1.appendChild(para);
}
}
}
</script>
</head>
<body>
<div id="prob1">
<h1>Form Elements</h1>
<form id="form1">
<p>Checked?<input type="checkbox" name="cbCheck" value="Checked?"/></p>
<input type="button" value="Create" name="btnCreate"/>
</form>
</div>
<div id="prob2">
</div>
<div id="prob3">
</div>
</body>
</html>
One of the best tools you can use for debugging JavaScript is the built-in JS debuggers available in all modern browsers. I don't remember what the tab is named in Firefox, but in Chrome, there's a "sources" tab where you can set breakpoints in your code. When the browser executes that code, it will stop on that line and wait for you to tell it to continue. While the code is paused, you can inspect the values of variables etc.
Your code had a couple of problems, which I'll try to list. I've also created a new fiddle with working code.
http://jsfiddle.net/itsananderson/KTZ89/8/
btnCreate
and cbCheck
.form1.createElement
. Instead do document.createElement
. Same with createTextNode
Here's the updated JavaScript:
function frm1() {
var form1 = document.getElementById("form1");
var txt = document.createElement("input");
txt.type = "text";
txt.setAttribute("value","Write Here!");
var para = document.createElement("p");
para.appendChild(document.createTextNode("Text Removed!"));
para.setAttribute("style","color:red;");
form1['btnCreate'].onclick = function()
{
var cbCheck = form1['cbCheck'];
if(cbCheck.checked)
{
form1.appendChild(txt);
if (para.parentNode){
para.parentNode.removeChild(para);
}
}
else if(!cbCheck.checked)
{
if (txt.parentNode) {
txt.parentNode.removeChild(txt);
form1.appendChild(para);
}
}
}
}
frm1();