can you please kindly assist me with this code? I am trying to populate a list of images when a button is clicked.. The screenShotsList.txt consists of files names such as:
out1.png
out2.png
out3.png
out4.png
out5.png
out6.png
out7.png
out8.png
Right now, my problem is idk the syntax to display my array as a group of images and the code does not work when a button is clicked.
Here is the code I have so far..
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("button").click(function(){
var file = "C:/newbots/ctfuPoster/data/screenShotsList.txt";
function getFile(){
$.get(file,function(txt){
var lines = txt.responseText.split("\n");
for (var i = 0, len = lines.length; i < len; i++) {
// Equivalent: $(document.createElement('img'))
var img = $('<img id="dynamic">');
img.attr('src', lines[i]);
img.appendTo('#imagediv');
}
});
}
});
</script>
Thank you in advance
For this example you have a simple html page with a little script
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$.ajax({
url : "screen.TXT",
dataType: "text",
success : function (data) {
console.log(data)
var lines = data.split(",")
for (var i = 0; i < lines.length; i++) {
var img = $('<img class="dynamic">');
img.attr('src', lines[i]);
img.appendTo('#imageDiv');
}
}
});
});
})
</script>
</head>
<body>
<div id="imageDiv"></div>
<input value="clickMe" type="button" id="button">
</body>
</html>
For the operation of the script i created a simple text file with the following structure and name screen.txt. This text file contains links to pictures of lorempixel.com must be at the same level of html page
screen.txt file:
http://lorempixel.com/output/abstract-q-c-300-300-7.jpg,
http://lorempixel.com/output/abstract-q-c-300-300-9.jpg,
http://lorempixel.com/output/abstract-q-c-300-300-2.jpg
For online working example visit: this page
Related
I'm new to Javascript and have been spinning on writing this piece of code in order to display a series of pictures on a page from an external source, sort of like an instagram feed, using a GET request through jQuery. I have been given a JSON file that contains an array of image URLs, some of which I want to exclude because they are broken.
Here is the code that I've written thus far - I've tested it and it doesn't work and I'm looking for some guidance on what aspects I may be missing in order to get my code to work:
$(document).ready(function () {
$('imagesFromJSON').click(function () {
$.getJSON("images.json", function (data) {
var arrItems = []; // The array to store JSON items.
$.each(data, function (index, value) {
arrItems.push(value); // Push values in the array.
});
for (let i = 0; i < arrItems.length; i++) {
if (arrItems[i].contains('fakeurl') === false) {
let img = document.createElement('img');
img.src = arrItems[i].Image
document.querySelector('.container').appendChild(image)
}
}
});
});
});
<html>
<head>
<meta charset="UTF-8">
<title>Feed Test</title>
<script type='text/javascript' src='feed.js'></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>FEED TEST</h1>
<p><input type="button" id= "imagesFromJSON" value="Show Images" /></p>
<div class="container"></div>
</body>
</html>
I am trying to make a really simple slider. All is working correctly except one thing. The problem is that it's not loading the image named as 'b.jpg'. If i rename the same picture with any other name it loads it but it's not loading any image with name 'b.jpg'.
Here's my code. Please tell me if something is wrong.
<!DOCTYPE html>
<html>
<head>
<title>Slider ~ Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img id="imgSlider">
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Here's script.js :
var imgLinks = ['a.jpg', 'b.jgp', 'c.jpg', 'd.jpg', 'e.jpg'];
var mySlider = document.getElementById('imgSlider');
var imgIndex = 0;
function changeImage() {
mySlider.setAttribute('src', imgLinks[imgIndex]);
imgIndex++;
if (imgIndex >= imgLinks.length) {
imgIndex = 0;
};
}
var intervals = setInterval(changeImage, 2000);
mySlider.onclick = function (c) {
clearInterval(intervals);
}
your code has b.jgp and all others are jpg.
imgLinks = ['a.jpg', 'b.jgp', 'c.jpg', 'd.jpg', 'e.jpg'];
correct it to b.jpg it will work fine
imgLinks = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg', 'e.jpg'];
My task for my Javascript class is to create a script for this page that changes the image every 3 seconds. I think my code is correct, however Firebug tells me "document.getElementByID is not a function." Can someone show me what I am doing incorrectly?
This is my JS script.
<script type="text/javascript">
var i = 0
var lightArray = ["pumpkinOff.gif", "pumpkinOn.gif"]
var currentLight = document.getElementByID('light')
// ChangeLight Method Prototype
function changeLight() {
currentLight.src = lightArray[i++];
if (i == lightArray.length) {
i = 0;
}
}
setInterval(changeLight, 3000)
</script>
Here is my edited HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript for Programmers</title>
</head>
<body>
<h2>Happy Halloween!</h2>
<img id="pumpkin" src="pumpkinoff.gif" alt="pumpkin">
<script src="../Script/spooky.js"></script>
</body>
</html>
Incorrect capitalisation on
var currentLight = document.getElementByID('light')
Should be:
var currentLight = document.getElementById('pumpkin')
I have attached a working fiddle:
http://jsfiddle.net/11csf4k2/
It's a typo it should be:
var currentLight = document.getElementById('light'); //Not ID
It should be Id not ID:
document.getElementById('light');
Also note that you don't have element with id light on your page. It probably should be
document.getElementById('pumpkin');
So I have a website with a Header.html. In the header are three buttons. I've copied the Header.html into all of my other pages with jquery's load. Now what I would like to do is change the colour of one of the buttons depending on the page it's on. But when I use document.GetElementById in javascript it can't find the div of the button I've copied from the Header.html
Here's the Header.html
<div id="Header_Wrapper">
<div id="Header_PageLinksWrapper">
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_Games" href="..\Pages\Games.html">Games</a>
</div>
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_AboutMe" href="..\Pages\AboutMe.html">About Me</a>
</div>
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_CV" href="..\Pages\CV.html">CV</a>
</div>
</div>
</div>
The javascript file:
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html");
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
}
);
function SetPageLinkColours(aPath)
{
var firstIndex = aPath.lastIndexOf("/");
var lastIndex = aPath.indexOf(".html");
var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex);
var divElement = document.getElementById(id);
if (divElement == null)
{
console.log("Could not find element " + id);
}
divElement.style.color = 0xffffff;
}
One of the pages (eg. Games.html)
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Adabelle Combrink - Games</title>
<link rel="stylesheet" type="text/css" href="..\Templates\Header.css"/>
<link rel="stylesheet" type="text/css" href="..\Templates\Page.css"/>
<link rel="stylesheet" type="text/css" href="..\Pages\Games.css"/>
<script type="text/javascript" src="..\Scripts\jQuery.js"></script>
<script type="text/javascript" src="..\Scripts\Defaults.js"></script>
</head>
<body>
<header>
<div id="Header"></div>
</header>
</body>
</html>
What this gives me in the console is Could not find element PageLink_Games. I don't get that error if I use something that is in Games.html like Header.
Is there any other way of doing the same thing. I know you can include files into eachother with php but I haven't gotten that right and don't seem to be able to run .php files in Visual Studio.
jQuery.load has a success callback. Use it to assure your code is only executed after the loading is complete.
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html", null, function() {
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
});
}
);
Also your SetPageLinkColours function can be improved with jQuery:
function SetPageLinkColours(aPath)
{
var firstIndex = aPath.lastIndexOf("/");
var lastIndex = aPath.indexOf(".html");
var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex);
var divElement = $("#"+id);
if (!divElement.length)
{
console.log("Could not find element " + id);
}
else
{
divElement.css('color','white');
}
}
load function makes async request , so your code tries to find element before it rely appears. U need to use load function callback http://api.jquery.com/load/
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html", function () {
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
});
}
);
I am testing putting a text editor on my page and storing it as part of a JSON object.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js" type="text/javascript"> </script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
<link rel="stylesheet" href="/jquery.mobile-1.3.2.min.css"/>
<script src="/jquery-1.9.1.min.js"></script>
<script src="/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<form method="post" action="formSubmit.js">
<textarea name ="editor"></textarea>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
JS
$(document).ready(function () {
var text = $("editor").val();
var name = "project name";
var id = 5;
var item = new item(name, text, id);
var itemArray = localStorage.items;
if (itemArray == undefined) {
itemArray = [];
} else {
itemArray = JSON.parse(itemArray);
}
itemArray.push(item);
localStorage.items = JSON.stringify(itemArray);
});
I want to be able to store item in a JSON object. When I run this I receive a "not-well formed" error at line 1 of the Javascript. It's a very simple program I'm running and can't seem to pinpoint what is causing the error. Is the JSON done incorrectly or are scripts in my HTML header causing issues?
$("editor") is looking for an html tag called 'editor'. you probably want to attach an id attribute to your and do $('#editor')