Image is not showing in div using JavaScript - javascript

I am trying to do image light box using JavaScript. Here is my html code
<div id="lightbox2">
</div>
<div id="lightbox">
<button onclick="lgBox('www.w3schools.com/howto/img_fjords_wide.jpg')"><img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" alt=""></button>
</div>
I am sending current clicked link as a parameter in lgBox function.
Here is my Js function.
function lgBox(url){
var u = url;
alert(u);
document.getElementById("lightbox2").innerHTML="<img src='u' />";
document.getElementById("lightbox").style.display="none";
}
It shows the url in alert box properly that I passed.
But why this link is not working here "<img src='u' />";
Thanks in advance.

The method what you are using is wrong as it places the string u as it is in the src tag. You want to replace this u with the actual value of that variable. See below:
function lgBox(url){
var u = url;
alert(u);
//this is wrong and will throw an error in console (404)
document.getElementById("lightbox2").innerHTML="<img src='u' />";
document.getElementById("lightbox").style.display="none";
}
Instead of the above you should do something like this
function lgBox(url){
var u = url;
alert(u);
//ES6 template literals or if this is not supported then you can use
//concatenation also.
document.getElementById("lightbox2").innerHTML=`<img src=${u} />`;
document.getElementById("lightbox").style.display="none";
}

You need to concat the var u to the string with + like this:
'<img src="' + u + '" />'
In your code:
function lgBox(url){
var u = url;
alert(u);
document.getElementById("lightbox2").innerHTML='<img src="' + u + '" />';
document.getElementById("lightbox").style.display="none";
}

You simply passe the u string in the html tag, you have to actually concatenate the url like this :
document.getElementById("lightbox2").innerHTML = '<img src="' + u + '" />';

Related

How to safely use "&" symbol in a javascript variable without it turning to "&"?

I am trying to execute the following code:
<button onclick="increment()">Increment</button>
<div id="iframe">
<script>
var id = 139000;
var link='<iframe src="https://somewebsite.com/something.aspx?sa=1&pid=' + id + '" height="600px" width="100%" />';
function increment(){
id++;
document.getElementById('iframe').innerHTML = id + link ;
}
</script>
</div>
But while executing, the & in src="" converts to & which breaks the original URL and doesn't go to the desired destination. I looked up on the internet but as I am a noob, I was not able to figure it out. Please help me to make this work!
All you need to do is
<button onclick="increment()">Increment</button>
<div id="iframe">
<script>
var id = 139000;
var link='<iframe src="https://somewebsite.com/something.aspx?sa=1&pid=' + id +
'" height="600px" width="100%" />';
var new_link = link.replaceAll('&','&');
function increment(){
id++;
document.getElementById('iframe').innerHTML = id + new_link;
}
</script>
This is definitely a blogger issue, and the reason behind happening is :
The character "&" is an ISO HTML reserved character used to denote the start of a parameter.
To overcome this the Blogger editor translate the & you enter to the HTML entity, & , that will display & when the page or URL is rendered in a browser, so that you don't have to do it yourself.

How to get current window URL and use it?

I want to get current window location using JavaScript and use it in the following code:
<img src="http://shook.eu.org/qrc.php?text=CURRENT_WINDOW_URL" />
If you are building the html from a string:
var img = '<img src="http://shook.eu.org/qrc.php?text=' + encodeURI(window.location.href) + '" />';
document.body.innerHTML = img;
Edit: You should encodeURI the string you want to pass.
var url = window.location.href;
var img = '<img src="http://shook.eu.org/qrc.php?text='+url+'" />';
$('#img').html(img);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img"></div>

Store html code to javascript variable

I have a problem when converting store html code to javascript variable, I know we can convert using converter tools, but I can't use this converter in my situation.
I am trying the following code
var t_cls="font-effect-anaglyph rotator";
var randompostsurl="www.allinworld99.blogspot.com";
var randompoststitle="Open Inspect Element And see the Code";
var default_script = "<script> document.write('<div><a class="+t_cls+" href=\"' + randompostsurl + '\" rel=\"nofollow\">' + randompoststitle + '<\/a><\/div>'); <\/script>\n";
$("#apnd").append(default_script);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="apnd"></div>
The above one will produce the following output
<a class="font-effect-anaglyph" rotator="" href="www.allinworld99.blogspot.com" rel="nofollow">Open Inspect Element And see the Code</a>
Why the rotator class will created as new attribute?
Because there are no quotes around the class attribute in the result. You need to add them, since you have a space in the attribute's value:
default_script = "<script> document.write('<div><a class=\""+t_cls+"\" href=\"' + randompostsurl + '\" rel=\"nofollow\">' + randompoststitle + '<\/a><\/div>');<\/script>\n";
// Here --------------------------------------------------------^^---------^^
Replace your default_script code
default_script = "<script> document.write('<div><a class='"+t_cls+"' href=\"' + randompostsurl + '\" rel=\"nofollow\">' + randompoststitle + '<\/a><\/div>');<\/script>\n";
As there are no quotes in class, it produce rotator as a new attribute. But you can achieve rotator as a class by the following way. i.e replacing single quotes with escape sequence.
<script>$(document).ready(function(){
var t_cls="font-effect-anaglyph rotator", randompostsurl="www.allinworld99.blogspot.com",
randompoststitle="Open Inspect Element And see the Code",
default_script = "document.write(\"<div><a class=\""+t_cls+"\" href=\"" + randompostsurl + "\" rel=\"nofollow\">\" + randompoststitle + \"<\/a><\/div>\");<\/script>\n";
$("#apnd").append(default_script);
});
</script>

jQuery .insertAfter() and .append() not working with AJAX call

I am trying to do something that I thought I've done 100 times already... I'm getting and making a new image after an ajax call and am trying to insert it into an appropriate, pre-existing div
The HTML looks like this
<div class="preload">
<div class="createYourOwn">...</div>
<img src="source.com"/>
<img src="source.com"/>
<img src="source.com"/>
<img src="source.com"/>
<img src="source.com"/>
</div?
The AJAX call does this:
$.post("script.php", {phone:phone}, function(data){
if(data){
var newImage = "<img src='https://api.twilio.com" + data + "/>";
$(newImage).insertAfter('.createYourOwn');
}
});
I've tried this as well:
$("<img src='https://api.twilio.com" + data + "/>").insertAfter('.createYourOwn');
And this:
$(newImage).append('.preload');
even though that doesn't have the desired outcome.
I'd like to insert the image that I receive with the data just after the .createYourOwn div inside of .preload.
Not sure what's going on. But nothing is happening, no errors, not even an image with a borked src. Nothing at all happens.
Anyone have any ideas?
Thank you!
Concatenate string properly:
Replace this:
var newImage = "<img src='https://api.twilio.com" + data + "/>";
// you're missing to close quote for src here ^^
With this:
var newImage = "<img src='https://api.twilio.com" + data + "' />";
Or switch the quotes:
var newImage = '<img src="https://api.twilio.com' + data + '" />';

Unsure why I'm getting a syntax error when passing string to function

When I pass the string 2cdfdfa2-3639-4aed-bf37-9fb7ba1c936c to a javascript function, I get syntax error in Firebug.
I have my code in a variable before inserting it into a div-tag. I print this out in the Console when I press the DeleteBookmarkFunction. Firebug says there is a syntax error in the call of the function:
<div onclick='DeleteBookmarkFunction('3fad79fb-ce54-4ceb-9b35-cfb50d5540de')'>
<a class='remove'>Slett</a>
</div>
Some of my code:
var id=data[j].UniqueID;
src += "<div id='" + data[j].UniqueID + "'></div>" ;
src += "<div onclick=\'DeleteBookmarkFunction ( \'"
src += id;
src += "\' )\'>";
src += '<a class=\'remove\'>Slett</a></div>';
What is causing Firebug to report an error?
Use double quotes for attributes
<div onclick="DeleteBookmarkFunction ( '3fad79fb-ce54-4ceb-9b35-cfb50d5540de' )"><a class="remove">Slett</a></div>

Categories