Develop Reference

Adding onClick function to select elements

I have a select tag of dynamically added elements. I need to add an event listener to each of the elements in the select tag except the first which:
adds the text of the element to a list,
makes the focus of the list the first element again, and
removes or hides the clicked element.
The first element is a 'none' element which doesn't need any event listener.
I've tried something like
for (var i = 0; i < array.length; i++)
{
var name = array[i];
var selectElement = document.getElementById(selectElementId);
addToSelectNode(document.getElementById(selectElementId), name);
var thisNode = selectElement.childNodes[i];
if (thisNode.value != "none")
{
thisNode.addEventListener("click", function(event)
{
appendNodeToList("artist-list", i);
selectElement.selectedIndex = 0;
selectElement.remove(selectElement.i);
selectElement.style.display = "none";
});
}
}
function addToSelectNode(element, optionText)
{
var newSelectElement = document.createElement("option");
newSelectElement.text = optionText;
element.add(newSelectElement);
}
function appendNodeToList(listId, text)
{
var newNode = document.createElement("LI");
var textNode = document.createTextNode(text);
newNode.appendChild(textNode);
document.getElementById(listId).appendChild(newNode);
}
Didn't work at all though

A few hours later I've solved my own question. The problem stemmed from trying to remove items in the select tag which just wasn't working - I'm nut sure if it's possible but making it disabled solved it. Anyway here's the result.
HTML:
<select id="artist-select-list">
<option value="none">none</option>
</select>
JavaScript:
window.onload = function()
{
var dropdown = document.getElementById("sampleDropdown");
var n = array.length;
// Loop to add to <select> dropdown
for (var i = 1; i <= n; i++)
{
addToSelectNode(dropdown, array[i - 1]);
}
// Loop to add id's to each element in the dropdown
for (var i = 0; i <= n; i++)
{
dropdown[i].id = "selectNum" + i;
}
// Loop to add event listener
for (var i = 0; i < dropdown.length; i++)
{
dropdown[i].addEventListener("click", function(event)
{
// Regardless of which option the user clicks move shown option to "none" (first index in dropdown)
dropdown.selectedIndex = 0;
if (event.target.id != "selectNum0")
{
// Disable once clicked
event.target.disabled = true;
// Do other things here in relation to event.target
}
});
}
}
var array =
[
"sampleText1", "sampleText2"
];
function addToSelectNode(element, optionText)
{
var newSelectElement = document.createElement("option");
newSelectElement.text = optionText;
element.add(newSelectElement);
}

Select element is not appending addEventListener

I'm trying to create a select element and add an 'input' event to it. Everything with JavaScript as showed below:
function showSelectedOption(str) {
alert(str);
}
var list = document.createElement("select");
list.id = "listId";
list.addEventListener('input', showSelectedOption(this.selectedIndex));
for (var i = 0; i < 3; i++) {
var option = document.createElement("option");
option.value = "none";
option.text = "text";
list.appendChild(option);
}
document.body.appendChild(list);
However, when I inspect the element the input event is not appended.
How can I solve this issue?

A couple of issues.
You are not binding the showSelectedOption function, you instead call it and use its returned value (which is undefined) as the event handler.
So pass showSelectedOption without calling it.
Then you will have to find the selectedIndex of that element inside the method, by using the event passed to the function when the input event is triggered.
function showSelectedOption(event) {
var element = event.target,
index = element.selectedIndex,
value = element.options[index].value;
alert(value);
}
var list = document.createElement("select");
list.id = "listId";
list.addEventListener('input', showSelectedOption);
for (var i = 0; i < 3; i++) {
var option = document.createElement("option");
option.value = "none";
option.text = "text";
list.appendChild(option);
}
document.body.appendChild(list);

You can make this work by using setAttribute instead and set the value of the oninput attribute to be the string (not the function) showSelectedOption(this.selectedIndex).
function showSelectedOption(str) {
alert(str);
}
var list = document.createElement("select");
list.id = "listId";
list.setAttribute('oninput', "showSelectedOption(this.selectedIndex)");
for (var i = 0; i < 3; i++) {
var option = document.createElement("option");
option.value = "none";
option.text = "item"+i;
list.appendChild(option);
}
document.body.appendChild(list);

Not able to replace checkboxes Javascript

I am creating a mozilla add on for a web page. Using the attached Javascript code I am able to create checkbox. The checkbox should replace with other checkbox depending on the selected value in dropdown. Onclick on dropdown I am calling fun_sub_cat function which is creating checkbox and also replacing but it replace only once. For eg: If there are 2 option in dropdown 1 and 2, Selecting option 1 checkbox values should 1,2,3 and for option 2 checkbox values should be a,b,c.
On Click function it creates checkbox and changing the value for the first time replaces the checkbox value as well however when I click 3rd time on dropdown or change the value, it does not work. It attains the 2nd time changed checkbox values.
var k = 0;
function fun_cat_sub() {
console.log("Value Changed");
var Myarry = "";
if(document.getElementById('sub_cat').value == 'Password Reset'){
Myarry = check_list1;
if(k == 0){
console.log("creating checkbox for the first time");
k = k+1;
for (var i = 0; i < Myarry.length; i++) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkBox"+i;
checkbox.value = Myarry[i];
checkbox.class = "_class";
checkbox.appendAfter(br_3);
var lab_chk = document.createElement('label');
lab_chk.innerHTML = Myarry[i];
lab_chk.id = "lab_chk"+i;
lab_chk.value = Myarry[i];
lab_chk.style.marginLeft = "10px";
lab_chk.appendAfter(checkbox);
document.createElement('br').appendAfter(lab_chk);
}
}
else if(k != 0){
console.log("I am in 1st Loop");
checking(Myarry);
}
}
else {
Myarry = check_list2;
console.log("I am in 2nd Loop");
checking(Myarry);
}
}
function checking(Myarry){
console.log(Myarry.length);
for (var i = 0; i < Myarry.length; i++) {
var old_chk = document.getElementById('checkBox'+i);
var new_chk = document.createElement("input");
new_chk.type = "checkbox";
new_chk.id = "checkBox"+i;
new_chk.value = Myarry[i];
old_chk.parentNode.replaceChild(new_chk, old_chk);
var old_lab_chk = document.getElementById('lab_chk'+i);
var new_lab_chk = document.createElement('label');
new_lab_chk.innerHTML = Myarry[i];
new_lab_chk.style.marginLeft = "10px";
old_lab_chk.parentNode.replaceChild(new_lab_chk, old_lab_chk);
}
}

Passing One's Self to OnClick Event JavaScript

The on click event that I add to an input in javascript isn't working in the proper manner.
My code so far looks like so:
function order(option) {
if(option.checked) {
document.getElementId("col_order").value = document.getElementById("col_order").value + " " + option.value;
}
}
...//somewhere further down
for(var i = 0; i < options.length; i++) {
var check = document.createElement("input");
var label = document.createElement("label");
var description = document.createTextNode(options[i]);
check.type = "checkbox";
check.name = "order_list[]";
check.value = options[i];
check.onclick = "order(check)"; //Problem here
label.appendChild(check);
label.appendChild(description);
element.appendChild(label);
}
I have also tried:
check.onclick = (function() { var option = check; return function() {order(option);}})();
The problem that I am having is the check.onlick line of code. When I add this with normal HTML:
<input type = "checkbox" name = "order_list[]" onclick = "order(this)" value = "randVal">randVal</input>
I don't have any problem whatsoever; the method executes with the intended results. Any thoughts?
Let me clarify: I make it to the order function just fine, but I never get into the if statement, even though the checkbox was just clicked

Use addEventListener instead, and even if it looks like it should work, you're overwriting the same variables on each iteration as there is no closure in for loops, so I would probably add a closure to avoid issues.
For a checkbox you would listen for the change event, not click
for(var j = 0; j < options.length; j++) {
(function(i) {
var check = document.createElement("input");
var label = document.createElement("label");
var description = document.createTextNode(options[i]);
check.type = "checkbox";
check.name = "order_list[]";
check.value = options[i];
check.addEventListener('change', function() {
if (this.checked) {
var col_order = document.getElementById("col_order");
col_order.value = col_order.value + " " + this.value;
}
}, false);
label.appendChild(check);
label.appendChild(description);
element.appendChild(label);
})(j);
}
FIDDLE

check.onclick = "order(check)"; assigns a String as an on-click handler. That doesn't work; the browser expects a function there:
check.onclick = function() {
order(check);
}

Checkbox Select All functionality showing opposite behaviour after triggering click events

I have below javascript code which dynamically add the DIV with checkbox.
var mainDiv = document.createElement('div');
mainDiv.className = 'field';
var innerDiv = document.createElement('div');
innerDiv.className = 'SelectAllCheckBox';
var newlabel = document.createElement("Label");
newlabel.innerHTML = "Select All";
var selectCheckbox = document.createElement('input');
selectCheckbox.type = "checkbox";
selectCheckbox.name = "selectCheckbox";
selectCheckbox.id = "selectCheckboxID";
selectCheckbox.checked = true;
innerDiv.appendChild(selectCheckbox);
innerDiv.appendChild(newlabel);
mainDiv.appendChild(innerDiv);
var BusinessUnitsContainerID = document.getElementById('BusinessUnitsContainer');
BusinessUnitsContainerID.parentNode.insertBefore(mainDiv,BusinessUnitsContainerID);
//$j('.Publications input[type=checkbox]').removeAttr('checked');
$evt.addEventHandler(selectCheckbox, "click", this.getDelegate(this._onSelectAllCheckBoxClick));
function _onSelectAllCheckBoxClick()
{
//(.Publications input[type=checkbox]) these are multiple checkboxes which are also created dynamically
var checkboxes = document.querySelectorAll('.Publications input[type=checkbox]');
for (var i =0; i < checkboxes.length; i++)
{
checkboxes[i].checked = $j("#selectCheckboxID").checked;
$j(checkboxes[i]).click(); //calling the click for the child checkboxes as they have there click event and I can't change that as it is application generated click event for them.
}
};
Don't know why my select all check box it behaving differently, now on first click it is not unchecking all the child checkboxes, however on second click it works fine.
Any idea what could be the reason?
EDIT:
//alert("Inside Select All");
var checkboxes = document.querySelectorAll('.Publications input[type=checkbox]');
//alert($("#selectCheckboxID").checked);
if($("#selectCheckboxID").checked)
{
for (var i =0; i < checkboxes.length; i++)
{
checkboxes[i].checked = true;
$j("#lblSelectAll").text("Check All");
$j(checkboxes[i]).click();
}
}
else
{
for (var i =0; i < checkboxes.length; i++)
{
checkboxes[i].checked = false;
$j("#lblSelectAll").text('Uncheck All');
$j(checkboxes[i]).click();
}
}
Above code I have written to test, how to make it short

Replace your _onSelectAllCheckBoxClick function with below and try
function _onSelectAllCheckBoxClick()
{
$('.Publications input[type=checkbox]').click(); // jQuery default selector format
// if above doesn't work use your format, comment above code and uncomment below code
// $j('.Publications input[type=checkbox]').click();
return true;
}