Menu
Hi, as per the title, my code works and provides the specified outcome for this assignment. However, I believe there is probably a more efficient way of writing it – instead of having 3 separate functions I would think there could be 1 function that would provide the necessary output (colour and shape) each time an image is clicked on. Just curious to know and I also want to learn what isn’t in our text book. Thank you in advance.
[B][COLOR=”#0000CD”]This part of the assignment:
[COLOR=”#0000CD”]Task4: Write your Own Code
Write a program with the following specs
• The HTML document contains 3 images: a black circle, a red triangle, and a blue square.
• Preload these images into a JS array, before the HTML page is loaded.
• Attach an onclink event to each image such that the color and the shape of the image will be displayed once you click on the image.
[B]My code:
[CODE]<!DOCTYPE html>
<html>
<head>
<title>JavaScript A6 Task 4 Stringle</title>
<meta charset=”UTF-8″/>
<style type=”text/css”>
img
{
cursor:pointer;
}
</style>
<script type=”text/javascript”>
var myImages = Array(“circleblack.jpg”,”trianglered.png”,”squareblue.png”);
function myCircleFunction()
{
document.getElementById(“circle”).innerHTML = “This is a black circle”;
}
function myTriangleFunction()
{
document.getElementById(“triangle”).innerHTML = “This is a red triangle”;
}
function mySquareFunction()
{
document.getElementById(“square”).innerHTML = “This is a blue square”;
}
</script>
</head>
<body>
<p><em><strong>Click the shape to trigger a function.</strong></em></p>
<img name=”img0″ src=”circleblack.jpg” onclick=”myCircleFunction()” alt=”Black circle” />
<img name=”img1″ src=”trianglered.png” onclick=”myTriangleFunction()” alt=”Red triangle” />
<img name=”img2″ src=”squareblue.png” onclick=”mySquareFunction()” alt=”Blue square” />
<p id=”circle”></p>
<p id=”triangle”></p>
<p id=”square”></p>
</body>
</html>
Also, from what I see you're not pre-loading the images per the assignment. But I'm guessing that's what the "myImages" array is for.[/QUOTE]
[code=html]
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var images = ["circleblack.jpg","trianglered.png","squareblue.png"];
//loop though images array, create an image element for each one and set the src to the image url
for(var i = 0, l = images.length; i < l; i++) {
var img = document.createElement('img');
img.src = images[i];
}
</script>
<img name="img0" src="circleblack.jpg" alt="Black circle" />
<img name="img1" src="trianglered.png" alt="Red triangle" />
<img name="img2" src="squareblue.png" alt="Blue square" />
<div id="info"></div>
<script>
function showInfo(e) {
//get the clicked image from the event object and the shape and color from the alt attribute
var image = e.target,
desc = image.getAttribute('alt');
//display color and shape in info div
info.innerHTML = 'This is a '+desc;
}
//get all the image elements on the page + the info div
var images = document.getElementsByTagName('img'),
info = document.getElementById('info');
//loop through all the image elements on the page adding a click event which calls the showInfo function
for(var i = 0, l = images.length; i < l; i++) {
images[i].addEventListener('click',showInfo);
}
</script>
</body>
</html>
[/code][code=php]
var myObj = {
array1: [
1,
2,
3
],
array2: [
4,
5,
6
]
};
[/code][code=php]
var multiArray = [
[
1,
2,
3,
],
[
4,
5,
6
]
];
[/code]I find that some courses just provide the bare minimum and then expect the student to go off and figure out the rest for themselves. It can be a bit frustrating but I personally found that I learnt more about JavaScript by just playing around with it, learning things by myself using online resources. At least the course is giving you challenges to complete, by doing those your searching around for the best way to accomplish the task which has led you here.[/QUOTE]
Blondie... Are you doing this course as a requisite for something else like web design?[/QUOTE]
Blondie... Are you doing this course as a requisite for something else like web design?[/QUOTE]
[code=html]<!DOCTYPE html>
<html>
<head>
<title>JavaScript A6 Task 4 Stringle</title>
<meta charset="UTF-8"/>
<style type="text/css">
img { cursor:pointer; }
</style>
<script>
var d = document,
imgLoad = new Array();
function myClickFunction(o){
d.getElementById("outputMessage").innerHTML = "This is a " + o.title;
}
window.onload = function(){
if( l=d.images.length ){
for(i=0; i<l; i++){
imgLoad[i] = new Image();
imgLoad[i].src = d.images[i].src;
console.log(">>> "+imgLoad[i].src); // output to the console log the SRC url
}
}
}
</script>
</head>
<body>
<p><em><strong>Click the shape to trigger a function.</strong></em></p>
<img name="circle" src="blacktriangle.png" onclick="myClickFunction(this);" title="Black triangle" />
<img name="triangle" src="redcircle.png" onclick="myClickFunction(this);" title="Red circle" />
<img name="square" src="bluesquare.png" onclick="myClickFunction(this);" title="Blue square" />
<p id="outputMessage"></p>
</body>
</html>[/code]I am doing a Web Design & Creation certificate and this is my fourth course - JavaScript is one of the optional ones I chose - for me I really felt it was important to take this one. I'll need a lot more than just this JavaScript course - I'll tackle it again after completing the remaining four courses.[/QUOTE]
[code=html]
<a href='#' name='myName'>link</a>
<img src='image1.png' name='myName'>
<div name='myName'></div>
<div id='myName'></div>
<script>
console.log(document.getElementsByName('myName'));
</script>
[/code]Well, once you start to get it down pretty good you'll start having more fun with it. Because then you can just "create" and not have to think or do as much searching.
Just keep writing little things with it and you'll pick it up. That's one of the reasons I like looking around these forums. I find little projects that people have trouble with and see if I can write them myself. It's also a way for me to take a break from the bigger projects. I'm working on a fairly intensive database web-app that uses HTML, Javascript, PHP and MySQL. Sometimes I get a little burnt and like to mess around with other things for a bit ?
Anyway, best of luck!
Jeff[/QUOTE]
OK fine, I agree you [i]could[/i] use name, but there are better and more reliable ways of accessing elements in the DOM. Using the name attribute can cause some problems, for example take this:
[code=html]
<a href='#' name='myName'>link</a>
<img src='image1.png' name='myName'>
<div name='myName'></div>
<div id='myName'></div>
<script>
console.log(document.getElementsByName('myName'));
</script>
[/code]
I would expect that to bring back all the elements using the name attribute, BUT in IE9 it ignores the DIV with the name attribute and instead brings back the DIV with the ID attribute. In that case you'd probably be better off doing "document.querySelectorAll('[name="myName"]')".
The only time I'd use the name attribute is on form elements.
And yes, the title attribute is used for roll over text, but that's all it's used for, the ALT attribute is used for accessibility, that 'text replacement' is what screen readers see.[/QUOTE]
0.1.9 — BETA 5.18