I have fixed it already. I cannot figure it our why am I getting "Uncaught TypeError: Cannot read property 'value' of null"? The error shows up on the "var name = document.getElementById("name").value;" line.
var colors = [];
function Save() {
var name = document.getElementById("name").value;
var rgb = document.getElementById("colordisplay").innerHTML;
var opacity = document.getElementById("div").style.opacity;
colors.push({
name_prop:name,
rgb_prop:rgb,
opacity_prop:opacity,
});
//pass the array into the dropdown list
var select = document.getElementById("selectColor");
for (var i = 0; i < colors.length; i++) {
var opt = colors[i];
var el = document.createElement("option");
el.innerHTML = opt;
el.value = opt;
select.appendChild(el);
console.log(colors);
}
}
Insert function is not called anywhere in your JSBin
Related
A JSON like this is with me in a variable
var options_array =
[{"optionText":"1safsafs 1","optionDbId":1},{"optionText":"1safsafs 2","optionDbId":2},{"optionText":"1safsafs 3","optionDbId":3},{"optionText":" 1safsafs 4","optionDbId":4}]
I have to build a radio buttons with the items in this JSON and i am using the below code
var choice_div = document.getElementById("choice_div");
var options_array = "[{\"optionText\":\"1safsafs 1\",\"optionDbId\":1},{\"optionText\":\"1safsafs 2\",\"optionDbId\":2},{\"optionText\":\"1safsafs 3\",\"optionDbId\":3},{\"optionText\":\" 1safsafs 4\",\"optionDbId\":4}]";
console.log(options_array);
console.log(options_array.length); //174 is coming here instead of 4
for (i = 0; i < options_array.length; i++) {
var _text = JSON.stringify(options_array[i].optionText);
//console.log(_text); //all values are coming as undefined
var _value = JSON.stringify(options_array[i].optionDbId);
//console.log(_value);
var option_entry = makeRadioButton("selectedoption", _value, _text);
choice_div.appendChild(option_entry);
}
function makeRadioButton(name, value, text) {
var label = document.createElement("label");
var radio = document.createElement("input");
radio.type = "radio";
radio.name = name;
radio.value = value;
label.appendChild(radio);
label.appendChild(document.createTextNode(text));
return label;
}
but this code is adding 170 items to the DIV and i am getting radio button contents as undefined . Not able to spot the reason?
I am expecting this to build 4 radio buttons with 4 options in it
you had some funny errors XD, first this the working one
$(document).ready(function () {
var choice_div = document.getElementById('mydiv');
data = [{ "optionText": "1safsafs 1", "optionDbId": 1 }, { "optionText": "1safsafs 2", "optionDbId": 2 }, { "optionText": "1safsafs 3", "optionDbId": 3 }, { "optionText": " 1safsafs 4", "optionDbId": 4 }]
$.each(data, function (key, item) {
var text = item.optionText;
var value = item.optionDbId;
console.log(value);
var option_entry = makeRadioButton("option" + key, value, text);
choice_div.appendChild(option_entry);
});
});
function makeRadioButton(name, value, text) {
var label = document.createElement("label");
var radio = document.createElement("input");
radio.type = "radio";
radio.name = name;
radio.value = value;
label.appendChild(radio);
console.log("bot "+value);
label.appendChild(document.createTextNode(text));
return label;
}
then lets check what you did first you used JSON.stringify() with no reason , secondly you typed the json keys wrong thats was a little funny XD.
Javascript Object key is case sensitive. You've made some typos on your object keys.
optiontext -> optionText
optiondbid -> optionDbId
for (i = 0; i < options_array.length; i++) {
var _text = JSON.stringify(options_array[i].optionText);
//console.log(_text);
var _value = JSON.stringify(options_array[i].optionDbId);
//console.log(_value);
var option_entry = makeRadioButton("option" + i,_value, _text);
choice_div.appendChild(option_entry);
}
Update (11/10/2019)
The reason you are getting incorrect length is because you are logging JSON string length ( number of characters in your JSON string ) instead of the array length.
var choice_div = document.getElementById("choice_div");
// Get options_array as actual array instead of JSON string
var options_array = JSON.parse("[{\"optionText\":\"1safsafs 1\",\"optionDbId\":1},{\"optionText\":\"1safsafs 2\",\"optionDbId\":2},{\"optionText\":\"1safsafs 3\",\"optionDbId\":3},{\"optionText\":\" 1safsafs 4\",\"optionDbId\":4}]");
for (i = 0; i < options_array.length; i++) {
// Dont need to stringify here
var _text = options_array[i].optionText;
var _value = options_array[i].optionDbId;
var option_entry = makeRadioButton("selectedoption", _value, _text);
choice_div.appendChild(option_entry);
}
function makeRadioButton(name, value, text) {
var label = document.createElement("label");
var radio = document.createElement("input");
radio.type = "radio";
radio.name = name;
radio.value = value;
label.appendChild(radio);
label.appendChild(document.createTextNode(text));
return label;
}
I have the following function that dynamically creates a bunch of checkboxes:
var drawGroups = function(){
var groups = document.getElementById("groups"); //groups element is a div
groups.innerHTML = "";
//groupList is an array containing strings
for(var i in groupList){
var groupName = groupList[i];
var cb = document.createElement('input');
cb.type = "checkbox";
cb.checked = true; //this seems to do nothing
groups.appendChild(cb);
groups.innerHTML += groupName + "<br/>"
}
}
Everything I read indicates cb.checked = true should check the checkbox, but it doesn't seem to do anything. How can I create the checkboxes in a checked state?
You need to set the defaultChecked property:
var groupList = ['foo','bar','baz','biz','boz'];
var drawGroups = function(){
var groups = document.getElementById("groups"); //groups element is a div
groups.innerHTML = "";
//groupList is an array containing strings
for(var i in groupList){
var groupName = groupList[i];
var cb = document.createElement('input');
cb.type = "checkbox";
cb.defaultChecked = true;
groups.appendChild(cb);
groups.innerHTML += groupName + "<br/>"
}
}
drawGroups();
<div id="groups"></div>
You could use the method setAttribute:
cb.setAttribute('checked', true);
I'm assigning values to array in forloop But it gives an error that array variable is undefine. following is my code.
$(document).ready(function(){
$("#SubmitBtn").live('click',function(){
var cnt = $("#TotalCnt").val();
var data = [];
for(var i=1; i<=cnt; i++)
{
var fname = $('#fname_'+i).val();
var lname = $('#lname_'+i).val();
var address = $('#address_'+i).val();
data[i]["fname"] = fname;
data[i]["lname"] = lname;
data[i]["address"] = address;
}
});
});
when I'm assigning value to array it gives error "data[i] is undefined"
Try to create an empty object first, because initially data[i] is undefined. And undefined does not contains any property under it.
$(document).ready(function(){
$("#SubmitBtn").live('click',function(){
var cnt = $("#TotalCnt").val();
var data = [];
for(var i=1; i<=cnt; i++)
{
var fname = $('#fname_'+i).val();
var lname = $('#lname_'+i).val();
var address = $('#address_'+i).val();
data[i] = {};
data[i]["fname"] = fname;
data[i]["lname"] = lname;
data[i]["address"] = address;
}
});
});
I'm new to Javascript (but fairly proficient in php) and I'm trying to use a set of associative arrays to perform two tasks.
First: Populate a dropdown menu (this part is working)
var select = document.getElementById('FName');
var options = fNames;
for(var i = 0; i < (options.length-1); i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
The 'fNames' variable is an array with a list of strings which I've taken from a php array. I have another array, called 'fDesc' which is indexed to match the 'fNames' array. Something like this:
var fNames = ["aName", "bName", "cName"]
var fDesc = ["aDesc", "bDesc,", "cDesc"]
They're currently separate arrays, not a single multidimensional one.
How can I make "aDesc" appear in a text box when "aName" is selected from the pulldown menu?
First of all, the for element is population less elements, you should remove the -1 of (options.length-1)
Then you need to asociate a handler event for select.onchange and use index of to retrieve the index of the array.
HTML:
<select id='FName'></select>
<input id='AName' type='text'/>
JS:
var fNames = ["aName", "bName", "cName"];
var fDesc = ["aDesc", "bDesc,", "cDesc"];
var select = document.getElementById('FName');
var options = fNames;
for(var i = 0; i < (options.length); i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
select.onchange = function(){
var textbox = document.getElementById('AName');
textbox.value = fDesc[fNames.indexOf(select.value)];
}
JsFiddle:
http://jsfiddle.net/dBtUz/
better put aName as text and aDesc as value.
HTML
<select id='FName' onchange='fillText()'></select>
<input id='Fdesc' type='text'/>
Javascript
window.onload = function(){
var fNames = ["aName", "bName", "cName"]
var fDesc = ["aDesc", "bDesc", "cDesc"]
var select = document.getElementById('FName');
for(var i = 0; i < (fNames.length); i++) {
var el = document.createElement("option");
el.textContent = fNames[i];
el.value = fDesc[i];
select.appendChild(el);
}
select.selectedIndex = -1;
}
function fillText(){
document.getElementById('Fdesc').value = document.getElementById('FName').value;
}
You need to search the index of the selected value and then you get with that index the same position in your search array.
Updated Solution also with manual fill:
<script>
document.addEventListener('DOMContentLoaded', onDomContentLoaded);
// data
var fNames = ["aName", "bName", "cName"];
var fDesc = ["aDesc", "bDesc", "cDesc"];
function onDomContentLoaded() {
var mySelect = document.getElementById("mySelect");
fillSelect(mySelect);
mySelect.addEventListener('change', onSelectChange);
}
function fillSelect(mySelect) {
for(var i = 0; i < (fNames.length); i++) {
var opt = fNames[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
mySelect.appendChild(el);
}
}
function onSelectChange(){
var selectedValue = this.options[this.selectedIndex].value;
//console.log('selected value', selectedValue);
var selectedValueIndexInArray = fNames.indexOf(selectedValue);
var fieldOutput = document.getElementById("output");
fieldOutput.innerHTML = fDesc[selectedValueIndexInArray];
}
</script>
<select id="mySelect"></select>
<div id="output"></div>
Working Example
http://jsfiddle.net/x92ka/4/
I am working on phonegap and I am new to it. I want to draw a line using hr under the menu items which are displayed. but unfortunately I am unable to do so.
if somebody can help in this regard. Thanks in advance.
here is the code snippet
{
success:function(res,code) {
entries = [];
var xml = $(res);
var items = xml.find("item");
$.each(items, function(i, v) {
category1.push($(v).find("category").text());
/* $("#status").append("menu_type <b>"+menu_type+"</b><br/>"); */
console.log( "PRICE" + ": " + $(v).find("menu_type").text() );
});
var category = category1.unique();
var select = document.getElementById("selectNumber");
for(var i = 0; i < category.length; i++) {
var el1 = document.createElement("li");
var opt = category[i];
var el = document.createElement("a");
el.textContent = opt;
el.value = opt;
el1.appendChild(el);
select.appendChild(el1);
}
}
Try adding something like this
document.getElementById("ElementBelowWhichHRShouldCome").appendChild(document.createElement('hr'));
Try innerHTML. Here is an example:
http://jsfiddle.net/Wxv6n/
var doc = document;
var get = function(id){return doc.getElementById(id);};
get("foo").innerHTML = '<hr/>';
..and don't forget to cache your references to document
After Every Menu Item,you can use this.Its pretty simple.
$("#menu_item").after('<hr/>');
after() in jquery
DEMO FIDDLE