Incorporating a javascript variable in a file path - javascript

I am developing a page to display an image, dependent on what the user has previously chosen from a menu. The name of the .jpg is passed in as a parameter ('photo') on the URL and I have been able to parse this as a global variable (myphoto). The .jpgs are all held in one folder.
I now need to do something like (I guess) quoting the image source as being
"myfolder/"+<script>document.write(myphoto)</script>
but this is not working. Any ideas please?
(Image tag changed here to get round the anti-spam.)
BTW all client-side javascript. It's been a few years since I've used this!

You can do the opposite and output the whole image tag in javascript:
<script language="javascript">
document.write('<img src="myfolder/' + myphoto + '" />')'
</script>

It's not working because when the browser sees this line: <img src="myfolder/"+<script>document.write(myphoto)</script>, it's treating the + character as a character and not an operator.
You will need to programmatically set the src of the image. Something like this:
document.getElementById("myImage").src = "myfolder/" + myphoto;
or with jQuery:
$("#myImage").attr("src", "myfolder/" + myphoto);

document.getElementById("imgtagid").src = "your image folder/" + selectedPhoto

Related

Current location path as a url parameter

I need to put a link out from a corporate site to a surveymonkey survey. Our site uses a proprietary CMS limiting me from adding any proper function or third party plugin.
After evaluating options like those exposed in this other question, I believe I call the correct javascript function but everytime I open my CMS, the link duplicates itself... leading me to think I've done something inapropriate.
Things look acceptable on the JSFiddle demo I put together for this question but I'm hoping you'd have a more elegant solution in mind so I could try options !
<script type="text/javascript">
document.write("<a href='https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname + " target='_blank'>Test - survey</a>");
</script>
Try this - it will probably not do what you want in one go, but it will hopefully isolate your problem so that you can better pinpoint what's going wrong:
HTML:
<div id="link"></div>
Javascript:
var SURVEYID = 3
var a = document.createElement("a");
a.innerHTML = "Test - survey";
a.href = "www.surveymonkey.com/r/"
+ SURVEYID
+ "?url="
+ window.location.pathname
+ "&target=_blank"
document.getElementById("link").appendChild(a)
I'm afraid there can be multiple things going wrong, but I hope you can now distinguish between the various parts that your URL is built up from.
This is mostly just a theory because I don't know your CMS or how it works, but I'm assuming that the CMS is inlining the javascript, executing it, and retaining that as its content along with the script. This would create that duplication. The original intent of using document.write I would assume was to completely replace the content; but if it's inlined, it only appends. An external script would completely replace. See below:
All of this text is retained.
<script type="text/javascript">
document.write("<a href='https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname + "' target='_blank'>Test - survey</a>");
</script>
In this demo, we use document.body.innerHTML instead. This will replace the content completely.
None of this text will be retained.
<script type="text/javascript">
document.body.innerHTML = "<a href='https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname + "' target='_blank'>Test - survey</a>";
</script>
If true, complete replacement of the body content is your goal, innerHTML is probably what you need.
Edit + Warning:
This may make the page inaccessible from the CMS depending on how it's built. It may make editing the page impossible.
Edit
Here's a better solution. Just set the href of the anchor by first getting it by the ID. This was based off of Sven ten Haaf's Answer.
<a href="#" id="__smlink" target='_blank'>Test - survey</a>
<script>
document.getElementById('__smlink').href = "https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname;
</script>

How to execute javascript function when the user clicks on the image

I want to call or execute javascript function when user click on image. I have javascript file with many functions and one of them is ShowKeybord(). So i want to execute this function ShowKeybord() when user clicks on image.
I tried with HTML parameter onclick: <img src = "' + content + '" alt = "Heads" onclick = "ShowKeyboard()" height="170" width="170"/> but its not working.
Here is my code of key functions that are related to my problem.
I tried with header.addEventListener('click', ShowKeyboard) and work properly but the keyboard is displayed when you click anywhere in the header of the web page. I would however like to make the keyboard appear only when a user clicks on the image.
What am I doing wrong and what should change depending on my code?
Thank you very much for your help.
You can also try to encapsulate your img with a div with the attribute onclick="ShowKeyboard()"
Wich gives something like this
<div onclick = "ShowKeyboard()">
<img src = "' + content + '" alt ="Heads" height="170" width="170"/>
</div>
It's better to enclose your image inside a div tag. As suggested by #Lucas Duval.
This should definitely work if not please give your div an "ID" or "class" and try to handle this with JQuery.
Thanks!
in the head tag put
<script src="yourjavascriptfilepath"></script>
and should work.
or maybe try onclick="ShowKeyboard()" rather than onclick = "ShowKeyboard()"
I think that has to do something with it.

javascript, condition in if statement for recognizing image src

I'm having a problem getting the condition in this if statement to work, i've tried getElementById & src.indexOf but I am still very new to this. I am trying to replace the blank/ball image with the x/pikachu image only if the blank image is currently showing, so if there was one of the other images there it wouldn't replace it. It doesn't seem to recognize the condition I have in there as true, any idea why?
i've also tried:document.getElementById(bn).src=blank & document.images[bn].src==blank & document.pokemon.bn.src==blank
looking for a way to verify if the current source of the image is the var blank.
thank you
var x = "pikachu.jpg";
var o = "Meowth.jpg";
var blank = "ball.jpg";
function b1Move(imageName){
temp2=imageName;
if(document.pokemon[temp2].src==blank)
document.pokemon[temp2].src=x;
cMove();
}
and the html for the images looks like this:
<a href="javascript:b1Move('b1')"><img src="ball.jpg" height=150 width=150 name=b1
id =b1 > </a>
The src property gives the fully resolved URL. You probably want to use the src attribute, which stays the same:
if( document.pokemon[temp2].getAttribute("src") == blank)
document.pokemon[temp2].setAttribute("src",x);
you should try
if(document.pokemon[temp2].src.indexOf(blank) != -1)
since src is the full url.. then you can check it it contains your image name

Jquery .html and .load

I'm trying to teach myself jQuery and I'm a little stomped with the load() method. I'm working on eBay listings. Yes, I know includes are not allowed on ebay. However, there is a workaround that has been around for a few years and ebay doesn't seem to be cracking down on it.
var ebayItemID='xxxxxxxxxxxxxx'; // This is eBay code. I cannot edit it.
<h1 id="title"> TO BE REPLACED</h1>
$(document).ready(function(){
var link = "http://www.ebay.com/itm/" + ebayItemID + "?item=" + ebayItemID + &viewitem=&vxp=mtr";
var newTitle = $('#title').load(link + "#itemTitle");
$('#title').html(newTitle);
});
What's the point of this. I want to show the item title on the description, but I want to do so dynamically,
load will not work on different domains (ebay on your case)
load will set the content directly to your element. You can't assign it to a var.
If you would like to indicate you want to extract content from a specific element you need to add a space between your link and the element id:
You can find more info on the jQuery docs
$('#title').load(link + ' #itemTitle', function() {
alert('Load was performed.');
});
When you use load will place the returned html into the element(this case #title).
So you don't need to call html after it.

using a variable in <a> tag(html)

I have a variable image in which I have got the value from a string array, e.g.:
string image=navdata[1].
Now I have to include this image variable in an anchor tag (HTML).
Can anyone help regarding this?
I'm using javascript and I'm working in day CQ5.
Like the others here I am not sure what you want exactly, but it seems as if you want to display a image from an array using Javascript. To do this you can use document.write() and combine the HTML content you need with the Javascript variables.
For example:
<script type="text/javascript">
var ImageArray = ['Image01.png','Image02.png','Image03.png'];
document.write('<img src="' + ImageArray[0] + '" alt="" />');
</script>

Categories