Display the Value of the Checkbox. The message changes while the user checked or unchecked the checkbox.
I have this code but it is arranged in alphabetical manner everytime i check/uncheck a box which should not be. It should be displayed in a manner on how the user selected the checkboxes.
Javascript Code:
<script>
function callMe(x)
{
var changeableTags=document.getElementsByClassName(x.getAttribute("title"));
if(x.checked == true)
{
for(i=0; i<changeableTags.length; i++)
{
changeableTags[i].style.display="initial";
}
}
else{
for(i=0; i<changeableTags.length; i++)
{
changeableTags[i].style.display="none";
}
}
}
</script>
HTML Code:
<body>
<input type="checkbox" title="nr_1" name="abccheck" checked onChange="callMe(this)"> A <br>
<input type="checkbox" title="nr_2" name="abccheck" checked onChange="callMe(this)"> B <br>
<input type="checkbox" title="nr_3" name="abccheck" checked onChange="callMe(this)"> C <br>
<p class="nr_1" style="display:initial">A </p>
<p class="nr_2" style="display:initial">B </p>
<p class="nr_3" style="display:initial">C </p>
</body>
Hope code below help your issue.
function handleClick(cb) {
var idCheckBox = cb.getAttribute('id');
var changeableTags=document.getElementsByClassName(idCheckBox);
if(cb.checked === true){
console.log("true");
for(i=0; i<changeableTags.length; i++)
{
changeableTags[i].style.display="initial";
}
}else{
console.log("false");
for(i=0; i<changeableTags.length; i++)
{
changeableTags[i].style.display="none";
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<label><input type='checkbox' checked onclick='handleClick(this);' id='1'>Checkbox 1</label>
</div>
<div>
<label><input type='checkbox' checked onclick='handleClick(this);' id='2'>Checkbox 2</label>
</div>
<div>
<label><input type='checkbox' checked onclick='handleClick(this);' id='3'>Checkbox 3</label>
</div>
<div>
<p class="1" style="display:initial">ID 1 Checked </p>
</div>
<div>
<p class="2" style="display:initial">ID 2 Checked </p>
</div>
<div>
<p class="3" style="display:initial">ID 3 Checked </p>
</div>
</body>
</html>
It is important to structure one's HTML markup with reference to the task at hand. Consider the following revision of your example code...
<input id="A" type="checkbox" title="nr_1" name="abccheck" checked> <br>
<input id="B" type="checkbox" title="nr_2" name="abccheck" checked> <br>
<input id="C" type="checkbox" title="nr_3" name="abccheck" checked> <br>
<div id="display-container">
<p id="pA">A</p>
<p id="pB">B</p>
<p id="pC">C</p>
</div>
Each input[type=checkbox] and each corresponding P element has a unique HTML id attribute assigned. The paragraphs are placed inside a container for convenience.
The ids of clicked checkbox elements can be scrutinised by JavaScript in the following way...
First, add an event listener to each target element...
/* collect all checkboxes */
var cBoxes = document.querySelectorAll(
"input[name=abccheck]"
};
/* loop and add an event listener
to each element in the collection */
[].slice.call(cBoxes).forEach(function(cb) {
cb.addEventListener(
"click", clickMe, false
);
});
The clickMe() function will be called whenever an input with name=abccheck is clicked. Why add and event listeners here?
To find out which element has been clicked you can poll the event's .target in the clickMe() function...
function clickMe(event) {
var boxID = event.target.id;
// i.e. boxID = A, B or C
}
Now, rather than showing or hiding HTML P elements the boxID variable can be used to find, insert or remove the corresponding P into the div#display-container element, like so...
function clickMe(event) {
var boxID = event.target.id;
var container = document.getElementById(
"display-container"
);
/* look for a corresponding P-element */
var pCheck = document.getElementById(
"p" + boxID
);
/* variable to hold newly created P-element */
var pTag;
/* if the corresponding P-element
exists then remove it, otherwise
create and add it */
if (pCheck) {
/* remove */
container.removeChild(pCheck);
} else {
/* create new P-element */
pTag = document.createElement("p");
/* add unique id to new P */
pTag.id = "p" + boxID;
/* add text to new P */
pTag.textContent = boxID;
/* insert into #display-container */
container.appendChild(pTag);
}
}
Each time a checkbox is clicked the corresponding paragraph will be removed/added from div#display-container - in the order the events occurred.
JSFIDDLE here.
See MDN for more info about...
Document.querySelectorAll()
Element.addEventListener()
Event.target
Node.removeChild()
Node.appendChild()
Document.createElement()
[].slice.call()
Related
How do I gray out a list item when it's checkbox is checked?
The current code that I have takes the text that is typed in a textbox to a function called createNote when the add button is clicked. In the function, the text is added to a list item which is then added to an unordered list. The list item has a checkbox inside it. I want the list item to become grayed out and have a strike-through when its checkbox is checked. I cannot use jquery or other javascript libraries to do this.
This is what I have currently:
<head>
<meta charset ="UTF-8">
<meta name="description" content="Website">
<title>Note Manager</title>
<script>
function createNote (form) {
//Gets the text for the note from the input box
var noteText = form.inputbox.value;
//Creates the note and adds the text to it
var note = document.createElement("li");
note.innerHTML = noteText
//Creates checkbox
var noteCheck = document.createElement("input")
noteCheck.type = "checkbox"
noteCheck.classList.add("checkcheck")
//Appends checkbox to the note
note.appendChild(noteCheck)
//Gets the unordered list and appends the note to it
document.getElementById("abc").appendChild(note)
}
function grayCheckedItems(){
//Gets the unordered list
var list = document.getElementById("abc");
//Gets list items from unordered list
var listItems = list.getElementsByTagName("li");
//Incorrect part. Needs to cycle through the list items and gray out the items that have checked checkboxes
for(var i = 0; i < listItems.length; i++){
var chekbox = listItems[i].getElementsByTagName("input")
if(chekbox.checked == true){
listItems[i].classList.add("completedItem")
}
}
}
</script>
<style>
.completedItem{
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<form name="myform">
Enter a note: <br/>
<input type="text" name="inputbox">
<input type="button" name="button" Value="Add" onClick="createNote(this.form)">
</form>
<main>
<h2>Task List: </h2>
<ul id="abc" onchange="grayCheckedItems(this.ul)">
</ul>
</main>
</body>
How would I do this? The current code does not gray out the list items that are checked. I tried looking online for similar problems but all of them were different because the checkbox was created by typing it out in html. In this problem, all of the checkboxes are created using javascript.
I added an onclick handler to your checkbox creation routine, which adds or removes your .completeItem class. Have a look below.
function createNote(form) {
//Gets the text for the note from the input box
var noteText = form.inputbox.value;
//Creates the note and adds the text to it
var note = document.createElement("li");
note.innerHTML = noteText
//Creates checkbox
var noteCheck = document.createElement("input")
noteCheck.type = "checkbox"
noteCheck.classList.add("checkcheck")
noteCheck.onclick = function() {
if (this.checked == true) {
this.parentNode.classList.add("completedItem");
} else {
this.parentNode.classList.remove("completedItem");
}
}
//Appends checkbox to the note
note.appendChild(noteCheck)
//Gets the unordered list and appends the note to it
document.getElementById("abc").appendChild(note)
}
function grayCheckedItems() {
//Gets the unordered list
var list = document.getElementById("abc");
//Gets list items from unordered list
var listItems = list.getElementsByTagName("li");
//Incorrect part. Needs to cycle through the list items and gray out the items that have checked checkboxes
for (var i = 0; i < listItems.length; i++) {
var chekbox = listItems[i].getElementsByTagName("input")
//console.log(chekbox)
}
}
.completedItem {
color: gray;
text-decoration: line-through;
}
<form name="myform">
Enter a note: <br/>
<input type="text" name="inputbox">
<input type="button" name="button" Value="Add" onClick="createNote(this.form)">
</form>
<main>
<h2>Task List: </h2>
<ul id="abc" onchange="grayCheckedItems(this.ul)">
</ul>
</main>
change output html in li to
<input type="checkbox"/><label>Test</label>
and this css
input[type=checkbox]:checked + label {
color: gray;
}
Don't use inline JS it makes your HTML ugly and has some disadvantages, here is a shorter answer
document.querySelector("#abc").onchange = function(e) {
let textElement = e.target.previousElementSibling;
e.target.checked ? textElement.classList.add("done") :
textElement.classList.remove("done");
};
document.querySelector("input[name='button']").onclick = function() {
document.querySelector("#abc").innerHTML += `
<li><span>${this.previousElementSibling.value}</span> <input type="checkbox"></li>
`;
}
span.done {
color: gray;
text-decoration: line-through;
}
<form name="myform">
Enter a note: <br/>
<input type="text" name="inputbox">
<input type="button" name="button" Value="Add">
</form>
<main>
<h2>Task List: </h2>
<ul id="abc">
</ul>
</main>
The attached code properly returns the id and the value of the checked box.
I need to get the id of the enclosing div so that I can set the display attribute to hidden.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
<form>
<div id="boatdiv1"><input type="checkbox" name="cb" id="boat1" value="123" onclick='doClick();'><label for='boat1'>boat1</label><br></div>
<div id="boatdiv2"><input type="checkbox" name="cb" id="boat2" value="456" onclick='doClick();' onclick='doClick();'><label for='boat2'>boat2</label><br></div>
<div id="boatdiv3"><input type="checkbox" name="cb" id="boat3" value="789" onclick='doClick();'><label for='boat3'>boat3</label><br></div>
</form>
</div>
</body>
<script>
function doClick() {
var checkedValue = null;
var inputElements = document.getElementsByName('cb');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
checkedValue = inputElements[i].value;
checkedID = inputElements[i].id;
console.log('checked id = '+checkedID);
console.log('value = '+checkedValue);
break;
}
}
ParentID = checkedID.offsetParent;
console.log(ParentID.id);
}
</script>
</html>
I expected that ParentID would return the id. Instead, I get an error "TypeError: undefined is not an object (evaluating 'ParentID.id')"
You need to remove the onevent attributes and use either an onevent property or event listener instead:
<input doClick()...>
This is basically what you need to hide the parent element of clicked element (event.target):
event.target.parentElement.style.display = 'none';
Demo
Details commented in demo
// Reference the form
var form = document.forms[0];
// Register the form to the change event
form.onchange = hide;
/*
Called when a user unchecks/checks a checkbox
event.target is always the currently clicked/changed tag
Get the changed parent and set it at display: none
*/
function hide(e) {
var changed = e.target;
changed.parentElement.style.display = 'none';
console.log(`Checkbox: ${changed.id}: ${changed.value}`);
console.log(`Parent: ${changed.parentElement.id}`);
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="wrapper">
<form>
<div id="boatdiv1"><input type="checkbox" name="cb" id="boat1" value="123"><label for='boat1'>boat1</label><br></div>
<div id="boatdiv2"><input type="checkbox" name="cb" id="boat2" value="456"><label for='boat2'>boat2</label><br></div>
<div id="boatdiv3"><input type="checkbox" name="cb" id="boat3" value="789"><label for='boat3'>boat3</label><br></div>
</form>
</div>
</body>
</html>
Use parentNode - also note that checkedID is a string, so it doesn't have a parent. Use getElementById to get the checked input:
ParentID = document.getElementById(checkedID).parentNode;
console.log(ParentID.id);
Fiddle link here
<script>
function show1() {
if (document.getElementById("check1").checked == true) {
document.getElementById("info1").style.display="inline";
} else {
if (document.getElementById("check1").checked == false)
document.getElementById("info1").style.display="none";
}
}
</script>
<input type="checkbox" id="check1" name="check1" value="" onclick="show1();">
<style>
#info1, #info2 {
display: none;
}
</style>
What I need to do about 20 times is to show hidden fields info1, info2 etc. when check1, check2 is selected.
First it is always a good idea to find handlers in Javascript instead of inline events.
Second give all your inputs the same class to do so.
Have a data-* attribute that will store the corresponding input message.
You HTML would look like
HTML
<div class="container">
<div>
<input type="checkbox" id="check1" name="check1" value="" data-id="info1" class="checkbox"/>
<label for="check1">Click here for more information</label>
</div>
<div id="info1" class="info">Hidden information here will now appear onclick check1</div>
</div>
<div class="container">
<div>
<input type="checkbox" id="check2" name="check3" value="" data-id="info2" class="checkbox"/>
<label for="check2">Click here for more information</label>
</div>
<div id="info2" class="info">Hidden information here will now appear onclick check2</div>
</div>
<div class="container">
<div>
<input type="checkbox" id="check3" name="check3" value="" data-id="info3" class="checkbox"/>
<label for="check3">Click here for more information</label>
</div>
<div id="info3" class="info">Hidden information here will now appear onclick check3</div>
</div>
JS
// Get all the checkbox elements
var elems = document.getElementsByClassName('checkbox');
// iterate over and bind the event
for(var i=0; i< elems.length; i++) {
elems[i].addEventListener('change', show);
}
function show() {
// this corresponds to the element in there
// Get the info attribute id
var infoId = this.getAttribute('data-id');
if (this.checked) {
document.getElementById(infoId).style.display = "inline";
} else {
document.getElementById(infoId).style.display = "none";
}
}
Check Fiddle
This is one way of doing this.
I've updated your jsfiddle:
document.addEventListener('change', function(e) {
var id = e.target.getAttribute('data-info-id');
var checked = e.target.checked;
if (id) {
var div = document.getElementById(id);
if (div) div.style.display = checked ? 'block' : 'none';
}
});
Instead of creating an if ... else block for every checkbox, which becomes hard to maintain, I've associated every check with its DIV via the custom attribute data-info-id, which is set to the id of the aforementioned DIV.
I bind the 'change' event to the document (event delegation) and when it fires I check the source element has a data-info-id attribute. Then, I get the DIV with such id and show or hide it based on the value of the checked property.
The obvious advantage of doing it this way, via custom attributes, is that you don't depend of the position of the div, and you can change which checks shows what DIV in a declarative way, just changing the HTML.
Maybe you are looking for a javascript only solution, but there's a pretty simple solution in CSS
HTML
<div>
<input type="checkbox" id="check1" name="check1" value="" />
<label for="check1"> Click here for more information</label>
<div id="info1">Hidden information here will now appear onclick </div>
</div>
<div>
<input type="checkbox" id="check2" name="check2" value=""/>
<label for="check2"> Click here for more information</label>
<div id="info2">Hidden information here will now appear onclick </div>
</div>
CSS
input[type=checkbox] ~ div {
display: none;
}
input[type=checkbox]:checked ~ div {
display: block;
}
Fiddle here
Looks for an input with the data-enable attribute that matches to the id of the element being shown/hidden.
HTML
<input type="checkbox" data-enable="info0" name="check[]"/>
<input type="text" id="info0" name="info[]"/>
Javascript
function toggleEl(evt) {
var checkbox = evt.target;
var target = checkbox.getAttribute('data-enable');
var targetEl = document.getElementById(target);
// if checked, use backed-up type; otherwise hide
targetEl.type = (checkbox.checked)
? targetEl.getAttribute('data-type')
: 'hidden';
}
var inputs = document.getElementsByTagName('input');
for(var i=0,l=inputs.length;i<l;i++) {
var input = inputs[i];
var target = input.getAttribute('data-enable');
if(target!==null) {
var targetEl = document.getElementById(target);
// back-up type
targetEl.setAttribute('data-type',targetEl.type);
// hide it if the checkbox is not checked by default
if(!input.checked)
{ targetEl.type = 'hidden'; }
// add behavior
input.addEventListener('change',toggleEl,false);
}
}
Check out the following JSFiddle .
//<![CDATA[
// common.js
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
if(IE >= version)bod.className = className;
}
function E(e){
return doc.getElementById(e);
}
//]]>
//<![CDATA[
// adjust numbers as needed
for(var i=1; i<2; i++){
(function(i){
E('check'+i).onclick = function(){
var a = E('info'+i).style.display = this.checked ? 'block' : 'none';
}
})(i);
}
//]]>
I want the following functionality in my webpage :-
when the add button is clicked, an entire div should get appended to a span. To achieve this I have attempted the below, but it does not seem to be working. Please explain why and how can i get this done.
<html>
<head>
<script type="text/javascript">
function add()
{
var details=document.getElementById('education');
var eachDetail=document.getElementById('fdetails_edu_div');
alert(details.getAttribute('id'));
alert(eachDetail.getAttribute('id'));
var x=details.appendChild(eachDetail);
alert(x);
}
</script>
</head>
<body>
<span id="education">
<div id="fdetails_edu_div">
<label>EDUCATIONAL QUALIFICATION
<span class="small">Click on 'ADD' to add more qualifiaction details</span>
</label>
<button type="button" name="addqualifiaction" onclick="add()">ADD</button>
<br>
<br>
<br>
<label>Degree
<span class="small">School/Board</span>
</label>
<p>
<input type="text" name="school_board" id="fdegree" size="30" maxlength="30" value="none" class="fprjtit"/>
</p>
<br>
<br>
<br>
<label>Year
<span class="small">Year of Passing</span>
</label>
<p>
<input type="text" name="pass_year" id="fdegree" size="30" maxlength="30" value="none" class="fprjtit"/>
</p>
<br>
<br>
<br>
<label>Max Marks
<span class="small">maximum marks</span>
</label>
<p>
<input type="text" name="max_marks" id="fdegree" size="30" maxlength="30" value="none" class="fprjtit"/>
</p>
</div>
</span>
</body>
</html>
now when i click on the add button the div with the id "fdetails_edu_div" should get appended as a child, preferably to the bottom, of the span with the id "education".
What is wrong with the below and how can it be corrected?
I think you need to clone the div with id fdetails_edu_div
Use the following code
var x = 1;
function add() {
var container = document.getElementById('education');
var detail = document.getElementById('fdetails_edu_div');
var clone = detail.cloneNode(true);
clone.id = "fdetails_edu_div" + x;
x++;
container.appendChild(clone);
}
Notice, I create a new id for the newly created div.
Also note, I have removed the Add button from within the div fdetails_edu_div and placed it outside (you don't want the add button to repeat, do you?)
See working fiddle
The usage of appendChild() is move an element from one element to another,check this.
Based on your code, you move the 'eachDetail' to 'details', but 'eachDetail' is already there. It works like you remove the 'eachDetail' and then add it again in the 'details', so nothing happens.
You can replace 'details' with another element, a new span.
Try this code
function add()
{
var arr = [];
var n = 0;
var details=document.getElementById('education');
var eachDetail=document.getElementById('fdetails_edu_div');
alert(details.getAttribute('id'));
alert(eachDetail.getAttribute('id'));
node = document.getElementById("fdetails_edu_div");
while (node.firstChild) {
arr[n++] = node.firstChild;
node.removeChild(node.firstChild);
}
for(var i = 0; i < n; ++i) {
details.appendChild(arr[i]);
}
alert(eachDetail.parentNode.getAttribute('id'));
}
Above code first removes the child nodes of div with id fdetails_edu_div, saves them temporarily and later appends them to span with id education. You can check this with alert(eachDetail.parentNode.getAttribute('id'));
Here is the code How can I disable the submit button. It doesn't appear to be working for us.I want to be able to have the button disabled when the page is brought up. Do you have any ideas on how we can fix this?
// Script 10.5 - pizza.js
// This script creates a master checkbox.
// Function called when the checkbox's value changes.
// Function toggles all the other checkboxes.
function toggleCheckboxes() {
'use strict';
// Get the master checkbox's value:
var status = document.getElementById('toggle').checked;
// Get all the checkboxes:
var boxes = document.querySelectorAll('input[type="checkbox"]');
// Loop through the checkboxes, starting with the second:
for (var i = 1, count = boxes.length; i < count; i++) {
// Update the checked property:
boxes[i].checked = status;
} // End of FOR loop.
}
} // End of toggleCheckboxes() function.
function disabled () {
if ('')
{document.getElementById('submit').disabled = false;}
else
{document.getElementById('submit').disabled = true;}
// Establish functionality on window load:
window.onload = function() {
'use strict';
// Add an event handler to the master checkbox:
document.getElementById('toggle').onchange = toggleCheckboxes;
document.getElementById('submit').disabled = disabled;
};
Here is the html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Operating Systems</title>
<!--[if lt IE 9]>
<script </script>
<![endif]-->
</head>
<body>
<!-- Script 10.4 - pizza.html -->
<form action="#" method="post" id="theForm">
<fieldset><legend>Create Your Own Pizza</legend>
<div><label>Toppings</label> <input type="checkbox" name="toggle" id="toggle" value="toggle"> All/None
<p><input type="checkbox" name="ham" id="ham" value="ham"> Ham
<input type="checkbox" name="mushrooms" id="mushrooms" value="mushrooms"> Mushrooms
<input type="checkbox" name="onions" id="onions" value="onions"> Onions
<input type="checkbox" name="sausage" id="sausage" value="sausage"> Sausage
<input type="checkbox" name="greenPeppers" id="greenPeppers" value="greenPeppers"> Green Peppers </p>
</div>
<input type="checkbox" name="terms" id="terms" required> I agree to the terms, whatever they are.
<input type="submit" name="submit" value="Submit" id="submit">
</fieldset>
<div id="output"></div>
</form>
<script src="js/utilities.js"></script>
<script src="js/pizza.js"></script>
<script src="js/modal.js"></script>
</body>
</html>
There are a few things that could be improved:
You should close all your input tags to avoid any issues rendering the HTML document.
The for-loop should run until i < (boxes.length - 1) to avoid selecting the ToS checkbox. Or you could target just the toppings with querySelectorAll('p input[type="checkbox"]') and start from var i = 0.
The closing bracket for disable() is between the closing brackets for the for-loop andtoggleCheckboxes().
In disabled() #terms is selected, you want to check if it is checked or not. If it is, enable the submit button (disabled = false), else disable it (disabled = true).
Finally, you'll want to assign disabled() to the #terms' onclick function so it is called every time the checkbox is toggled.
Demo: http://jsfiddle.net/4Rwfs/1
HTML
<form action="#" method="post" id="theForm">
<fieldset>
<legend>Create Your Own Pizza</legend>
<div>
<label>Toppings</label>
<input type="checkbox" name="toggle" id="toggle" value="toggle">All/None</input>
<p>
<input type="checkbox" name="ham" id="ham" value="ham">Ham</input>
<input type="checkbox" name="mushrooms" id="mushrooms" value="mushrooms">Mushrooms</input>
<input type="checkbox" name="onions" id="onions" value="onions">Onions</input>
<input type="checkbox" name="sausage" id="sausage" value="sausage">Sausage</input>
<input type="checkbox" name="greenPeppers" id="greenPeppers" value="greenPeppers">Green Peppers</input>
</p>
</div>
<input type="checkbox" name="terms" id="terms" required> I agree to the terms, whatever they are.</input>
<input type="submit" name="submit" value="Submit" id="submit"></input>
</fieldset>
<div id="output"></div>
</form>
JavaScript
// Script 10.5 - pizza.js
// This script creates a master checkbox.
// Function called when the checkbox's value changes.
// Function toggles all the other checkboxes.
function toggleCheckboxes() {
'use strict';
// Get the master checkbox's value:
var status = document.getElementById('toggle').checked;
// Get all the checkboxes:
var boxes = document.querySelectorAll('p input[type="checkbox"]');
// Loop through the checkboxes, starting with the second:
for (var i = 0, count = boxes.length; i < count; i++) {
// Update the checked property:
boxes[i].checked = status;
} // End of FOR loop.
} // End of toggleCheckboxes() function.
function disabled () {
if (document.getElementById('terms').checked)
{document.getElementById('submit').disabled = false;}
else
{document.getElementById('submit').disabled = true;}
}
// Establish functionality on window load:
window.onload = function() {
'use strict';
// Add an event handler to the master checkbox:
document.getElementById('toggle').onchange = toggleCheckboxes;
document.getElementById('submit').disabled = true;
document.getElementById('terms').onchange = disabled;
};
If you want to disable the submit button on page load, try adding this:
document.getElementById('submit').disabled = true;
The following line doesn't make sense unless the disabled function returns a boolean:
document.getElementById('submit').disabled = disabled;
For example, this would work if you wanted the submit button to disable on click.
document.getElementById('submit').onclick = disabled;
The problem is not in the disable line.
What did you trying to do with if('') { ? Also, in your onload function, there is a line :
'use strict';
What are you trying to do again?
See : http://jsfiddle.net/ByKEJ/
How to disable html button using JavaScript?
I think this previous solution can help you dynamically disable something