Develop Reference

How do I get an element with a specific ID from getElementsByClassName?

EDIT: SOLVED. Thanks everyone!
I'm new to programming :D My code is below. Here is the deal: I have multiple buttons, but I want to make it so that the same thing would happen anytime any one of these buttons is clicked, but each button also has a specific value, and I also want that specific value to be printed out. My code goes through the document and looks at all the elements with "editButton" class, and correctly identifies all the buttons, but the problem is that no matter which button I press, I always get the value of the last button, because var id only gets assigned after the for loop finishes and is on the last element. I tried creating a global variable and assigning the value to it, but the result is the same. I tried ending the for loop before moving on to .done (function (data), but I got an error. Can someone help me out? Thanks!
$(document).ready(function() {
var anchors = document.getElementsByClassName('editButton');
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick = function() {
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function(data) {
var id = anchor.value;
/* from result create a string of data and append to the div */
var result = data;
var string = '<p>ID is ' + id + '</p><br>';
$("#records").html(string);
});
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="records"></div>

Actually, instead of doing a huge for loop to add onclick events to your buttons, one of the best ways to do this is to listen to each button with editButton class on click() event then use $(this) which refers to the exact clicked button. After that, you can use each individual button to do whatever you want.
So your final code should be something like this:
$(document).ready(function() {
$('.editButton').click(function() {
console.log('innerHTML is:', $(this).html())
console.log('id is:', $(this).attr('id'))
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function(data) {
var id = $(this).value;
/* from result create a string of data and append to the div */
var result = data;
var string = '<p>ID is ' + id + '</p><br>';
$("#records").html(string);
});
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="records">
<button class="editButton" id="firstButton">button 1</button>
<button class="editButton" id="secondButton">button 2</button>
<button class="editButton" id="thirdButton">button 3</button>
<button class="editButton" id="fourthButton">button 4</button>
</div>

save the button with button = this when run the onclick function and use it
$(document).ready(function(){
var anchors = document.getElementsByClassName('editButton');
for(var i = 0; i < anchors.length; i++) {
var button;
var anchor = anchors[i];
anchor.onclick = function() {
button = this;
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function( data ) {
/* from result create a string of data and append to the div */
var result= data;
var string='<p>ID is '+ button.value +'</p><br>';
$("#records").html(string);
});
}
}
});
https://jsfiddle.net/x02srmg6/

You need to look in to JavaScript closures and how they work to solve this.
When you add event listeners inside a for loop you need to be careful in JS. When you click the button, for loop is already executed and you will have only the last i value on every button press. You can use IIFE pattern, let keyword to solve this.
One simple way to resolve this issue is listed below.
<div id="records"></div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var anchors = document.getElementsByClassName('editButton');
for(var i = 0; i < anchors.length; i++) {
//Wrap the function with an IIFE and send i value to the event listener
(function(anchor){
anchor.onclick = function() {
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function( data ) {
var id = anchor.value;
/* from result create a string of data and append to the div */
var result= data;
var string='<p>ID is '+id+'</p><br>';
$("#records").html(string);
});
}
})(anchors[i]);
}
}
});
You can read more about this in JavaScript closure inside loops – simple practical example

In your code..
var id = anchor.value;
could be
var id = anchor.id;
but I recommend you to use event delegation
If you have a html like this
<div id="buttonArea">
<a class="editButton" id="1"/>
<a class="editButton" id="2"/>
<a class="editButton" id="3"/>
.......(so many buttons)
</div>
you can code like below.
$(document).ready(function(){
$('#buttonArea').on('click', 'a.editButton', function (event) {
var anchor = event.currentTarget;
$.ajax({
method: "GET",
url: "/testedit.php",
})
.done(function(data) {
var id = anchor.id;
/* from result create a string of data and append to the div */
var result= data;
var string='<p>ID is '+id+'</p><br>';
$("#records").html(string);
});
}

You can use getAttribute. Like:
var anchors = document.getElementsByClassName('editButton');
// Id of anchors
id_of_anchor = anchors.getAttribute("id");
Refs
EDIT
anchor.onclick = function() {
id_of_anchor = $(this).attr("id");
});

You have jQuery in your application, there is easier and more readable way to do it with jQuery;
$(document).ready(function() {
$(".editButton").each(function(a, b) {
$('#' + $(b).attr('id')).on('click', function() {
$.ajax({
method: "GET",
url: "/testedit.php",
}).done(function(data) {
var id = $(b).attr('id');
/* from result create a string of data and append to the div */
var result = data;
var string = '<p>ID is ' + id + '</p><br>';
$("#records").html(string);
});
});
});
});
Example: https://jsfiddle.net/wao5kbLn/

Dynamically populate select options on a parent window from a child popup window with jQuery

I'm attempting to populate the options on a select element on a parent window with data returned from an ajax call that's called from a child (popup) form. The child form is called from the parent with window.open.
The odd thing is removing the select options works; this succeeds:
$('#selElement', opener.document).find('option').remove().end();
But appending as shown below, throws SCRIPT5022: Exception thrown and not caught.
$('#selElement', opener.document).append($("<option />").val('').text('---Select---'));
I've also tried
$('#selElement', opener.window.document).append($("<option />").val('').text('---Select---'));
here's the code:
// the line below works; it removes all of the options from the drop-down
$('#selElement', opener.document).find('option').remove().end();
// the ajax call below returns the right data
$.ajax({
url: 'actions.cfc?method=getOptions&returnFormat=json',
dataType: 'json',
// the value being sent here just limits the options returned in the results
data: {myType: $('#myType').val()},
async:false,
success: function(response) {
// getting the right data back
console.log(response);
// the line below results in SCRIPT5022: Exception thrown and not caught
$('#selElement', opener.document).append($("<option />").val('').text('---Select---'));
// never get this far unless I comment out the line above; then the error is thrown here
for (var i = 0; i < response.DATA.length; i++) {
$('#selElement', opener.document).append($("<option />").val(response.DATA[i][0]).text(response.DATA[i][1]));
}
},
error: function (response) {
var r = jQuery.parseJSON(response.responseText);
alert("Message: " + r.Message);
}
});
Any ideas?

If you want to create the element in another document, you have to specify it in the creation like in the target as well:
$('#selElement', opener.document).append($("<option />", opener.document).val('').text('---Select---'));
//Specify the document where the element will be created ^
Otherwise the element will be created in the child document and an error will be thrown when the code tried to add it to the parent document.
Also, you can simplify the option creation:
$("<option value=''>---Select---</option>", opener.document)

Use .map to create you option list and append it to select tag.
const option = response.DATA.map(item => `<option value='${item[0]}'>${item[1]}</option>`);
$('#selElement', opener.document).append('<select>' + option.join('') + '</select>')
const response = { DATA: [
['Mary', 'Mary'],
['Peter', 'Peter'],
['John', 'John'],
['Abel', 'Abel'],
['Mike', 'Mike']
]}
const option = response.DATA.map(item => `<option value='${item[0]}'>${item[1]}</option>`);
option.unshift('<option>-----Select-----</option>');
function myFunction() {
const div = document.getElementById('test');
div.innerHTML = ('<select>' + option.join('') + '</select>');
}
<button onclick="myFunction()">Try it</button>
<div id="test"></div>

This a hybrid jquery/javascript solution I use sometimes ...
var mySubtype = document.getElementById("uploadSubtype");
//Create arrays of options to be added
if(filetype == "2D"){
var array = ['','Proofs','Graphic','Other'];
} else if(filetype == "3D"){
var array = ['','Prelims','Presentation','Controls','Final'];
} else if(filetype == "Accounting"){
var array = ['','W-9','Other'];
}
$( "#uploadSubtype" ).append("<span class='subtype_form_label'>Subtype</span>");
//Create and append select list
var selectList = document.createElement("select");
selectList.id = "subtype";
selectList.name = "subtype";
selectList.classList.add("form_field");
mySubtype.appendChild(selectList);
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = array[i];
selectList.appendChild(option);
}

LocalStorage and adding li to list

I'm trying to make a small script that allows for a little notes section. This section would have an input box that allows for adding elements to the list; which will be saved in localStorage so they are not lost when I refresh or close the browser. The code I have is as follows (it's all done through JS even the html, but ignore that.)
var notes = [];
var listthings = "<h2 id=\"titlething\">Notes</h2>" +
"<ul id=\"listing\">" +
"</ul>"
"<input type=\"text\" name=\"item\" id=\"textfield\">" +
"<input type=\"submit\" id=\"submitthing\" value=\"Submit\">";
JSON.parse(localStorage.getItem('notes')) || [].forEach( function (note) {
"<li id=\"listitem\">" + notes + "</li>";
})
$('#submitthing').click(function() {
notes.push($('#textfield').val());
});
localStorage.setItem('notes', JSON.stringify(notes));
Also, how would I go about appending the latest added li between the opening and closing tag? Obviously I'd usually do it using jQuery, but this is puzzling me a little. However, only the 'Notes' loads at the top, any ideas?

Your approach is way off the mark. You don't need JSON at all (this just confuses things) and you don't need to manually create HTML.
Also, you can use an array to store the notes, but since localStorage is the storage area, so an array is redundant. Additionally, without using an array, you don't need JSON. The entire problem becomes much easier to solve.
Unfortunately, the following won't run here in this snippet editor, due to security issues, but it would do what you are asking. This fiddle shows it working: https://jsfiddle.net/Lqjwbn1r/14/
// Upon the page being ready:
window.addEventListener("DOMContentLoaded", function(){
// Get a reference to the empty <ul> element on the page
var list = document.getElementById("notes");
// Loop through localStorage
for (var i = 0; i < localStorage.length; i++){
// Make sure that we only read the notes from local storage
if(localStorage.key(i).indexOf("note") !== -1){
// For each item, create a new <li> element
var item = document.createElement("li");
// Populate the <li> with the contents of the current
// localStorage item's value
item.textContent = localStorage.getItem(localStorage.key(i));
// Append the <li> to the page's <ul>
list.appendChild(item);
}
}
// Get references to the button and input
var btn = document.getElementById("btnSave");
var note = document.getElementById("txtNote");
// Store a note count:
var noteCount = 1;
// When the button is clicked...
btn.addEventListener("click", function(){
// Get the value of the input
var noteVal = note.value;
// As long as the value isn't an empty string...
if(noteVal.trim() !== ""){
// Create the note in localStorage using the
// note counter so that each stored item gets
// a unique key
localStorage.setItem("note" + noteCount, noteVal);
// Create a new <li>
var lstItem = document.createElement("li");
// Set the content of the <li>
lstItem.textContent = noteVal;
// Append the <li> to the <ul>
list.appendChild(lstItem);
// Bump up the note counter
noteCount++;
}
});
});
<input type=text id=txtNote><input type=button value=Save id=btnSave>
<ul id=notes></ul>

This is how I would approach it using jquery. but depens how complex this should be. this is just simple demo.
<input type="text" id="note" />
<button id="add">add note</button>
<ul id="notes"></ul>
javascript and jquery
function addNote(){
var data = localStorage.getItem("notes")
var notes = null;
if(data != null)
{
notes = JSON.parse(data);
}
if(notes == null){
notes = [];
}
notes.push($("#note").val());
localStorage.setItem("notes", JSON.stringify(notes));
refreshNotes();
}
function refreshNotes(){
var notesElement =$("#notes");
notesElement.empty();
var notes = JSON.parse(localStorage.getItem("notes"));
for(var i = 0; i< notes.length; i++){
var note = notes[i];
notesElement.append("<li>"+note+"</li>");
}
}
$(function(){
refreshNotes();
$("#add").click(function(){
addNote();
});
})
example:
http://codepen.io/xszaboj/pen/dOXEey?editors=1010

dynamically store li id in the array

in my codes lis are generate dynamically and each li has special id.
I want to store each li "id" in the one array
this is js codes
var i=0;
$("ul#portfolio li").each(function(eval){
var idd = new Array();
idd[i]=$(this).attr("id");
i++;
});
but it dosn't work.
html
<div id="container">
<ul id="portfolio" class="clearfix">
<!-- Dynamically generated li -->
</ul>
</div>

you need to use .map()
var idd = $("#portfolio li").map(function(eval){
return this.id;
}).get();
In your case your array is local to the callback, so every iteration of the each callback you are creating a new array instead of adding the item to an existing array
var idd = new Array();
$("#portfolio li").each(function (eval) {
idd.push(this.id)
});
Make sure your script is running after the target elements are loaded to the dom(May be by using a dom ready handler)
Use this.id which is the same as $(this).attr('id')

You Can try This Also
$(document).ready(function()
for(var i=0;i<5;i++){
$('#portfolio').append("<li id='"+ i +"'>"+ i +"</li>");
}
var idArray=new Array();
$('#portfolio li').each(function(ind,val){
idArray.push(this.id)
});
console.log(idArray);
});

Parse XML to UL

I am trying to use JQuery to parse a sitemap.xml to look like this HTML: http://astuteo.com/slickmap/demo/
After working on it for a few hours I decided I really need some help in the right direction.
the main template it has is this, where each indent is a different directory level:
<ul id="primaryNav" class="col4">
<li id="home">Home</li>
<li>Services
<ul>
<li>Graphic Design</li>
<li>Web Development</li>
<li>Internet Marketing
<ul>
<li>Social Media</li>
<li>Search Optimization</li>
<li>Google AdWords</li>
</ul>
</li>
<li>Copywriting</li>
<li>Photography</li>
</ul>
</li>
</ul>
I am using a google sitemap.xml which looks like this:
http://meyers.ipalaces.org/sitemap_000.xml
<url>
<loc>http://meyers.ipalaces.org/</loc>
<lastmod>2011-02-26T09:32:18Z</lastmod>
<changefreq>hourly</changefreq>
<priority>0.4</priority>
</url>
<url>
<loc>http://meyers.ipalaces.org/meyers/photos/Explorer</loc>
<lastmod>2011-02-26T09:31:33Z</lastmod>
<changefreq>hourly</changefreq>
<priority>0.2</priority>
</url>
The method I came up with avoids setting everything exactly how it is on the css template, but instead I just focused on getting it to have the correct levels:
What it does is takes the level of a URL goes through each level trying to create the list based on the previous level. So with the example www.example.com/brand/model/product/:
it gets the first [0] element, www.example.com this is level 1 so it checks is there a ul[id=1], if not then run create_ul and append it to #content. Now attach a li to the ul it just made..level 1 is "special" because it has to be created first, thats why I have a lot of if level==1 in the code.
For the next element [1] it gets brand which is level 2. This time it checks
is there a li[id=www.example.com] ul[id=2] if there exist, it will create one and then attach a li to the ul.
This method isn't working out for me at all, it also messes up if say level 8 has the same id and something from level 4. I just need a new idea on how to approach this.
Here is my functions as of now, but im sure I should just scrap most of the code:
function create_ul(level, id, prev_id) {
var ul = $('<ul/>',{
id: level
});
if(level==1) {
$('#content').append(ul);
} else {
$('ul[id='+(level-1)+'] li[id='+prev_id+']').append(ul);
}
}
function create_li(level, id, prev_id){
if (level ==1){
if ($('ul[id='+level+']').length == 0) {
create_ul(level, id, prev_id);
} else if ($('ul[id='+level+'] li[id='+id+']').length > 0) {
return;
}
var li = $('<li/>',{
id: id
});
var a = $('<a/>',{
text: level + " - " + id,
href: "nothing yet"
});
$('ul[id='+level+']').append(li);
return;
}
// If there is no UL for the LI, create it
if ($('li[id='+prev_id+'] ul[id='+level+']').length == 0) {
create_ul(level, id, prev_id);
} else if ($('ul[id='+level+'] li[id='+id+']').length > 0) {
return;
}
var li = $('<li/>',{
id: id
});
var a = $('<a/>',{
text: level + " - " + id,
href: "nothing yet"
});
li.append(a);
$('li[id='+prev_id+'] ul[id='+level+']').append(li);
}
$.ajax({
type: "GET",
url: "/sitemap_000.xml",
dataType: "xml",
success: parseXml
});
function parseXml(xml) {
URLS = new Array(new Array(), new Array(), new Array());
$(xml).find("loc").each(function(){
var url = $(this).text();
URLS[1].push(url);
url = url.replace("http://", "")
var url_array = url.split("/");
URLS[0].push(url_array);
var rawLastMod = $(this).parent().find('lastmod').text();
var timestamp = rawLastMod.replace(/T.+/g, '');
var lastMod = formatDate(timestamp);
URLS[2].push(lastMod);
});
$(URLS[0]).each(function(i, url_array){
$(url_array).each(function(index, fragment){
var level = index+1;
var id = fragment;
if(index!=0) {
var prev_id = URLS[0][i][index-1];
} else {
var prev_id = null;
}
if(id != "") {
create_li(level, id, prev_id);
}
});
});
}
I have decided to reply on a PHP solution instead of Javascript. I am using this PHP script: http://www.freesitemapgenerator.com/xml2html.html

This is my try to it.
Basically it uses an array to store all the urls' pieces.
For example, the url mytest.url.com/sub1/othersub2.html is handled as:
var map = ['mytest.url.com']['sub1']['othersub2.html'];
This is possible because javascript allows you to index arrays using strings.
Full code (just replace your parseXml function and test it on chrome or firefox with firebug):
<script type="text/javascript">
function parseXml(xml) {
//here we will store nested arrays representing the urls
var map = [];
$(xml).find("loc").each(function () {
//some string cleaning due to bad urls provided
//(ending slashes or double slashes)
var url = this.textContent.replace('http://', '').replace('//', ''),
endingInSlash = (url.substr(url.length - 1, 1) == '/'),
cleanedUrl = url.substr(0, url.length - (endingInSlash ? 1 : 0)),
splittedUrl = cleanedUrl.split('/'), //splitting by slash
currentArrayLevel = map; //we start from the base url piece
for (var i = 0; i < splittedUrl.length; i++) {
var tempUrlPart = splittedUrl[i];
//in javascript you can index arrays by string too!
if (currentArrayLevel[tempUrlPart] === undefined) {
currentArrayLevel[tempUrlPart] = [];
}
currentArrayLevel = currentArrayLevel[tempUrlPart];
}
});
var currentUrlPieces = []; //closure to the recursive function
(function recursiveUrlBuilder(urlPiecesToParse) {
//build up a DOM element with the current URL pieces we have available
console.log('http://' + currentUrlPieces.join('/'));
for (var piece in urlPiecesToParse) {
currentUrlPieces.push(piece);
//recursive call passing the current piece
recursiveUrlBuilder(urlPiecesToParse[piece]);
}
//we finished this subdirectory, so we step back by one
//by removing the last element of the array
currentUrlPieces.pop();
})(map);
}
</script>