i'm trying to 'cut' the hash of some urls in iteration, leaving only the img url (https://i.ytimg.com/vi/9Eu7SXGyvzQ/hqdefault.jpg) without the hash (?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDi79vN15idfFETvntyC9yat7FvZQ).
I got it working in this example (2 images) but in "real code" fail, as you can see they are still some issues in code I cannot figure out, maybe redundancy, not calling the src string correctly.
Need some advice.
Thanks.
function changeSourceAll() {
var images = document.querySelectorAll("#img,.style-scope,.yt-img-shadow");
for (var i = 0; i <= images.length; i++) {
var mini = images[i].src.substring(48);
var source = images[i].src = images[i].src.replace(mini, "");
}
}
changeSourceAll();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sometitle</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<img id="img" draggable="false" class="style-scope yt-img-shadow" alt="" width="210" src="https://i.ytimg.com/vi/9Eu7SXGyvzQ/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDi79vN15idfFETvntyC9yat7FvZQ">
<img id="img" draggable="false" class="style-scope yt-img-shadow" alt="" width="210" src="https://i.ytimg.com/vi/gCI1L0gP-vk/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLAUz6VUtsyrv5VZcfRvtnYM48ymHA">
<script src="java.js"></script>
</main>
</body>
</html>
Use a common selector to get all your img elements: for instance, you could rely on the class .yt-img-shadow.
Then use split() to divide each image src URL in two parts, separated by the symbol ?, and re-assign the "short" version of your URL to the image.
function changeSourceAll() {
const images = document.querySelectorAll(".yt-img-shadow");
for (let i = 0; i < images.length; i++) {
const mini = images[i].src.split('?')[0];
images[i].src = mini;
}
}
changeSourceAll();
<main>
<img id="img1" draggable="false" class="style-scope yt-img-shadow" alt="" width="210" src="https://i.ytimg.com/vi/9Eu7SXGyvzQ/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLDi79vN15idfFETvntyC9yat7FvZQ">
<img id="img2" draggable="false" class="style-scope yt-img-shadow" alt="" width="210" src="https://i.ytimg.com/vi/gCI1L0gP-vk/hqdefault.jpg?sqp=-oaymwEjCNACELwBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLAUz6VUtsyrv5VZcfRvtnYM48ymHA">
</main>
Related
Same title. I'm not sure if this is a browser bug or behavior, see below example:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var srcs = [
'https://i.stack.imgur.com/sIH1O.jpg?s=48&g=1',
'https://www.gravatar.com/avatar/9aa2aa68144b2781ac025a29c83bbdd4?s=32&d=identicon&r=PG',
'https://www.gravatar.com/avatar/c0377fc1b08293d3362611978913a32b?s=32&d=identicon&r=PG',
'https://www.gravatar.com/avatar/07f36acea2b942f61102221f92f62f6e?s=32&d=identicon&r=PG',
//
// 'data:image/png;base64,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',
// 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAIAAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+rrt20+0mnml8qCJC7ux4VQMkmvz3+Iv7Zfie68ZzPpsrrokNwwhgibYzx543H19+3vX6T694cTVdGvrJ1ylxC8RHsVIr4E+FHgH4beIPDOnw63YR2+s7nZ5N7GSXJLYx6gdvQV+hYnMY4aj7W19eh+QcO5W8wrypytoup13wr/bf8Ma5Da6X4ggudN1M/L50nzwv9W4IOPbHvX0pYzW+t6fb31owkt7iMSRyDupGRXxb8Xfht4Tg+H0mpeCLt9QitL9ZDDKAWjWT92wX5Q3LBDg9lyK+rv2cb/S9Y+FejW1hqVrqFxZwKl1Fbyb2tpGG7y35yGGcc+lXgM0jjIOVrNP5k8RZEsslFw2fzX3n0l9jUjpXwV+0Nc2PwF+MM81v4bS6jvp01O3nQlSivkSKMA8eZv7cAgcZr7mXW4yPviviL9tzQbfXPF+ma0/iK7uJbSNo1tIXwtovy78L9xgcZOQSGPJxgL8RnmKhgcI6mI2bS83+Kv8vU93hiv9Wx6lHVNHAeOPjXcQeD97aZY6fMZ0+wwKAEuGbBBYccDDEk44UnAr0T/gn7qFzqU/iuC306ZdHifc1+7ptknJHRVJHKjPykgc5PIrJ+FXwr0DxPr0Oo3mj6r4znlgWMPrEUJso3H8Q/u9Tk4bHGOnP2V4O8CaH4St0i0jR7DSnEWx106AQx4zuICjjGSeTz61+NYbxJwOV4yOGdOXLJ+9LTRar4d/PXofc8QUJ5tTfJpZaJ+p/9k=',
// 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFVUlEQVRYw8WXa2yTVRjHf+/etm/b9bJbt25zF8pgdzYdBUaQASIYJYjEaFSiRgPEAEYSEo1+0vjdkGhCTIjIB2+JkMAEZH7gNsIcsCsblwJzF7aua7e263p5u75+GGIWxujojOfr83/O+Z1znss5ws7P31P4H4dqLuJgIEj35Rv03OjF6/aBomBIMWDNz6K0ppiM7PT/BkCJKVw+00JbYweT0clpNo9zFI9zlK7m6xRV2nh200o0Ws38AUxOTnLuWCM3Wx2PnczRcQf3kIcX396IwZScOICiKJw/fnHa4oIAJr0WbyBEviWFN9bWsMSWwz23l6ON7Vzs6qH+0Ele2bEZKY6TmBVguN/FjZZbqEWRbetrWFVuozgvE4vZgNsXwJysQyUm3Vfnsbm2gms9g2z/6meunm2lduOyxABuX7uLIMC3e19jZdmCabb0RxxxeWE2H22t44sf/+CZ1VVIOmlWgKTZjO5BN0sX5T20+OPG8pIC5IjMXzf7HqudFcDr8WHSa+ecWtnpZtSiOJWqiQDEYgreQGjOABqVSHmBlWAgmFgMqDVq0s1Td+2bCHG23cHQqJ+cNDMv2EsQk6b4224P8NufXQiCwLrqRSwvKWBtdRHHb/UlBqA3aKmrXIg3EORA/UVCEZnhsXHOBBwkazWsqSpCURS+PnaBHqcHa6qRysJsFEVhy8pKTvc5EwMwpZkozc/CnKzDnKzlu9+b+KdxSGoVa6qKAFiyIJtQROZmv4svfziNvTgfa5qJ3VtW0xqNPjnAwowUMu5fgb04n/27tqKXNBRkppKbYb5fmAT2bFk9o39LYweq5aVMPnEMqEQ0qilJzaK8OQfj6+uX8os/8ORZsKGuGqNeeuJWK+ikxGJgUFEQBGFGW2fPIIcbmqkozKbPNcZnbz7/kGZEjiZWB0bkKI5geEabfyJMZoqR0fEgi5+yzKgRhXlox2OPiOLaskJqywpn9W0fDyYO0OQLUG3Qo7lfdNy+AAdPNZGZYiAUkQlFooRkGYvJwKYV5WSlGgEIx2IMReTEAWRF4fpEiCUGPQCpRj1rq4vQqERy0s1IahWSWsXdITcpBt0DP1ckGlegJsUj6g4EcY76pxwEAfvifKpsuVzovMP+o+cAKMnLQlL/u59hWY4vU+J9FQebuinLTufllZUkCbNHV3evk16dhmuh8PycAEBeaQGfHKznw2+OEAzPvrtUow6jJr42HvezPJyaiyUrk4arN9j46QFWVdhISdYyHgwzPDaOWiXS4hhg50u1vPWcnU6vFvDOD8C9u4MoPjfvbH+fHw4d5l7/AL+eb3tIZ9RJrKqw0RKQGImq8Q9PYLDoHlnM4roCOSJzqaGZrvZOjCYT23d9wOZXt2I0GafpcjPMfP/xNjyGHG6F1ACc+qmBzqbu+E9AURQ8Tg8913tx9rsI+AL4x8aRwzKjqjEi4TAaSaJmmZ2KqiV0tXfg7e8hVy/w7qY6rsVSGQuJD+bT6XVcPHmJ4QEXZUuLycrLJClp+p5VTQ3NuIdGCYfC+Dx+QhMzP8Gi0SjtrW0sXT711JYkieLyMq74fGRZM2h0+AjqFZJMJiRpqgllWq0M9PXjaL+No/022mQttrJCip9ehCUnA0EQEIC4P6dGk4nd+/YiSRIdrW2crj+B3+9HJYqULijAF5jA5fVRt34d9toVtDRf4fiRozPOlW5No8xeMjcAgELbArQ6HW7XCO6REWKxGJVFNrzjAXqHnIiiSF5BPhkWC6npaTScODV/v2OAnjt3Ka0oZ/e+vbiGhzl74iQSChtW2DlUf4ode3aRlW0lFosxOHDvsfP9DZRm+jqPr69OAAAAAElFTkSuQmCC',
// 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAwADADAREAAhEBAxEB/8QAGgAAAgMBAQAAAAAAAAAAAAAABQYEBwgCA//EADIQAAIBAwMDAgQFAwUAAAAAAAECAwQFEQYSIQAHEwgxFCIyQQlCUWGBFSNSFjNDcZH/xAAcAQABBQEBAQAAAAAAAAAAAAAGAQMEBQcAAgj/xAA1EQABAgQEBAQEBAcAAAAAAAABAhEAAwQhBRIxQQYTUWEicYGRBzKh8COxwfEUQlJyktHh/9oADAMBAAIRAxEAPwDN12rm2klnzk+zkY56NUp1hgAwq6gu622naeareGJRyzuQB/2c9KGAjySBrDB2+9MmsO8Vtiupaa0aflG9aqWXw+RccMXcEICMEBVkcg/SPfoNxjjCRIJlUwzKFn29Bqr6DuY1bhX4V1uJS01VcTKlm4FgojZyoEIfplWptk2MHKr0s9tNPUVXBd9QaivFynXalVQ1s0MVAefmjUt/dOcE+QYPIwucgTVxPia1ZkqYdGH+o0hHwy4WkSjLnpUpR3C127jxXPV7dhFIar7M6s0zVslpqY9QULvtSVKjxyR++N6nkD7ZAxn3P36v6Pitk5ahN+ot9mM4xX4YVCJmbD5gWg9dvPQt6N3gZ2yvovWooaGtFRR11JUBKiKRzvRg2Me/6jgjg9FdFWSqiXzJZeM1rqCfRzjInpYj6+X35xe99pRFVMqjcG9v256sAYhw1+mC1aft9ovvcDVFsa4U2nLmlstEUsXkpzOVUvMEwQ7iR0iXdwGJwNxyue8YYnNXOGHSSwAdWznp5C79/KN2+FHDdJKpl8RVySohWWXZwNioD+ok5QdmszmJ3c7v7eNawTT1UVXRwBwsNGFwY9xAVWbOGYk8kcAnAzjJDZdOkG0avX4xOmpJKSOg36N3P0hEqqo1iGQkluc85yQcfz1KFg0Ved4V7hfYyZ3USSRwEoDHk+aRQWZExydoU5YcDDf4nDmVRUEjWK2prZUlC500shGqiWD9H/XR4rC23K0XXufo3UFOPLPeKmRJ5oY2izKkKFklz9asrxOhGchgcnHRLw+SmpKD0tf70vrpGVcdrkz6SXVobMpTEsxfKHBfqMqgRqNYuTUNxvdo1NS01LBT3KK805qLbcj/AGqJkxktMefCUyN68kj6N5IXoqXjEqTKK5+qdhueg84AcLweoxKqFHS6m5J0SN1KOwHudA5tBy93ujt940nougkqktOgqNqy4msVYZLhepMI9RIoJC7HkZUU/SWIA3DrMJpWsLnr+ZZ87G5j6UpuVImSMMkvy6dLl2DzNASBYM+moUSBcBkX1H9wanQr6fFPmafzz1zRZ2CQxRhIQT/iJ5ozx7lB17o5XMCvQe//AAHyiLxHiK6XklNy6lHvlDJHX51C3Ya6Q52vt/JbdK0kGaidfD8JRRxk+a5tGAsk7P8A8dMhyWlONxIVTyT1Ik0q5g5qhroP1PYRSYrxFTUk8YXKmMJQ/FXqwH8iRqqYs2tZLk6ix24W20+nnt7W6iu7RVEwp1pnkWMmKnimwghhTgspDZY8FwCflUYFpRUgl3NydTGYcUcTTsSSUp8ElPyp/IqbU9BoPOMyWGoGvNa6eggta2a2aVpKSi+SQs9TUxwpDJK+72Y7doA9o1Qe4PVvw9QlOaoUXd2/yP7+sPcZYyKnl0QRk5QQCHuVBABJ7vYdgIbrp3TqqvQdE1uqXhuFvuDRUYUYxIj+SKUjBBFOHYqGH+7Kp/J1AxlIXUMNGc+u3rf0ibwjNXT0ap0sgLUtkdykAlR6iW4CQQ2dQOrmJNrttTTaZvtNDVMb1czUCKeUnyz1CI9QoGeXd3ic4OSST9+h+aUgpJ0H5aH6GNLpJC0ypksHxrcOd1AFQ91JJv3MDvUxSRUfcywzSxVJ0xfIbdX2aeomFYa2hepSWd1dI08isQNyqpZCCuWxnqzXRpkzAlGh/b72gCk8R1GIU0ybUgcxFg1tyve7ks99na8bns/4bdy7x2oayk7lLf7PqKNpbZb7jPVSUVHExJC7rfLT7igwBA4O0gB8EEdTxOCfCU6RnolmYM+Z3u/nu/eKq/EW0d2o9NHpRre18Nk1JqDViChW33s0sq0FirZJllpy0skvjEjx+fCJ5WVWJb9OvIJvMsEj3h4UxmFNPL+YkAHoevprGUu0tV/U9cXIeYVlTLdm+IlRceaUEB5Mfbc2Wx+/RFgLfwSG7+l9If4pVmxaeoly9z1LBy2zm7R72atm0hqWd6hvibfVTtLEg94vbPLfnGMDHBU/qvI9U0vMSctiSD7Bol8P42ihqUTJ4JQlKgw18SkqJD72b0EcXrujPU2/4h6X4eW2VMVXHW05IC1G75VA9wNuc/tIAfv1BVhigHToRodffSC6Vx5LX+HPGVYOYLS+UkG1j4kgh+rO2geFzvLqeC52EpQO9VpO1PUxQVMcpkioWnmjql27jtjCP8rsgXPBbIBPSSJE1SWVYpa30JhzGcUw5E3mSEgy5mYGYkO5cLSFf2glPVjdwI1lrzXXcn8Pz029uu5dHqurtWoe4tXJDWWK8xblqJoYmnlNRAxMdXC8QjMdQjLIPiIyjlSubJJTMOVQvGazU8pRMo+Fy3lt9GjPPq3/ABI9Uety4aRGrbDbtL2vRLNN/TrTUVMsNXVz4SaZlmzhwgESjkLluTuPTM6mVlOSLjBMSp5M/mVLjyGw28z5NaEnsTdqmw6wl+KGGaojfMbcgOAQCfuR0SYUBLl8sQP11UuonKnrDEk+20OGuqXw/FRSxybYmLHCE4IPBH89VQjxEW06Xlm0a1HVpJNLWrJJOUj2bmck8Ae2OMY/QddHQI7eUiDQ1DLDTPGs8ADo8ZIJIwwYEc/fOf1x1zwrwPul5uXcCGi0zfbjd7zYNJUslo07RVtRJPHYqUSrPJSwhvpTyMrryTtKrnaigIwGkI8JU+nJaDVgpGE0lJQu4jSQHdgoHDbvzDc2Bk8Y/bpY6HztxbIf9fQvVNLBFVQRujbDtV43wxP8MP8Azqxw5fiIhuYNI//Z',
];
var $x = $('#x');
var i = -1;
setInterval(function() {
++i;
if(i >= 4) {
i = 0;
}
$x.attr('src', srcs[i]);
}, 100);
});
</script>
</head>
<body>
<img id="x" width="50" height="50">
</body>
</html>
Every few random seconds, the images are requested again, although fetched from disk cache, but request is happening. If you resize window, the requests may happen even more frequently.
Check JS Fiddle
I tried using base64 images instead of URLs, still same thing. This is an issue because the visible image may glitch/flicker when request occurs.
EDIT
How to prevent chrome from requesting the same image again?
This is the right behavior as "Memory Cache" stores and loads resources to and from Memory (RAM). So this is much faster but it is non-persistent. Content is available until you close the Browser.
"Disk Cache" is persistent. Cached resources are stored and loaded to and from disk.
For more info on how Chrome caches works (memory and disk), please refer to this link.
Placing multiple imgs, hide all and show only 1 at a time, prevents Chrome from requesting same images. With this approach, each image is requested only once.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var i = -1;
setInterval(function() {
++i;
if(i >= 4) {
i = 0;
}
$('.img').hide();
$('#img' + i).show();
}, 100);
});
</script>
</head>
<body>
<!-- using multiple images with display: none, src is fixed in HTML (not changed by JS) -->
<img id="img0" class="img" width="50" height="50" style="display: none;" src="https://i.stack.imgur.com/sIH1O.jpg?s=48&g=1">
<img id="img1" class="img" width="50" height="50" style="display: none;" src="https://www.gravatar.com/avatar/9aa2aa68144b2781ac025a29c83bbdd4?s=32&d=identicon&r=PG">
<img id="img2" class="img" width="50" height="50" style="display: none;" src="https://www.gravatar.com/avatar/c0377fc1b08293d3362611978913a32b?s=32&d=identicon&r=PG">
<img id="img3" class="img" width="50" height="50" style="display: none;" src="https://www.gravatar.com/avatar/07f36acea2b942f61102221f92f62f6e?s=32&d=identicon&r=PG">
</body>
</html>
JS Fiddle
I cant change the html or css files. My task is to set a click handler to my thumbnails to enlarge the image in the img within the element. While also setting the figcaption text in the figure to the thumbs title attribute. I need to attach to the div id = thumbnails. My script is not enlarging my thumbnails or titles.
This is what I have so far.
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/chapter09-project02.js">
document.getElementById("thumbnails").addEventListener("click", function(e) {
if(e.target && e.target.nodeName.toLowerCase == "img") {
// Taking the image src and converting it to medium image.
var srcValue = e.target.src.replace("small","medium");
// Taking title and storing it for later.
var titleValue = e.target.title;
document.getElementById("featured").src = srcValue;
document.getElementById("featured").title = titleValue;
document.getElementById("figcaption").innerHTML = titleValue;
}
});
document.getElementById("figcaption").addEventListener("onmouseover", function(e) {
var figcaption = e.target.style.opacity = .8;
});
document.getElementById("figcaption").addEventListener("onmouseout", function(e) {
var figcaption = e.target.style.opacity = 0;
});
</script>
</head>
<body>
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" />
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" />
<img src="images/small/5856697109.jpg" title="Luneburg" />
<img src="images/small/6119130918.jpg" title="Bermuda" />
<img src="images/small/8711645510.jpg" title="Athens" />
<img src="images/small/9504449928.jpg" title="Florence" />
</div>
</main>
</body>
</html>
Is something like this what you were after?
var caption = document.getElementsByTagName("FIGCAPTION")[0];
var images = document.getElementsByTagName("IMG");
for (val of images) {
if(images[0] !== val){
val.addEventListener("click", function(e) {
caption.innerHTML = this.title;
images[0].title = this.title;
images[0].src = this.src.replace("small","medium");
});
}
}
img {
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<h2>Share Your Travels</h2>
</header>
<main>
<figure id="featured">
<img src="https://cdn.pixabay.com/photo/2018/01/20/14/26/panorama-3094696__340.jpg" title="Battle" />
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="https://cdn.pixabay.com/photo/2018/05/15/09/23/raindrop-3402550__340.jpg" title="Battle" />
<img src="https://cdn.pixabay.com/photo/2018/04/23/14/23/giraffe-3344366__340.jpg" title="Luneburg" />
<img src="https://cdn.pixabay.com/photo/2018/04/20/18/19/grass-3336700__340.jpg" title="Bermuda" />
<img src="https://cdn.pixabay.com/photo/2018/05/12/12/48/mountain-crumpled-3393209__340.jpg" title="Athens" />
<img src="https://cdn.pixabay.com/photo/2018/04/24/19/14/hai-3347787__340.jpg" title="Florence" />
</div>
</main>
</body>
</html>
I am having trouble with this homework assignment and I have been stuck on it for a while. I am getting an error message saying
Uncaught TypeError: Cannot read property 'src' of undefined at
displayFull
Any idea to fix this?
The image folders and files are in the same folder, so the src is right.
HTML
<!DOCTYPE html>
<!-- Fig. 12.5: coverviewer.html -->
<!-- Dynamic styles used for animation. -->
<html>
<head>
<meta charset = "utf-8">
<title>Deitel Book Cover Viewer</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<script src = "coverviewer.js"></script>
</head>
<body>
<div id = "mainimg">
<img id = "imgCover" src = "fullsize/jhtp.jpg" alt = "Full cover image">
</div>
<div id = "thumbs"> // I AM GETTING THE ERROR MESSAGE HERE FOR EACH IMAGE ON CLICK AT WITH THE ONCLICK ATTRIBUTE
<img src = "thumbs/jhtp.jpg" id = "jhtp" alt = "Java How to Program cover" onclick = "displayFull('jhtp');">
<img src = "thumbs/iw3htp.jpg" id = "iw3htp" alt = "Internet & World Wide Web How to Program cover" onclick = "displayFull('iw3htp');">
<img src = "thumbs/cpphtp.jpg" id = "cpphtp" alt = "C++ How to Program cover" onclick = "displayFull('cpphtp');">
<img src = "thumbs/jhtplov.jpg" id = "jhtplov" alt = "Java How to Program LOV cover" onclick = "displayFull('jhtplov');">
<img src = "thumbs/cpphtplov.jpg" id = "cpphtplov" alt = "C++ How to Program LOV cover" onclick = "displayFull('cpphtplov');">
<img src = "thumbs/vcsharphtp.jpg" id = "vcsharphtp" alt = "Visual C# How to Program cover" onclick = "displayFull('vcsharphtp');">
</div>
</body>
</html>
JAVASCRIPT
var fullpic = new Array(6);
//define each array element as an image
for (var i=0;i<fullpic.length;i++)
fullpic[i] = new Image(289,373);
//give the path to the src properties of the array elements
fullpic[0].src = "fullsize/jhtp.jpg";
fullpic[0].alt = "Java How to Program";
fullpic[1].src = "fullsize/iw3htp.jpg";
fullpic[2].src = "fullsize/cpphtp.jpg";
fullpic[3].src = "fullsize/jhtplov.jpg";
fullpic[4].src = "fullsize/cpphtplov.jpg";
fullpic[5].src = "fullsize/vcsharphtp.jpg";
/*function displayFull(title){
document.getElementById("imgCover").src="fullsize/"+title+".jpg";
}*/
function displayFull(i){
document.getElementById("imgCover").src=fullpic[i].src; // I AM GETTING THE ERROR MESSAGE HERE
}
To make it cleaner and readable, You can just do something like this as mentioned below. All you need is , have all the images under in your markup.
window.onload = function() {
document.querySelector("#thumbs").addEventListener("click", function(event) {
if (event.target.tagName.toLowerCase() === "img") {
var title = event.target.getAttribute("id"),
imgSrc = "fullsize/" + title + ".jpg",
imgElement = document.querySelector("#imgCover");
imgElement.src = imgSrc;
imgElement.alt = imgSrc;
}
});
}
<!DOCTYPE html>
<!-- Fig. 12.5: coverviewer.html -->
<!-- Dynamic styles used for animation. -->
<html>
<head>
<meta charset="utf-8">
<title>Deitel Book Cover Viewer</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="coverviewer.js"></script>
</head>
<body>
<div id="mainimg">
<img id="imgCover" src="fullsize/jhtp.jpg" alt="Full cover image">
</div>
<div id="thumbs">// I AM GETTING THE ERROR MESSAGE HERE FOR EACH IMAGE ON CLICK AT WITH THE ONCLICK ATTRIBUTE
<img src="thumbs/jhtp.jpg" id="jhtp" alt="Java How to Program cover">
<img src="thumbs/iw3htp.jpg" id="iw3htp" alt="Internet & World Wide Web How to Program cover">
<img src="thumbs/cpphtp.jpg" id="cpphtp" alt="C++ How to Program cover">
<img src="thumbs/jhtplov.jpg" id="jhtplov" alt="Java How to Program LOV cover">
<img src="thumbs/cpphtplov.jpg" id="cpphtplov" alt="C++ How to Program LOV cover">
<img src="thumbs/vcsharphtp.jpg" id="vcsharphtp" alt="Visual C# How to Program cover">
</div>
</body>
</html>
do i have a syntax error? , could it be that im using notepad++?
nothing is happening when i click a thumbnail image
i am new to javascript so that may be the case.
my general idea was to create an event "changeimage" that onclick would change the source of my main image for my thumbnails image to make it bigger.
<head>
<script type="text/javascript">
function changeimage(event)
{
event = event;
var targetElement = event.target;
if (targetElement.tagName == "IMG")
{
document.getElementbyid("Main").src = targetelement.getattribute("src");
}
}
</script>
<meta charset="utf=8">
<style>
#Main
{
height:540px;
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img id="Main" src="img/rickroll1.jpg" </img>
<br />
<div id="thumbnail" onclick="changeimage(event)">
<img class="imgthmb1" src="img/rickroll1.jpg" />
<img class="imgthmb1" src="img/rickroll2.jpg" />
<img class="imgthmb1" src="img/rickroll3.jpg" />
<img class="imgthmb1" src="img/rickroll4.jpg" />
<img class="imgthmb1" src="img/rickroll5.jpg" />
</div>
</body>
</html>
Yes, you have a syntax error:
targetElement is spelled targetelement in the following line:
document.getElementbyid("Main").src = targetelement.getattribute("src");
Change it to the following:
document.getElementbyid("Main").src = targetElement.getattribute("src");
On a related note, the following line is extraneous and can be removed:
event = event;
Javascript is case-sensitive.
in place of
document.getElementbyid("Main").src = targetelement.getattribute("src");
write
document.getElementbyId("Main").src = targetElement.getAttribute("src");
Also your html markup has an error:
<img id="Main" src="img/rickroll1.jpg" </img>
should be
<img id="Main" src="img/rickroll1.jpg">
I'm trying to write a javascript program which show an hidden image.
Here's the html part :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Exercice 3 </title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
</header>
<section>
<article>
<figure>
<img src="images/powsoundeffect.png" alt="image" />
<figcaption>
Image 1
</figcaption>
</figure>
<figure>
<img src="images/thwack_soundeffect.png" alt="image" />
<figcaption>
Image 2
</figcaption>
</figure>
<figure>
<img src="images/tophat.png" alt="image" />
<figcaption>
Image 3
</figcaption>
</figure>
<figure>
<img src="images/1311511622.png" alt="image" />
<figcaption>
Image 4
</figcaption>
</figure>
<ul>
<li>
Image 1
</li>
<li>
Image 2
</li>
<li>
Image 2
</li>
<li>
Image 2
</li>
</ul>
</article>
</section>
<script type="text/Javascript" src="script.js" >
</script>
</body>
</html>
The css :
figure {
width: 20%;
position: absolute;
visibility: hidden;
}
ul li {
border: 1px solid black;
width: 10%;
}
The script :
var arrayA = document.querySelectorAll('a');
var arrayImg = document.querySelectorAll('figure');
function show_Image(text, img) {
text.style.fontSize = '2em';
arrayImg[img].style.visibility = 'visible';
}
for (var i = 0, c = arrayA.length; i < c; i++) {
arrayA[i].addEventListener('mouseover', function(e) {
show_Image(e.target, i);
},
false);
}
When I try to run the script the following error occurs on safari :
TypeError: 'undefined' is not an object (evaluating 'arrayImg[img].style')
and on chromium :
Uncaught TypeError: Cannot read property 'style' of undefined
It seems that the arrayImg is not containing object with the querySelector and I don't see why ...
Anyone can help me on this ?
Thanks !
As Jonathan Lonowski described in its comment, the variable 'i' is increased after the eventListener has been bound - and the anonymous function will use the increased value.
You may go this way:
for (var i = 0, c = arrayImg.length; i < c; i++) {
arrayA[i].addEventListener('mouseover', (function(i,e) {
show_Image(e.target, i);
}).bind(this,i), false);
}
It binds the anonymous function to the scope the binding is executed from and 'i' as a first parameter, that won't change anymore.
Even if that isn't the cleanest way to achieve what you want to do, it's working in the way you want it to.