Javascript IF-Else not working as expected

Javascript IF-Else not working as expected - javascript

HI guys trying to learn javascript and been on w3schools...came across a try me that flipped the image right away from smiley.gif to landscape.jpg...so I decided I was going to see if I learned anything by flipping it with a button instead worked great...but then I decided that on each click I was going to make it go back and forth from smiley.gif to landscape and back to smiley etc...
well thats when the frustration set in..I tried a million ways other then what I originally started with down in the code section...can someone explain to me why this doesnt work..I get no console errors...It still does the initial flip from smiley to landscape on first click but then never changes back to smiley on the second click. Thanks in Advance
<img id="image" src="smiley.gif" width="160" height="120"><br>
<button onclick= myFunc() >Click</button>;
<script>
function myFunc() {
if (document.getElementById("image").src == "smiley.gif") {
return document.getElementById("image").src = "landscape.jpg"
} else {
return document.getElementById("image").src = "smiley.gif"
}
};
</script>
<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>

The Issue
An element's src property returns the full path to the image, including protocol.
Although you've set the attribute to smiley.gif, if you were to console.log the property value, it's something like http://mywebsite.com/smiley.gif. Obviously, this is not equal to smiley.gif.
Using the src property:
console.log(document.getElementById("image").src);
<img id="image" src="test.jpg">
In the future make sure to take these basic debugging steps. If your condition isn't working right, the first step is to verify that the values you're comparing are what you expect them to be.
The Solution
Instead of using the src property, you want to retrieve the src attribute from the element instead. We can do this quite easily using Element.getAttribute().
Using the src attribute:
console.log(document.getElementById("image").getAttribute("src"));
<img id="image" src="test.jpg">
Your if condition should look like this:
if (document.getElementById("image").getAttribute("src") == "smiley.gif")

You should get the src of the img when the page loads so you can compare it as the src gives you the full qualified path of the img source.
<img id="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTY2gmwvcnkECDTu_N4qcfJs_5Nh1Usa8v3f-GaAzQcZxL70GpKCA" width="160" height="120"><br>
<button onclick= "myFunc()" >Click</button><br/>
<span id="result"></span>
<script>
var imgsrc = document.getElementById("image").src;
var result = document.getElementById("result");
function myFunc() {
if (document.getElementById("image").src == imgsrc) {
result.innerHTML = "Image source: "+"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVQT4TyiJEFCRA3pmetp3fgZHpgQtzM1hKJMhvAJhOGchqHXQX";
return document.getElementById("image").src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVQT4TyiJEFCRA3pmetp3fgZHpgQtzM1hKJMhvAJhOGchqHXQX"
} else {
result.innerHTML = "Image source: "+"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTY2gmwvcnkECDTu_N4qcfJs_5Nh1Usa8v3f-GaAzQcZxL70GpKCA";
return document.getElementById("image").src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTY2gmwvcnkECDTu_N4qcfJs_5Nh1Usa8v3f-GaAzQcZxL70GpKCA"
}
};
</script>

compare with == or ===
= sets the value, which is mostly true except you set a falsey value

Related

Onclick Image button - Logic not making sense [duplicate]

This question already has answers here:
Difference between object.src and object.getAttribute('src')
(3 answers)
Closed 2 years ago.
I'm having a very confusing time with this very simple onClick function in Javascript/html. I know there are many questions on this but couldn't quite find an answer given what my script does (Or doesn't in this case). It should be simple but for some reason the logic is just not working as I expect it too.
<h1>The onclick Event</h1>
<img id="onoff" onclick="changeImage();" src="images/Off Button.jpg" width="245" height="238">
<p>Click on button to turn "on"</p>
<script>
function changeImage() {
var image = document.getElementById("onoff");
if (image.src.match("Off Button.jpg")){
image.src = "images/On Button.jpg";
}
else{
image.src="images/Off Button.jpg";
}
}
</script>
So as you can see this should take the original "off button" image and swap it to "on button" when it is clicked provided it is showing the "Off Button.jpg".
However, it does nothing, using the Chrome developer tools I can see the script doesn't even fire. But when I make these changes:
if (image.src.match("Off Button.jpg")){
image.src = "images/Off Button.jpg";
}
else{
image.src="images/On Button.jpg";
It now fires and changes the Button to "On Button" but does not fire again to change it back. For me, this makes no sense logically but I might just be missing something really obvious. I know this is pretty basic but any help or explanation would be appreciated.

I did some changes to the code and now it's working.
I used the relative path with ./ to img src and mostly you should avoid use spaces to name images or anything else - spaces always cause problems ;)
<h1>The onclick Event</h1>
<!-- relative path and no space in name on src -->
<img
id="onoff"
onclick="changeImage();"
src="./images/off-button.jpg"
width="245"
height="238"
/>
<p>Click on button to turn "on"</p>
<script>
function changeImage() {
var image = document.getElementById('onoff');
if (image.src.match('off-button.jpg')) { /* no space in name */
image.src = './images/on-button.jpg'; /* relative path and no space
in name */
} else {
image.src = './images/off-button.jpg'; /* relative path and no space
in name */
}
}
</script>
Note - Remember to rename the images inside the images folder as well

Convert Javascript data to image source

I have the following code:
function myFunction(title) {
var searc_url = 'http://www.omdbapi.com/?apikey=cc47980e&t='.concat(title)
$.getJSON(searc_url,
function(data, textStatus, jqXHR) {
console.log(data)
console.log(data["Title"])
console.log(data["Year"])
console.log(data["imdbRating"])
console.log(data["Poster"])
document.getElementById("title").innerHTML = data["Title"]
document.getElementById("year").innerHTML = data["Year"]
document.getElementById("rating").innerHTML = data["imdbRating"]
document.getElementById("myImg").src = data["Poster"]
}
)
}
I am trying to call an image from an API, where I call:
document.getElementById("myImg").src = data["Poster"]
(The API returns the website url of the image).
Then, when I try to link this as an image in my body like so:
<img id="myImg" src='data["Poster"]' alt="The Pulpit Rock">
The image never loads. I just get the alt text. I've tried doing this, and I've tried
<img src="myImg" alt="Movie Image">
but this behaves similarly.
I've tried to google this but I'm pretty new to Javascript, HTML and PHP as a whole so it's hard to sift through the technical jargon.
Do I need to be converting this to a variable in some way that I am not??
I am just having issues displaying it on the page- not sourcing it from the API.
The is not properly getting the variable I have set (id = myImg) that contains the url.
Thanks!
EDIT: Oops. Turns out this code does work- the issue was that my browser was blocking the scripts! Oops!
Thanks everyone.
I was trying to figure out why this wasn't cooperating.

maybe if you save the value in another variable, like charge it.
var imgValue = data.poster;
and lather set that value to img attribute;
document.getElementById("myImg").src = imgValue.toString();
I hope it can help you, Good Luck!

Ooops! Resolved!
My browser was blocking my scripts.
The method above does, indeed work. Sourcing with id="myImg"

Dynamically display an image url with javascript

I am using tag manager to dynamically place information from the website into an html element using custom javascript. My code at the moment is this. PS I can't figure out how to post properly. This actually starts with
function(){
console.log("Start image variable");
var element = document.getElementsByClassName("MagicZoomPlus")[0];
console.log(element);
var image = element.getAttribute("img src").innerHTML;
console.log(image);
return image;
}
This returns the following debug information
unreachable code after return statement[Learn More] trustlogo.js:28:123
Start image variable gtm.js:1:42
<a id="ZoomGallery" href="/uploads/products/892_3521-05 .jpg" class="MagicZoomPlus" title="Franklin Paradigm Grey Sofa"> gtm.js:1:136
undefined gtm.js:1:186
The html on the site I am trying to reach is
<a id="ZoomGallery" href="/uploads/products/892_3521-05 .jpg" class="MagicZoomPlus" title="Franklin Paradigm Grey Sofa"><img src="/uploads/products/892_3521-05 .jpg" alt="FranklinParadigm Grey Sofa" /></a>

Your .innerHTML() is not needed. The getAttribute() function simply returns a string with the value of the attribute, or null if the attribute is non-existent.
To get the src of your element, therefore, the url of your image, you'd have to do :
var imageSrc = element.getAttribute("src");
and then simply return imageSrc
More info on the mozilla developper network

You could use a selector instead, and also you can access the attribute directly with the dot notation.
If you are trying to target the image within the link:
function(){
var image = document.querySelector(".MagicZoomPlus > img");
// get
console.log(image.src);
// or set the image source
image.src = "https://example.com/hello.jpg";
return image;
}

This is what I ended up coming up with, which works.
function myFunc() {
var img = document.querySelector(".MagicZoomPlus img");
return img.src
}

If image 'src' is '(unknown)' replace with 'missing.png'

My CMS produces an img src="(unknown)" if an image isn't provided in the database. I would like to use javascript when this occurs to change it to img src="/images/missing.png"
As a complete JS noob I have tried several hacks but none seem to work... any ideas? (there is likely to be more than one image on the page if that makes any difference)

This should work for you, if you use onError event for handling missing image src
<img src="main_img.png" onError="this.onerror=null;this.src='/images/missing.png';" />

I used this to solve a similar problem I had (using javascript)...
const images = document.querySelectorAll("img");
images.forEach((image) => {
let imgsrc = image.getAttribute("src");
if (imgsrc === "") {
image.src = "/images/missing.png";
}
});

if you're using php then this problem is going happen for sure you can use esc_url($url)
esc_url function solves the problem

If you're dynamically injecting the src when the page loads, you can always check and swap with placeholder if needed.
if (imgSrc === "unknown") {
imgSrc = "placeholder.png";
}

IMG SRC tags and JavaScript

Is it possible to call a JavaScript function from the IMG SRC tag to get an image url?
Like this:
<IMG SRC="GetImage()" />
<script language="javascript">
function GetImage() {return "imageName/imagePath.jpg"}
</script>
This is using .NET 2.0.

Nope. It's not possible, at least not in all browsers. You can do something like this instead:
<img src="blank.png" id="image" alt="just nothing">
<script type="text/javascript">
document.getElementById('image').src = "yourpicture.png";
</script>
Your favourite JavaScript framework will provide nicer ways :)

If you're in the mood for hacks, this works as well.
<img src='blah' onerror="this.src='url to image'">

Is it possible to call a JavaScript function from the IMG SRC tag to get an image url?
Do you mean doing something like the following?
<img src="javascript:GetImage()" />
Unfortunately, no - you can't do that. However, you can do the following hack:
function getImageUrl(img) {
var imageSrc = "imageName/imagePath.jpg";
if(img.src != imageSrc) { // don't get stuck in an endless loop
img.src = imageSrc;
}
}
Then, have the following html:
<img src="http://yourdomain.com/images/empty.gif" onload="getImageUrl(this)" />
The onload event will only fire if you have an actual image set to the src attribute - if you don't set that attribute or set it to an empty string or something similar, you will get no love. Set it to a single pixel transparent gif or something similar.
Anyway, this hack works, but depending on what you are really trying to accomplish, this may not be the best solution. I don't know why you would want to do this, but maybe you have a good reason (that you would like to share with us!).

You cannot do it inline the image #src, but you should be able to call it from an inline script block immediately following your image:
<img src="" id="myImage"/>
<script type="text/javascript">
document.getElementById("myImage").src = GetImage();
</script>

you could dynamically feed the image by calling an aspx page in the SRC.
Ex;
<img src="provideImage.aspx?someparameter=x" />
On the page side, you`ll need to put the image in the response and change the content type for an image.
The only "problem" is that your images won't be indexed a you better put some cache on that provider page or you'll ravage the server.

Are you looking for this.src ?`
<img src='images/test.jpg' onmouseover="alert(this.src);">

Since you're using .NET, you could add the runat="server" attribute and set the src in your codebehind.

You might be able to do it on the server side. Alternately you could attach an onload event to swap the image src out. I guess the question then becomes, why would you have to use Javascript in the first pace?

I've had to do something like this before, and IIRC the trick winds up being that you can't change an src attribute of an image that's part of the DOM tree. So your best bet is to write your HTML skeleton without the image and 1)create an onLoad function that generates a new img element with document.createElement, 2) set the src attribute with setAttribute(), and 3) attach it to your DOM tree.

OnLoad event of image called again and again do some thing like this

how about this?
var imgsBlocks = new Array( '/1.png', '/2.png', '/3.png');
function getImageUrl(elemid) {
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById("get_img").src=imgsBlocks[ind];
}
it's not work?
<img src="'+imgsBlocks[2]+'" id="get_img"/>

You may try this way also
const myImage = new Image(200, 200);
myImage.src = 'data:image/jpeg;base64,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';
document.body.appendChild(myImage);

No. The Img's SRC attribute is not an event, therefore the inline JS will never fire.

OnLoad event of image called again and again do some thing like this

Develop Reference

JavaScript is the programming language of the Web.

Javascript IF-Else not working as expected - javascript

compare with == or === = sets the value, which is mostly true except you set a falsey value

Related

Onclick Image button - Logic not making sense [duplicate]

Convert Javascript data to image source

Dynamically display an image url with javascript

If image 'src' is '(unknown)' replace with 'missing.png'

IMG SRC tags and JavaScript

Categories

Resources