I need to generate 398 lines of html code. This is the first line:
{<img src="images/blackcelebratory/2014/001.jpg"/>}
then I need to increment the image name up to 398.jpg. So the name of the image on the last line would be:
.../398.jpg
Is there a way, using a text editor, or Dreamweaver, or a bit of code, to automate generating these lines of code?
<?php
for ($x=0; $x<=398; $x++) {
echo "<img src="images/blackcelebratory/2014/". $x .".jpg"/>";
}
?>
In jquery:
for(var i = 1; i<399; i++){
$("body").append("<img src='images/blackcelebratory/2014/"+i+".jpg' />");
}
Try a loop: JSFIDDLE
<script>
for(i = 1; i < 399; i++) {
var img = document.createElement('IMG');
var j = i.toString();
var num = [0, 0].slice(0, j.length < 4 ? 3 - j.length : 0).join('') + j;
img.src = "images/blackcelebratory/2014/" + num + ".jpg";
document.body.appendChild(img);
}
</script>
Related
I am trying to write program that lists all numbers from 0-15 add whether the number is even odd (i.e. "0 is even, 1 is odd", etc.). I'm doing for my AP Computer Science Principles class and need to use a for loop in order to get full credit. I typed it like so:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Loops</h2>
<p id="p"></p>
<script>
var text = "";
var i;
for (i = 0; i < 16; i++) {
text += i + " is even" + "<br>";
}
document.getElementById("p").innerHTML = text;
</script>
</body>
</html>
but it outputs each integer value of i as even, like so:JS Loops Output How should I go about determining whether each integer value of I is even or odd? I tried using an else if statement in the for loop, but it made it not output anything.
<script>
let text = "";
let i;
for (i = 0; i < 16; i++) {
if (i % 2 == 0) {
text += i + " is even" + "<br>";
} else {
text += i + " is odd" + "<br>";
}
}
document.getElementById("p").innerHTML = text;
</script>
I'm trying to dynamically populate a select and call a truncate function in the loop... like below. I want to send the option text down to the function, truncate it if it's longer than 20 chars and send it back before it gets added to the option and appended to the select.
$(function() {
for (var i = 0; i < response.option.length; i++) {
var truncatedText = truncate();
var text = response.option[i].name;
truncate(text);
$("select").append("<option>" + truncatedText.text + "</option>");
}
});
function truncate(text) {
var textLength = text.length;
if (textLength > 20) {
text = text.substr(0, 20) + '...';
}
return text;
}
After jsfiddling for a while I landed on a working solution. Is there a more elegant way to do this?
https://jsfiddle.net/kirkbross/pcb0a3Lg/9/
var namesList = ['johnathan', 'tim', 'greggory', 'ashton', 'elizabeth'];
$(function() {
for (var i = 0; i < 5; i++) {
var name = namesList[i];
$('#names').append('<option>' + name + '</option>');
}
var selected_option = $('#names').find('option:selected').val();
var truncated = truncate(selected_option);
$('option:selected').text(truncated.new);
$('#names').change(function(){
var selected_option = $(this).find('option:selected').val();
var truncated = truncate(selected_option);
$('option:selected').text(truncated.new);
});
});
function truncate(selected_option) {
var nameLength = selected_option.length
if (nameLength > 4) {
selected_option = selected_option.substr(0, 4) + '...';
}
return {new: selected_option}
}
Here is my JSON
var gal = [
{
"folder":"nu_images",
"pic":"gd_42.jpg",
"boxclass":"pirobox_gall",
"alt":"Rand Poster 1",
"title":"Rand Poster 1",
"thfolder":"th",
"thumbpic":"th_gd_42.jpg"
},
{
"folder":"nu_images",
"pic":"gd_13.jpg",
"boxclass":"pirobox_gall",
"alt":"Explosive Pixel Design",
"title":"Explosive Pixel Design",
"thfolder":"th",
"thumbpic":"th_gd_13.jpg"
}
];
and here is my for loop
for (i = 0; i < gal.length; i++) {
document.getElementById("gallery").innerHTML = "" + "<img src=\"" + "http:\/\/galnova.com\/" + gal[i].folder + "\/" + "th\/" + gal[i].thumbpic + "\"" + "border=\"0\"" + "alt=\"" + gal[i].alt + "\"" + "title=\"" + gal[i].title + "\"\/>" + ""
};
I am trying to make my JSON show all of the objects in HTML one after the other. I can get it to show the first one or whatever number I put into the array but I don't know how to make it generate a list of them.
Here is a link to my jsfiddle. Any help you can offer would be greatly appreciated.
http://jsfiddle.net/o7cuxyhb/10/
It's being generated here <p id="gallery"></p> just not correctly.
You're overwriting your html with every loop iteration:
document.getElementById("gallery").innerHTML = ...
^---
Perhaps you want something more like
document.getElementById("gallery").innerHTML += ...
^---
which will concatenation the original html contents with your new stuff.
And technically, you shouldn't be doing this in a loop. Changing .innerHTML like that causes the document to be reflowed/re-rendered each time you change .innerHTML, which gets very expensive when you do it in a loop. You should be building your html as a plain string, THEN adding it to the dom.
e.g.
var str = '';
foreach(...) {
str += 'new html here';
}
document.getElementById("gallery").innerHTML += str;
for (i = 0; i < gal.length; i++) {
document.getElementById("gallery").innerHTML += "" + "<img src=\"" + "http:\/\/galnova.com\/" + gal[i].folder + "\/" + "th\/" + gal[i].thumbpic + "\"" + "border=\"0\"" + "alt=\"" + gal[i].alt + "\"" + "title=\"" + gal[i].title + "\"\/>" + "" };
Add a += instead of an = after innerHTML
Try this:
function displayJson(jsonArray){
var container = document.getElementById("gallery");
for (var i=0; i<jsonArray.length; i++){
var newElement = document.createElement("a").innerHTML = jsonToHtml(jsonArray[i])
container.appendChild(newElement);
}
}
function jsonToHtml(jsonObj){
//Define your dom object here
var el = document.createElement("a").innerHTML = '' // you code here
...
return el;
}
displayJson(gal);
I'm trying to populate a HTML select list from a text file located on the server. The file is setup like this:
ttt1111,John Doe
xxx2222,Jane Doe
etc....
The first column would be the <option value=""> and the second would be the displayed text. I read in the file and then split it into an array by each line. I'm having trouble trying to figure out the code to create the correct append line using the two values.
I'm extremely new to this so any help at all is appreciated, even just links to examples. This is my code so far, but it just assigns the entire line to the value and the text output.
function PopulateSupervisorList() {
var Suplist=[];
var SupervisorFile="text.txt";
var DDL = $("#iSupervisor");
var SuperID=[];
$.get(SupervisorFile,function(data) {
Suplist = data.responseText.split("\n");
for (var i=0; i < Suplist.length; i++) {
DDL.append("<option value='" + SuperID[i] + "'>" + Suplist[i] + "</option>")
}
});
}
You have to split each line in columns
try this
function PopulateSupervisorList() {
var SupervisorFile="text.txt";
var DDL = $("#iSupervisor");
$.get(SupervisorFile,function(data) {
var suplist = data.responseText.split("\n"),
cols;
for (var i=0, len=suplist.length; i<len; i++) {
cols = suplist[i].split(','); //split the line in columns
//so cols[0] -> ttt1111
//and cols[1] -> John Doe
//and so on for the rest lines
DDL.append("<option value='" + cols[0] + "'>" + cols[1] + "</option>");
}
});
}
Quick question here.
I want to search a TextArea component (flex) to see if there are any lines containing "?". If there is, the whole line will be removed.
How do I do this?
Example:
This is what I have:
10005 20003
10067 52234
03357 ?
30057 21135
64227 ?
25777 99523
This is what I need to get:
10005 20003
10067 52234
30057 21135
25777 99523
Use the regular expressions :
myTextArea.text = myTextArea.text.replace(/.*\?.*/g,"");
You could simply loop through the lines and skip those that include a question mark. Something like that should work:
var newText = "";
var lines:Array = yourText.split("\n"); // or \r
for (var i:int = 0; i < lines.length; i++) {
var line:String = lines[i];
if (line.indexOf("?") >= 0) continue;
newText += line + "\n";
}
trace(newText);
Should you want to get rid of the loop, this is the RegEx to use:
myTextArea.text = myTextArea.text.replace(/(^|\n|\r)+.*?\?.*/g,"");