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]);
}
Related
As I am new to JavaScript, I am a bit confused of using the for loops in JavaScript. I have tried the times table using the below JavaScript code, but I was unsuccessful in creating the times table for 1 to 9, as displayed in the image.
var display = ""; // The table output HTML
for (i = 1; i <= 9; i++) {
var multiplier = 1;
var result = i * 1;
display += multiplier + " * " + i + " = " + result + "\xa0\xa0\xa0\xa0\xa0\xa0\xa0 " ;
}
document.getElementById("outputDiv").innerHTML = display;
I tried using nested for loops, but it left me with an error
This is where I have done with a single for loop
https://codepen.io/vbudithi/pen/LgEPwx
I tried to get the output in the below form
THANKS IN ADVANCE
Use nested loop with break line. "< br >"
Working example: https://codepen.io/anon/pen/yRyLje
var display = "";
for( i = 1; i < 10; i++){
for (j = i; j < 10; j++) {
display += i + " * " + j + " = " + j * i+ "\xa0\xa0\xa0\xa0\xa0" ;
}
display +="<br>";
}
document.getElementById("outputDiv").innerHTML = display;
just like NicolasB said, wrapping the loop in another loop
var display = ""; // The table output HTML
for(j = 1; j <= 9; j++) {
for (i = j; i <= 9; i++) {
var result = i * j;
display += j + " * " + i + " = " + result + "\xa0\xa0\xa0\xa0\xa0\xa0\xa0 " ;
}
display += "<br>";
}
document.getElementById("outputDiv").innerHTML = display;
I have a datatable that is using standard features (pagination, sorting, searching, date range, etc.), but I also have a portion at the bottom of the table that displays the total by office. What I would like to implement, however, is a means of hiding any search results that would display as "0" for an office. For instance, if you search my table for "assistant" then Edinburgh, London, Singapore and Tokyo all display a result of "0" (since there are no assistants for any of those offices). Instead of showing those empty results how could I instead hide them?
Here is a link to my jsfiddle: https://jsfiddle.net/l337method/vhoupanz/
Here is my script:
var offices = api.column(2).data().sort().unique().toArray();
var totals = [];
for (var i = 0; i < offices.length; i++) totals.push(0);
api.rows({filter:'applied'}).every(function() {
var data = this.data();
totals[offices.indexOf(data[2])] += intVal(data[5]);
});
html = '';
for (var i = 0; i < offices.length; i++) {
html += '<br>' + offices[i] + ': ' + totals[i];
}
html += '<br'
$(api.column(4).footer()).html(html);
Try this:
html = '';
for (var i = 0; i < offices.length; i++) {
if(totals[i] > 0){
html += '<br>' + offices[i] + ': ' + totals[i];
}
}
html += '<br'
How about this:
html = [];
for (var i = 0; i < offices.length; i++) {
if (totals[i] > 0) html.push(offices[i] + ': ' + totals[i]);
}
$(api.column(4).footer()).html(html.length == 0?"":html.join('</br>'));
I wanna create such a field with JS and Jquery.
This will enable you make id for every field. Thus you will be able to reference each field by id:
function drawSpace(x) {
for ( var j = 0; j< x; j++) {
for ( var i=0; i< x; i++) {
$('#spacediv').append('<img src="Weltall_Feld.jpg" alt="WeltallFeld" id="field' + i + '_' + j + '"/>');
}
$('#spacediv').append('<br />');
}
}
<div id="spacediv"></div>
so abit of back story - I am creating a personal note keep 'thing' and I have ran into this problem:
when using:
for (i = 0; i < note_title.length; i++) {
document.getElementById("current_titles").innerHTML = (note_title[i] + "<br />");
};
for (i = 0; i < note_content.length; i++) {
document.getElementById("current_contents").innerHTML = (note_content[i] + "<br />");
};
the code will only print out the last values, rather than the whole list. Why might this be?
Thanks in advance.
You always reset the innerHTML property thus overwriting the old values.
The solution is to store the generated HTML in a variable (a string) and set that as the innerHTML value after the loop.
Do not use innerHTML += "". This dramatically affects your site's preformance.
var currentTitlesStr = "";
for (i = 0; i < note_title.length; i++) {
currentTitlesStr += note_title[i] + "<br />";
}
document.getElementById("current_titles").innerHTML = currentTitlesStr;
var noteContentsStr = "";
for (i = 0; i < note_content.length; i++) {
noteContentsStr += note_content[i] + "<br />";
}
document.getElementById("current_contents").innerHTML = nodeContentsStr;
Add += instead of =
for (i = 0; i < note_title.length; i++) {
document.getElementById("current_titles").innerHTML += (note_title[i] + "<br />");
};
for (i = 0; i < note_content.length; i++) {
document.getElementById("current_contents").innerHTML += (note_content[i] + "<br />");
};
I have an array of objects
var event1Array {
name: wedding;
time: ["10:00am", "12:00pm"];
}
var event2Array {
name: housewarming;
time: ["7:00pm", "9:00pm"]
}
var eventArray = [event1Array, event2Array];
I want to loop through using just two loops (inner and outer) using an alert like this
alert("attend a " + eventArray.name + " starting " + theEvent.time)
But my event info keeps printing twice like
attend a wedding starting 10am,
attend a wedding starting 12pm
attend a housewarming starting 7pm
attend a housewarming starting 9pm
here's the complete code
var event1Array
{
name: wedding;
time: ["10:00am", "12:00pm"];
}
var event2Array
{
name: housewarming;
time: ["7:00pm", "9:00pm"];
}
var div = document.getElementById("events");
var eventArray = [event1Array, event2Array];
for (var i = 0; i < eventArray.length; i++)
{
var theEvent = eventArray[i];
for (j = 0; j < theEvent.time.length; j++)
{
console.log("Attending a wedding" + theEvent.name + "starting" + theEvent.time[j]);
}
}
They aren't Arrays. event1Array and event2Array are actually Objects, so you don't want to loop through them. You should only be looping through the eventArray.
for (var i = 0, len = eventArray.length; i < len; i++) {
alert("attend a " + eventArray[i].name + " starting " + eventArray[i].time[0]);
}
Here is a working jsfiddle...
try this
alert("attend a " + eventArray.name + " starting " + theEvent.time[0])