Problems with my Javascript image preloader code - javascript

I can't seem to understand why my images still won't show up with my code. All my folders and images are correctly names and placed accordingly. However, if someone could look over my code and see if there is an error there and get this code to run properly. It would be great.
<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
<script type="text/javascript">
function changeImage(replacement)
{
document.getElementById("main_image").src = replacement;
return false;
}
// End -->
</script>
</head>
<body>
<p>
Image 1
Image 2
Image 3
Image 4
</p>
<p>
<img id="main_image" src="image-viewer/blank.jpg" alt="" /></p>
<p><center>
<font face="arial, helvetica" size"-2">
</center><p>
</font></body>
</html>

Remove the return false; line.
(This should only be used for onclick handlers)
When you return any value from a javascript: URI, the browser navigates to the return value.
When you return false from an event handler, the event is suppressed.

It's hard to tell without an example page. If all your images are under the 'image-viewer' directory then you will need to add that to the path in all your links i.e
Image 1

Is image1.jpg, image2.jpg, image3.jpg, and image4.jpg in the same folder as the file you pasted? If not, you need to specify the path to that in your javascript:changeImage() call.

Related

If the value of img src is changed by a JS click event why doesn't this value start empty when the page that holds it is revisited with back button?

When I used JS to first add and then delete an image from the browser I anticipated that the screen would render clear when I left the page and then returned using the back button. However when I returned the image was once again present on the screen. This happened despite the fact that the screen is set to start clear, i.e. <img src=""> and before I left I used the Delete Image button to remove the image that I had added. For some reason the image was there again.
How to recreate this behavior:
Open Page 1
Choose an image file from your system
JavaScript will set the value of <img src=""> to your image and display it
Click the Delete Image button and the image will be removed
Click the Link To Page Two button
Use the back button on your browser and when you return the image will be on the screen again
If instead of the back button you return with Link To Page One the screen starts fresh without an image
page-one.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Page One</h1>
<p>link to Page Two</p>
<p><img src="" id="theImage"></p>
<p><input type="file" name="imageFile" accept=".gif,.jpg,.png" id="inputImageFile"></p>
<button id="theButton">Delete Image</button>
<script>
let theImage = document.querySelector('#theImage');
let inputImageFile = document.querySelector('#inputImageFile');
let theButton = document.querySelector('#theButton');
inputImageFile.addEventListener('input', imageUpload);
theButton.addEventListener('click', deleteImage);
function imageUpload(e) {
let uploadedFile = e.target.files[0];
let forViewing = new Image();
forViewing.src = URL.createObjectURL(uploadedFile);
theImage.src = forViewing.src;
}
function deleteImage() {
theImage.src = '';
}
</script>
</body>
</html>
page-two.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Page Two</h1>
<p>link to Page One</p>
</body>
</html>
The most probable explanation is that the browser remembers last successfully loaded content - when you change the source into empty string the browser has "nothing" to cache so there is a chance the engine of the specific browser (or all of them) leaves the cache unchanged - try changing the source into something like "pixel image" in your deleteImage function like this:
theImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiYAAAAAkAAxkR2eQAAAAASUVORK5CYII=';
it will load a transparent 1x1px png and probably replace the cached image.
...or use the cache controlling headers on the server - to tell the browser not to cache.
on the second thought
in your delete fuction add this line:
inputImageFile.value = '';
it works now ;)
it looks like the input plays the role - the value is being cached - and when browser sets the value from cache - i guess the 'input' event fires - and your script displays the image ;)

How to craft a more elegant implementation

I've made an interface for my students where they click an image and hear the description pronounced via text-to-speech, and the text description appears in a div.
Currently I'm calling the text from the image because the onclick event for the speech only works if it's on the div, and since it's a (this) event I don't understand how to combine the two.
First, is it possible, or "better" - to have a single click on the div trigger both functions, rather than splitting them between the div and the image as I've done? This is the only way I could figure out how to get it all working. So that's the first thing.
Second, I'm re-stating this code every time
jQuery(this).articulate('speak')" data-articulate-append=
How can I make this more economical? In reality I have hundreds of items, and there are a bunch more settings in between the jQuery and data-articulate. I've shortened it for this post but in reality it's much longer and repeated hundreds of times.
Last, is it possible to draw the content for the innerHTML from the data-articulate-append part of the TTS command, since it's the same in every case?
Many thanks, I've spent quite a while constructing what I have so far as I'm new to JS. I'm learning and I've tried to answer these questions myself but it's not yet within my skillset, and sorry if I'm not using all correct terminology in my post. I'm including a stripped-down version of the page here, with just the essentials. Any input is greatly appreciated.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script src="http://www.clients.brettcolephotography.com/test/jquery-3.1.1.min.js"></script>
<script src="http://www.clients.brettcolephotography.com/test/articulate.min.js"></script>
<link href="http://www.clients.brettcolephotography.com/test/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="elephant">
<img onclick="elephant()" src="http://www.clients.brettcolephotography.com/test/01.jpg">
</div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="camel">
<img onclick="camel()" src="http://www.clients.brettcolephotography.com/test/02.jpg">
</div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="bear">
<img onclick="bear()" src="http://www.clients.brettcolephotography.com/test/03.jpg">
</div>
</div>
<div id="word">
</div>
<script>
function elephant() {
document.getElementById("word").innerHTML ="elephant";
}
function camel() {
document.getElementById("word").innerHTML ="camel";
}
function bear() {
document.getElementById("word").innerHTML ="bear";
}
</script>
</body>
</html>
You can accomplish this by:
Giving each div a class, for my example its speak. Then add an eventlistener for speak elements. Then in that event listener, you can run multiple functions. You can also get rid of the image's onclick handler.
<div class="speak" data-articulate-append="elephant"><img src="http://www.clients.brettcolephotography.com/test/01.jpg"></div>
<div class="speak" data-articulate-append="camel"><img src="http://www.clients.brettcolephotography.com/test/02.jpg"></div>
<div class="speak" data-articulate-append="bear"><img src="http://www.clients.brettcolephotography.com/test/03.jpg"></div>
$(document).ready(function(){
$(".speak").on("click",function(){
$(this).articulate('speak');
$("#word").html($(this).data("articulate-append"));
});
});

6 javascript tasks assigned to me by my lecturer

I am a complete beginner to javascript. I am also new to this website. I am asking for help to complete an assignment. I have been trying for more than 4 hours by looking at lecture material and online for a solution. It is causing me a lot of unnecessary stress. Before javascript we only used CSS and Html. I was given 6 javascript tasks to manipulate the html file (taskc.html) already given to me.
The tasks are as follows
Make a statement to change contents of h1 from "Welcome" to "Text"
2nd statement should make an new alert window when the page loads that delivers a message explaining what the page is about
3rd statement should change the title to "text"
4th statement should log the contents (innerHTML) of the first paragraph element in the console.
5th statement should hide the contents of the second paragraph when the page loads
6th statement should change the contents of the header to have a new colour of your choice
Here is that html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
</body>
</html>
Because the actual coding im meant to add is meant to be in the .js file I was given. so I figured I had to link the js file in the html file so I added
<script type="text/javascript" src="taskc.js"></script>
With that out of the way I went to the lecture notes and I thought I would simply need to modify some of the code given to me there like
document.getElementById('demo').innerHTML = 'Hello World!';
When I put this code in brackets I got the error (document is not defined)
I modified it to match the requirements for task 1
here it is
document.getElementById('header').innerHTML = 'text';
I was confused because I didn't know what this error meant and of course Errors and how to fix them are never explained so I had to lookup how to resolve the error.
I found that to fix it I have to declare it as a variable so I ended up doing this.
var document = 'taskc.html';
When I did this for document, alert and console all the errors went away, but when I did a live preview only statement 1 was working
If anyone could help me fix this I would really appreciate because I don't understand enough javascript to be able to complete this in a reasonable amount of time.
So first: Please use Javascript functions to keep your code tidy and clean.
Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
<script type="text/javascript" src="taskc.js">test();</script>
</body>
</html>
function test(){
alert("This is a test!");
}
Always implement scripts that are document referenced at the bottom of your html.
If you use JQuery you can use following code to check document is loaded:
$(document).ready(function(){
//foo bar
});

Open image using Java Script and call the function in html

I have two separate files one with my html code and with my javaScript. What I am trying to do is create a function in javascript then call that function in the html. Both files are in the same folder along with the image. I'm new to both languages and to this site so please go easy;
I would really appreciate it if someone could help me please.`
JavaScript to load image below:
var menu = new image();
menu.src = "Fitness App Entry Scrren.jpg"
function menuScreen(){
document.getElementById("menu").getAttribute("src");
}
Html code to call function:
<!DOCTYPE html>
<html>
<head>
<body src="Functions.js">
<script onload="menuScreen()"></script>
</body>
<head>
</html>
What you are doing is against the rules of HTML. First of all, <body></body> should be outside of <head></head>. You should have <script></script> in either <head></head> or <body></body>. The <body> tag should have the onload attribute set to menuScreen(), and the <script> tag's src attribute should be set to Functions.js (as John Hascall said). By the way, John Hascall is right, there is no element with the ID of "menu" so it won't work unless you create a <div> or <iframe> with the specific ID and append the image to it in your Functions.js file.
So, your JavaScript code should look like this:
var menu = new Image(); // note that the constructor is capitalized
menu.src = "Fitness App Entry Screen.jpg";
// Create a <div> with the image within it.
var division = document.createElement("div");
division.setAttribute("id", "menu");
division.appendChild(menu);
document.body.appendChild(division);
function menuScreen() {
division.getAttribute("src"); // you can use division because it has the id of menu
}
And here is your HTML code to run the page (according to the HTML5 specifications, note that):
<!DOCTYPE html>
<html>
<head>
<script src="Functions.js"></script>
</head>
<body onload="menuScreen()">
<!-- Left intentionally blank -->
</body>
</html>
Hopefully this will help you!

Getting one element to effect multiple images

I am trying to make a page of tiled images which each have a three state roll over effect. I got it to work for the first image but cannot get it to effect the other images. I know it has something to do with me using getElementById but haven't been able to figure out a solution
Current Code:
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css"
href="test4.css"/>
<script>
var clicked = false;
function onClick()
{
clicked = true;
document.getElementById("myImage").src="images/in.jpg";
}
function onMouseover() {
if(!clicked)
document.getElementById("myImage").src="images/half.jpg";
}
function onMouseout(obj) {
if(!clicked)
obj.src="images/out.jpg";
}
</script>
</head>
<body>
<img onmouseover="onMouseover()" onmouseout="onMouseout(this)" onclick="onClick()"
id="myImage" src="images/out.jpg" width="167" height="230">
</body>
</html>
PLEASE && THANKS
Your explanation implies that there are many <img/> on your page but your code only shows one. I will assume that your explanation is correct and that are many <img/> for the purposes of this answer.
There can be only one element on the page with a given id. Any more than 1 and the page is invalid and you will see issues like the one you see. Instead of retrieving by id, give all the elements the same class and retrieve with document.getElementsByClassName

Categories