I'm a newbie here.
I would like to insert a value from JS variable into a URL part of an tag.
<script language="javascript" type="text/javascript">
var scrt_var = "xyz_nt";
</script
For example, take the above value and insert/replace in the below img src where it reads 'insert value here'.
<TD>
<img src="https://test.com/?target=alias(keepLastValue(aggregates.*.servera_*.abc-insert value here.errors)%2C%20'Errors')&preventCache=25308886" height="250" width="620" />
</TD>
Any help would be really appreciated.
You can add an ID to your img and do something like:
<script>
var scrt_var = "xyz_nt";
var mylink = "http://your_url?your_var=" + scrt_var;
document.getElementById('image').src = mylink;
</script>
You can use regex replace
var scrt_var = "xyz_nt";
var image = document.querySelector("td img");
image.src = image.src.replace( /insert value here/, scrt_var );
Related
Hi guys I am a django developer and trying to grab a random img through JS in html like below
img works and it would randomly pick one from the ImageArray.
However, the path will be <img src= '/static/%22%20%2B%20img%20%2B%22'>.
Rather than something I want like <img src= "{% static 'img/indexBg_1.png' %}" >
And the error msg is : GET http://192.168.7.64:8000/static/img/%22%20%2B%20pic%20%2B%20%22%20 404 (Not Found)
Could anyone enlighten me to resolve this problem? Thx!
<script type="text/javascript">
window.onload=function(){
ImageArray = new Array();
ImageArray[0] = 'img/indexBg_1.png';
ImageArray[1] = 'img/indexBg_2.png';
ImageArray[2] = 'img/indexBg_3.png';
var num = Math.floor( Math.random() * 3);
var img = ImageArray[num];
var path = " <img src= '{% static '" + img +"'%}'>"
console.log(img)
console.log(path)
}
</script>
if you want the path, it should be something like:
var path = window.location.href +'/static/'+ img;
but if you want to add image with that path inside div:
var element = document.getElementById("div1");
element.innerHTML=`<img src=${path} />`;
even better to do:
var path = window.location.href +'/static/'+ img;
var myimg = document. createElement("img");
myimg.src = path;
var element = document.getElementById("div1");
element.appendChild(myimg);
I want to store the jquery variable value to the html variable value.
Here is my code,
This is the javascript function which is in external javascript page
function createImage(settings) {
var kk = createCanvas(settings)[0].toDataURL('image/png');
}
Now, this is in html page
var karan = kk;
<img id="containerQrCode" src = "+ karan +" alt="qr image" />
Now, how can I move the kk value which is in external javascript page to the karan variable which is in html page.
Thanks In Advance.
I will suggest you work with the DOM. Some thing like the below if your are jQuery.
function createImage(settings) {
var kk = createCanvas(settings)[0].toDataURL('image/png');
$("#containerQrCode").attr("src", kk);
}
below can be tried if not using jquery
function createImage(settings) {
var kk = createCanvas(settings)[0].toDataURL('image/png');
document.getElementById("containerQrCode").setAttribute("src", kk);
}
try something like this:
<img id="containerQrCode" src = "
<script type="text/javascript>document.write(karan)</script>
" alt="qr image" />
Sorry misread about setting the variable as well, try this:
Edit the function to say this:
function createImage(settings) {
var kk = createCanvas(settings)[0].toDataURL('image/png');
return kk;
}
Then update where you set karan to this:
var karan = createImage();
You will also need to include the external javascript file in the project like this:
<script type="text/javascript" src="path/to/your/file.js"></script>
var karan = kk;
var img = document.getElementById('containerQrCode');
img.src = karan;
I have a Javascript function that I need to modify to accept arguments, one for the image id and the other for the select box's id.
<script type="text/javascript">
function swapImage(){
var image = document.getElementById("imageToSwap");
var dropd = document.getElementById("dd");
image.src = dropd.value;
};
</script>
So I'd like to be able to do something like
onChange="swapImage('this','<?php echo $image; ?>')"
I've tried changing it to
<script type="text/javascript">
function swapImage(pic,selectbox){
var image = document.getElementById(pic);
var dropd = document.getElementById(selectbox);
image.src = dropd.value;
};
</script>
But this doesn't work. Please help. Thanks
If you make the 'this' into this, you can then reference it as any other element (skip the getElementById() stuff).
How can I dynamically name id's using javascript?
Something like this:
js:
var idName = "fruit";
html:
<img id="javascript:idName" src="banana.jpg">
var bananaImage = new Image();
bananaImage.id = "fruit";
bananaImage.src = "banana.jpg";
Using the jQuery framework you could do something like:
<img class="idName" src="banana.jpg"/>
<img class="idName" src="cherry.jpg"/>
The script ...
var idName = 'fruit';
$(function() {
$('img.idName').each(function(i) {
$(this).attr({id: idName+i});
});
});
... which results in:
<img id="fruit0" class="idName" src="banana.jpg"/>
<img id="fruit1" class="idName" src="cherry.jpg"/>
You can dynamically create elements, such as <img>, and set their attributes using JavaScript's DOM API.
or you can get the element any other way IE
imgs = container.getElementsByTagName("img");
foreach(imgs as img){
if(imgs.src == "banana.jpg") img.id = "fruit";
}
Note: foreach doesn't work in JS you'll need a for loop, but I'm too lazy :P
I think this is what your looking for. You need some sort of event to trigger the JavaScript. Since IMG doesnt have it, except for user events, you need something like:
<head>
<script language="JavaScript" type="text/javascript">
function nameMyIds() {
var idToName = "firstImageId";
var theImage = getImageBySrc("banana.jpg");
if (theImage!=null)
theImage.id = idToName;
}
function getImageBySrc(src) {
// using DOM, using jQuery would make this easier
var allImages = document.body.getElementsByTagName("IMG");
for (var i=0; i<allImages.length; i++ ) {
var img = allImages[i];
var i = img.src.indexOf(src);
if (img.src == src || img.src.indexOf(src) > 0) { return img };
}
}
</script>
</head>
<body onload="nameMyIds()">
<img src="banana.jpg">
</body>
If i have "img" element id = "myimg".
Is posible to add link to "img" without edit html page using jQuery
<img id="myimg" src="image.png">
I like to make "myimg" have link like this.
<img id="myimg" src="image.png">
You can use wrap():
$("#myimg").wrap("<a href='test.html'></a>');
or
$("#myimg").wrap($("<a>").attr("href", "test.html"));
or:
var a = $("<a>").attr("href", "test.html");
$("#myimg").wrap(a);
I am not into jQuery. Using Javascript, you can do something like:
var parentEl = document.getElementById("myimg").parentElement;
var imgEl = parentEl.innerHtml;
parentEl.innerHtml = '' + imgEl + '';
$(document).ready(function() {
var src = "linkhere.html";
var a = $("<a/>").attr("href", src);
$("#myimg").wrap(a);
});