Develop Reference

JavaScript: Cannot read property 'value' of null from textbox

function create(param) {
var i, target = document.getElementById('results');
target.innerHTML = '';
for(i = 1; i <= param; i += 1) {
target.innerHTML +='<br>'
for(var j=1;j<=param;j+=1)
target.innerHTML += '<input type="text" id="a'+i+''+j+'" placeholder="a'+i+''+j+'">';
}
}
function saveData(param) {
var a = []
for(var i = 1;i<param;i+=1) {
a[i] = [];
for(var j = 1;j<param;j+=1)
a[i][j] = document.getElementById('"a'+i+''+j+'"').value;
}
var target = document.getElementById('ShowResults');
for(var i = 1;i<param;i+=1){
a[i] = [];
target.innerHTML +='<br>'
for(var j = 1;j<param;j+=1)
target.innerHTML +=a[i][j];
}
}
<button onclick="create(5)" style="widht:300px;height:30px;">Create table</button>
<div id="results"> </div>
<button id="takeResults" onclick="saveData(5)"style="widht:300px;height:30px;">Save data</button>
<div id="ShowResults"> </div>
Ok so i made a table whit js and gave every textbox id of "a'+i+''+j+'" but it seems that when i want to save the data it show's me the following error: Cannot read property 'value' of null
Can you guys tell me what i did wrong?

Here's the solution with some code improvements
As i said in the comment, you had a mistake in the code you getElementById('"a' + i + '' + j + '"') should be getElementById('a' + i + '' + j)
and there's a lot of unnecessary loops
function create(param) {
var target = document.getElementById('results');
target.innerHTML = '';
for (var i = 0; i < param; i++) {
target.innerHTML += '<br>'
for (var j = 0; j < param; j++)
target.innerHTML += '<input type="text" id="a' + i + '' + j + '" placeholder="a' + i + '' + j + '">';
}
}
function saveData(param) {
var target = document.getElementById('ShowResults');
target.innerHTML = '';
var a = []
for (var i = 0; i < param; i++) {
a[i] = [];
for (var j = 0; j < param; j++) {
target.innerHTML += document.getElementById('a' + i + '' + j).value;
}
target.innerHTML += '<br>'
}
}
<button onclick="create(5)" style="widht:300px;height:30px;">Create table</button>
<div id="results"> </div>
<button id="takeResults" onclick="saveData(5)" style="widht:300px;height:30px;">Save data</button>
<div id="ShowResults"> </div>

Change this...
a[i][j] = document.getElementById('"a'+i+''+j+'"').value;
to this...
a[i][j] = document.getElementById('a' + i + j).value;
You have two lots of quotes around the id when you create it, but you don't need to add them both when you're using getElementById. Just build the string and it will work.
There were some other issues with your code, mainly where you didn't have opening braces but you had closing braces. Copy/paste this and it should fix your issues...
function create(param) {
var i, target = document.getElementById('results');
target.innerHTML = '';
for(i = 1; i <= param; i += 1) {
target.innerHTML +='<br>'
for(var j=1;j<=param;j+=1) {
target.innerHTML += '<input type="text" id="a'+i+''+j+'" placeholder="a'+i+''+j+'">';
}
}
function saveData(param) {
var a = []
for(var i = 1;i<param;i+=1) {
a[i] = [];
for(var j = 1;j<param;j+=1) {
a[i][j] = document.getElementById('a' + i + j).value;
}
var target = document.getElementById('ShowResults');
for(var i = 1;i<param;i+=1) {
a[i] = [];
target.innerHTML +='<br>'
for(var j = 1;j<param;j+=1) {
target.innerHTML +=a[i][j];
}
}
}
}
Incidentally, using multiple layers of arrays can cause issues, mainly due to being unfriendly for the reader (or you in the future). I'd highly recommend using an array of objects instead, and naming things more appropriately than a, i & j.

Simple javascript onClick for table data

I have a table of images in rows of 10 and I'm trying show the id of each image when I click on it. I've tried many, many different ways of this (code below) but no joy. Hopefully someone can set me straight. No point in any jquery or other clever stuff though - I don't understand it yet. Just some simple pointers would help a lot.
document.writeln('<table border = 1 >');
for (var j = 0; j < myArray.length; j++){
if (j % 10 == 0 && j !== 0){
document.writeln('</tr><tr>');
}
document.writeln('<td ><img id = "' + myArray[j].id + '" src="' + myArray[j].src + '" onclick = selectImage() /></td>');
}
document.writeln('</tr></table>');
function selectImage() {
alert(document.getElementById(id));
}

You need add a parameter to selectImage method, so we can send some information to those method. As you can see on my snippet:
var myArray = [
{
id: "id01",
src: "src01.jpg"
},
{
id: "id02",
src: "src02.jpg"
},
{
id: "id03",
src: "src03.jpg"
},
];
document.writeln('<table border = 1 >');
for (var j = 0; j < myArray.length; j++){
if (j % 10 == 0 && j !== 0){
document.writeln('</tr><tr>');
}
document.writeln('<td ><img id = "' + myArray[j].id + '" src="' + myArray[j].src + '" onclick = selectImage(this) /></td>');
}
document.writeln('</tr></table>');
function selectImage(a) {
console.log(a.getAttribute('src'));
console.log(a.getAttribute('id'));
}

when making a call to selectImage, try passing the current image element by using the 'this' keyword i.e selectImage(this)
and then in the script, you can receive the passed object and retrieve the id attribute from there.
function selectImage(obj)
{
alert(obj.id);
}

Rendering Markup from JS array

Here is the original Fiddle:
https://jsfiddle.net/404h0u20/
I am trying to use the JS to render the HTML to obey the principle of DRY. Here:
https://jsfiddle.net/404h0u20/2/
The relevant code is this:
$(document).ready(function() {
$(bars).append("<ol>")
for (i = 0; i < 9; i++) {
$(bars).append("<li><a>" + String(amenities[i][0]) + "</a></li>");
}
$(bars).append("</ol>")
$(shopping).append("<ol>")
for (i = 0; i < 3; i++) {
$(shopping).append("<li><a>" + String(amenities[i][0]) + "</a></li>");
}
$(shopping).append("</ol>")
$(restaurants).append("<ol>")
for (i = 0; i < 3; i++) {
$(restaurants).append("<li><a>" + String(amenities[i][0]) + "</a></li>");
}
$(restaurants).append("</ol>")
$(placesOfInterest).append("<ol>")
for (i = 0; i < 2; i++) {
$(placesOfInterest).append("<li><a>" + String(amenities[i][0]) + "</a></li>");
}
$(placesOfInterest).append("</ol>")
});
But it doesn't create an ordered list, and it creates the wrong data from the second tab onwards?!
Any help will be greatly appreciated!

Try some DRY with each() and attribute selector
$(document).ready(function() {
$('.lists').append('<ol>')
$.each(amenities,function(i,v){
$('[data-amenity='+v[4]+']').next().find('ol').append("<li><a>" + String(v[0]) + "</a></li>");
});
});
https://jsfiddle.net/vobefn04/1/

Javascript String Array: Push method not working

I have a website that loads in songs for the user to play them. This method "loadSongs()" basically takes all the songs from a file input and is called "onchange" of the file input. I simply can't get the file names to get pushed into my string array called: "songs". Would appreciate any help, here is my code:
function loadSongs() {
var x = document.getElementById("file");
var songs = new Array();
if (x.files.length != 0) {
for (var i = 0; i < x.files.length; i++) {
var file = x.files[i];
songs.push(file.name);
}
}
for (var j = 0; j < songs.length; j++) {
alert("song #" + i + ": " + songs[i]);
}
}
I can successfully access the all the files in the first for loop because when I did "alert(file.name)" in the first for loop, it worked fine. I just can't get them into the string array unfortunately.

The problem is not the push method, it is your alert parameters.
In the second loop:
for (var j = 0; j < songs.length; j++) {
alert("song #" + i + ": " + songs[i]);
}
You have "song #" + i + ": " + songs[i], but your loop is using j as the counter variable. Just change i to j.
for (var j = 0; j < songs.length; j++) {
alert("song #" + j + ": " + songs[j]);
}

jquery toggle only execute the first condition

This must be fairly simple for many of you. I wrote a function to select all checkboxes if user clicks on anchor tag (). However, on the first click the function select all checkboex but nothing happens when I click on the anchor tag again (it should deselect all the checkboxes again). Here is my JS function
function createFooterRowForRunningDoubles(trClassName, colspanNumber, mainTable, table, i) {
var mainTableId = $.data(mainTable, 'BetTableData').tableId;
var tr = $('<tr/>')
.addClass(trClassName)
.appendTo(table)
.append($('<td colspan="' + colspanNumber + '"/>'))
.append($('<td />')
.append($('<a id="fieldSelectAll"/>')
.html(field)
.click(function() {
var els = document.getElementsByName(mainTableId + "_select" + i);
for (var j = 0; j < els.length; j++) {
if ($("#fieldSelectAll").toggle()) {
els[j].checked = true;
}
}
})) )
}
Edit 1:
So if I remove the anchor tag and replacing with a select all check box it works if I modify my function as follow:
function createFooterRowForRunningDoubles(trClassName, colspanNumber, mainTable, table, i) {
var mainTableId = $.data(mainTable, 'BetTableData').tableId;
// Create row with checkbox
var tr = $('<tr/>')
.addClass(trClassName)
.appendTo(table)
.append($('<td colspan="' + colspanNumber + '"/>'))
// Create checkbox
.append($('<td/>')
.html(field)
.append($('<input type="checkbox" id="' + mainTableId + '_select' + i + '"/>'))
.click(function () {
var els = document.getElementsByName(mainTableId + "_select" + i);
for (var j = 0; j < els.length; j++) {
if ($("#" + mainTableId + "_select" + i).is(':checked')) {
els[j].checked = true;
} else els[j].checked = false;
}
}))
}
However, instead of using a 'checkall' checkbox, I simply need to toggle the checkall thing on anchor tag click. If that makes senses?

Use a variable to keep track of the state:
function createFooterRowForRunningDoubles(trClassName, colspanNumber, mainTable, table, i) {
var mainTableId = $.data(mainTable, 'BetTableData').tableId;
var allChecked = false;
var tr = $('<tr/>')
.addClass(trClassName)
.appendTo(table)
.append($('<td colspan="' + colspanNumber + '"/>'))
.append($('<td />')
.append($('<a id="fieldSelectAll"/>')
.html(field)
.click(function() {
var els = document.getElementsByName(mainTableId + "_select" + i);
allChecked = !allChecked;
for (var j = 0; j < els.length; j++) {
els[j].checked = allChecked;
}
})) )
}