Why won't the images appear in the browser? - javascript

In this code, the images won't appear once I run it in the browser. I have tried different browsers and different ways to sort the image. Could you tell me why this is happening and how I will be able to fix this because I have been trying for days now. Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Traffic Light Sequence</title>
<body>
<h2>Manuel Traffic Light Sequence</h2>
<img id="light" src="C:\Users\Mrs Afolabi\Documents\Computing\lights\red.gif">
<button type="button" onClick="changeLights()">Change Lights</button>
<script>
var list = [
"C:\Users\Mrs Afolabi\Documents\Computing\lights\green.gif",
"C:\Users\Mrs Afolabi\Documents\Computing\lights\amber.gif",
"C:\Users\Mrs Afolabi\Documents\Computing\lights\red.gif"
];
var index = 0;
function changeLights()
{
index = index + 1;
if (index == list.length) index = 0;
var image = document.getElementById('light');
image.src=list[index];
}
</script>
</body>
</html>

<html lang="en">
<head>
<meta charset="utf-8">
<title> Traffic Light Sequence</title>
</head>
<body>
<h2>Manuel Traffic Light Sequence</h2>
<img id="light" src="red.gif">
<button type="button" onClick="changeLights()">Change Lights</button>
<script>
var list = [
"red.gif",
"green.gif",
"amber.gif"
];
var index = 0;
function changeLights() {
index = index + 1;
if (index == list.length) index = 0;
var image = document.getElementById('light');
image.src = list[index];
}
</script>
</body>
</html>
I've cleaned up the code a little. Note that the full path has been removed from the images.
Where ever the HTML file is located if the images are located directly next to the HTML file then they do not need an absolute path (c:/...). Instead relative paths should be used. So assuming the HTML file is found at C:\Users\Mrs Afolabi\Documents\Computing\lights\index.html then the following code below should work as it can easily find the .gif files.

Natively there's no permission to access this kind of URL (from user's computer) that starts of file://, C://, etc... (in any web browser)
If your file is located at some directory in computer, then you can input the files you'll use that are in the same directory, like:
src/styles.css, file.png, etc

Related

How to load an XML file in JavaScript, get specific info from it, and then display it through alert()?

So, I want to make a program that will be able to get user data(a ton of bug names separated by commas), go through, get data for each one, then display all of that data in a table. I have been through rewriting this like 5 times and still nothing happens. Anyone know what is wrong with this code?
My html code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 align="center">Bugs</h1>
<p>In the area below, type in each of the insects you want information
about, seperate them with a comma.</p>
<textarea id="insects"></textarea>
<br>
<button type="button" id="go">Find out!</button>
<br>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
document.getElementById('go').onclick = function() {
var input = document.getElementById('insects').value;
var splitted = input.split(',');
for (i = 0; i<splitted.length; i++) {
var bug1 = splitted[i];
var part1 = // I need to assign it to bug1 without any whitespace
var finish = part1.toLowerCase();
find1(bug1);
}
}
function find1(bug) {
var xmlDocument = $.parseXML("externalfile:drive-77136639a78ffb21e72c7c4dfe7f7bb73604aeb3/root/Bugs/bugs.xml");
var pain = $(xmlDocument).find("value[type='" + bug + "'] pain").text();
alert(pain); <!-- This is to see if it works -->
}
</script>
</body>
Here is my XML code(btw the XML file is called bugs.xml and yes they are in the same exact folder in My Drive/Bugs:
<?xml version="1.0" encoding="UTF-8"?>
<bugs>
<bug type="blisterbeetle">
<name>Blister Beetle</name>
<pain>55</pain>
<conservation></conservation>
<habitat></habitat>
<rarity></rarity>
<class></class>
<order></order>
<family></family>
<species></species>
<dangerous></dangerous>
<external></external>
</bug>
</bugs>

JavaScript setInterval animation creates gibberish without error in the console

I'm trying to create a simple animation with setInterval, and I'm testing it on a Python SimpleHTTPServer because I had some cross-origin issues earlier. There is no error in the console when I load the page, and I can see the loading overlay properly, and then the page just becomes gibberish (see images below) although the console shows it is loading image properly. I'm wondering what is wrong. Thanks!
(The gibberish is really long, so this screenshot is just part of it.)
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fish</title>
<link rel="stylesheet" type="text/css" href="./assets/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="overlay">
<img src="http://i.imgur.com/KUJoe.gif">
</div>
<div id="fish" style="width:100px; height:100px;"></div>
<script type="text/javascript">
$(window).on("load", function(){
$("#overlay").fadeOut();
var r = 1;
setInterval(function(){
if (r < 5) {
$("#fish").load("./assets/images/fish" + r + ".jpeg");
r++;
} else {
r = 1;
}
console.log(r);
console.log("./assets/images/fish" + r + ".jpeg");
}, 100);
});
</script>
</body>
</html>
When you say this:
$("#fish").load("./assets/images/fish" + r + ".jpeg");
...you are loading the data in the jpeg file as text within the #fish element - that is, you are doing the equivalent of trying to open a jpeg file in Notepad.
What you probably want to do is have an <img> element and set its src to that jpeg file - either change the <div> to be an <img> or add an <img> within the <div>:
<div style="width:100px; height:100px;"><img id="fish"></div>
// and then
$("#fish").prop("src", "./assets/images/fish" + r + ".jpeg");
Note that for smooth animation you probably want to "preload" all of the images, then use setInterval() after that to switch between them.

JavaScript set interval not working?

Could someone please explain why the following code below doesn't run an automated sequence of images'. I was able to do this before with my code prior to this now that I have edited it slightly the automation doesn't work.
<!DOCTYPE html>
<html>
<body>
<img id="Light" src="./red.jpg">
<button type="button" onclick="ChangeLights()">Change Lights</button>
<script>
var List = [
"./red.jpg",
"./redyellow.jpg",
"./green.jpg",
"./yellow.jpg",
];
window.onload = "ChangeLights()";
var index = -1;
function ChangeLights() {
index ++;
var image = document.getElementById('Light');
image.src = List[index % List.length];
}
setInterval(ChangeLights, 1000)
</script>
</body>
</html>
It works fine, but you can change Array to a different name and call ChangeLights(); without "" in line 18 .
The automation works, but the path to the images is wrong, you should fix that by pointing to the right folder, probably by removing the "./" on "./NAME_OF_THE_IMAGE".

Calling .jSignature() on div doesn't update the div

I got this code from the GitHub:
<script src="path/to/jSignature.min.js"></script>
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
<div id="signature"></div>
But it doesn't pull anything up on the actual webpage. I would think there is more code required but I don't know where to start.
Here is a minimal working example
<!DOCTYPE html>
<html lang="en">
<head>
<lang>
<title>Minimal working jSignature Example</title>
<meta charset="UTF-8">
<!-- Files from the origin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://willowsystems.github.io/jSignature/js/libs/jSignature.min.js"></script>
<head>
<script>
$(document).ready(function() {
// Initialize jSignature
$("#signature").jSignature();
})
// ripped from the description at their the Github page
function getBase64Sig(){
// get the element where the signature have been put
var $sigdiv = $("#signature");
// get a base64 URL for a SVG picture
var data = $sigdiv.jSignature("getData", "svgbase64");
// build the image...
var i = new Image();
i.src = "data:" + data[0] + "," + data[1];
// and put it somewhere where the sun shines brightly upon it.
$(i).appendTo($("#output"));
}
</script>
<body>
Put your signature here:
<div id="signature"></div>
<button onclick="getBase64Sig()">Get Base64</button>
<div id="output"></div>
</body>
</html>
I hope you can go on from here.
It is really as simple as they describe it to be, only their description of the actual example is a bit lacking for beginners.

AngularJS File placing

Do I need to place the files in a local-server or any server to get the results?
index.html:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta char-set = "UTF-8">
<title>AngularJS | Passing Data between Different Scopes</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src = "controller.js"></script>
</head>
<body ng-app = "mainApp">
<div ng-controller = "app">
<li ng-repeat = "i in myRange">
{{i}} <br/>
</li>
</div>
</body>
</html>
controller.js:
var app = angular.module('mainApp', []);
app.controller('app', function($scope) {
var range = 10;
var myRange = [];
for (i = 0; i<range; i++)
{
myRange.push(i);
}
$scope.myRange = myRange;
});
When i'm running using localhost it gets the result i wanted. But when I run it without using any server or local-server it shows only the html page, not returning data from controller.js file. As i know this must work without using of any local-server. what's the wrong here?
Edit:
When i run the html file without using local-server the output is as follows.
As #csharpfolk suggested, the problem is with loading angular.js library use 'https://' instead of '//'. If you use '//' browser will try to load using 'file://' protocol.

Categories

Resources