I can't hide my button using javascript, my code is this. (I used an image as a button)
<img alt="" src="images/search-icon.png" width="16" height="16" style="display: inline;height:16px;cursor:pointer; width: 16px;" onclick="ViewLookUpPayment('<%=btnShowCorpCode.ClientID %>');" />
Here is the code in my javascript.
function ViewLookUpPayment(bShow)
{
var button1 = document.getElementById(bShow);
button1.style.visibility = "visible";
}
Every time i click on the image this runtime error pops up
I can't understand why is there a runtime error, Can anyone help me on this one?
Did you set 'id' attribute to image tag?
May be "document.getElementById(bShow)" returns 'undefined'. Try checking what "var button1" is.(example: console.log(button1))
try this
<img alt="" src="images/search-icon.png"
width="16" height="16" style="display:
inline;height:16px;cursor:pointer; width: 16px;"
onclick="ViewLookUpPayment('<%=btnShowCorpCode.ClientID %>');" />
function ViewLookUpPayment(obj)
{
document.getElementById(obj).style.display = "block";
}
Related
I'm grabbing favicon's from sites programmatically by generically making a request for the icon to "example.com/favicon.ico".
If the site doesn't have a favicon, I want to use the "alt" attribute of the image to hide the image so that it doesn't appear and doesn't have a "missing image" icon.
For example
<img src="https://www.businessinsider.com/favicon.ico" alt="$(this).hide();" height="16" width="16">
Can this be done?
You can use the built-in error() method. Hide your image based upon that.
$("img").on("error", function() {
$(this).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://www.businessinsider.com/favicon.ico" height="16" width="16">
If you want an alternative image when the image is not available, give the new image source.
$("img").on("error", function() {
$(this).attr("src", "https://homepages.cae.wisc.edu/~ece533/images/mountain.png");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://www.businessinsider.com/favicon.ico" height="16" width="16">
You can put your placeholder immediately and check if the image loads on script. If it loads, replace the img src
var thisImage = new Image();
thisImage.src = 'https://www.businessinsider.com/favicon.ico';
thisImage.onload = function() {
console.log("Image 1 ready to append");
document.querySelector('.bg-image').src = thisImage.src;
};
<!--The source here is your placeholder-->
<img class="bg-image" src="https://placekitten.com/50/50" height="50" width="50" />
I have a whole bunch of images across the screen that are currently hidden with CSS. I also have a button in the direct center of the screen. I'd like to have a function that unhides another image every time you click it. This seems to be just out of my experience level with JavaScript.
This might help you get going. You should have provided some code though.
function showimage() {
var imgs = document.getElementsByClassName("hidden");
//if there are any images left to show
if(imgs.length > 0) {
var img = imgs[Math.floor(Math.random() * imgs.length)];
img.className = "shown";
}
}
.hidden {
display: none;
}
.shown {
display: unset;
}
<img class="hidden" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png" alt="" />
<img class="hidden" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png" alt="" />
<img class="hidden" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png" alt="" />
<img class="hidden" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png" alt="" />
<img class="hidden" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png" alt="" />
<br />
<button type="button" onclick="showimage()">Click Me!</button>
I am trying to make a program where when you click on a light the lightbulb will turn on, and then if you click on it again it will turn off. I have onClick but no matter which one I clikc the first one always turns on. Can somebody help so that the clicked on light will turn on?
<!DOCTYPE html>
<html>
<body>
<img id="light1" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<img id="light2" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<img id="light3" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<img id="light4" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
var image1 = document.getElementById('light1');
if (image1.src.match("bulbon")) {
image1.src = "pic_bulboff.gif";
} else {
image1.src = "pic_bulbon.gif";
}
}
</script>
</body>
</html>
In JavaScript, event handlers get a special variable called this, which refers to the element from which the event was fired (in this case the light bulb that was clicked), you can use it like this:
function changeImage() {
if (this.src.match("bulbon")) {
this.src = "pic_bulboff.gif";
} else {
this.src = "pic_bulbon.gif";
}
}
Notice the difference from your code. You were always making changes to the first lightbulb, accessed by id using the API document.getElementById('light1').
You're pointing at the same DOM node in your function despite registering an event handler on multiple nodes.
You should use the this keyword to use currently clicked node as the context during the function's execution.
all
I have a lot of html pages on the server that opens each big image into a new window calling just one external javascript file.
I would like to edit this javascript so when I click on an image they all can be viewed using Prev and Next links buttons.
here's the html code for images:
<td><img src="moreimages/imagesmall01.jpg" width="70" border="0" alt="image small 1" title="image small 1"></td>
<td><img src="moreimages/imagesmall02.jpg" width="70" border="0" alt="image small 2" title="image small 2"></td>
<td><img src="moreimages/imagesmall01.jpg" width="70" border="0" alt="image small 3" title="image small 3"></td>
<td><img src="moreimages/imagesmall04.jpg" width="70" border="0" alt="image small 4" title="image small 4"></td>
and here's the code from javascript file:
var imagesArray = []; //array to hold all images from moreimages.html
function getImageLinks() {
var a = document.getElementsByTagName("a") //get all elements that have <a> tag
for (h in a) { // walk thru this elements
var href = a[h].attributes['href']; //from an <a> element get his href attribute
if (href) { // check if <a> tag has a href attribute
imagesArray.push(href.value); //add the value of href (image link) to the array
}
}
}
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){
LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;
TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;
}
if(pos=="center"){
LeftPosition=(screen.width)?(screen.width-w)/2:100;
TopPosition=(screen.height)?(screen.height-h)/2:100;
}
else
if((pos!="center" && pos!="random") || pos==null){
LeftPosition=0;TopPosition=20
}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);
}
i think you want to make lightbox with slider
find this plugin : here
I have a website that contains multiple pages as layers (not as separate HTML files).
I have three images:
<img src="image1.png" onclick="showlayer(1);return false;" />
<br />
<img src="image2.png" onclick="showlayer(2);return false;" />
<br />
<img src="image3.png" onclick="showlayer(3);return false;" />
When an image is clicked, it shows the relevant layer and hides the others.
I want it to also change the image to image1_active.png / image2_active.png / image3_active.png depending on which layer is visible (not via the onclick event handler).
Why not via the onclick event handler?...
Layer 1 is set as visible by default in the CSS, so image1 needs to be image1_active.png by default too - since the user has not had to click on anything yet, this is why I need the image switch to detect the layer's visibility/display to change the image.
The showlayer script is:
function showlayer(n){
for(i=1;i<=3;i++){
document.getElementById("layer"+i).style.display="none";
document.getElementById("layer"+n).style.display="block";
}
}
Is it possible to adapt this script for this purpose?
thank you
You could add IDs to your images like this:
<img src="image1.png" onclick="showlayer(1);return false;" id="image1" />
<br />
<img src="image2.png" onclick="showlayer(2);return false;" id="image2" />
<br />
<img src="image3.png" onclick="showlayer(3);return false;" id="image3" />
and then set the active image in your current script like:
function showlayer(n){
for(i=1;i<=3;i++){
document.getElementById("layer"+i).style.display="none";
document.getElementById("layer"+n).style.display="block";
document.getElementById("image"+n).src = 'image' + n + '_active.png';
}
}
document.onload = function(){
showlayer(1);
}
function showlayer(n){
var range = [1, 2, 3];
range = range.filter(function(item){
return item != n;
});
for(i in range){
document.getElementById("layer"+range[i]).style.display="none";
document.getElementById("layer"+range[i]).src = 'image' + range[i] + '.png';
}
document.getElementById("layer"+n).style.display="block";
document.getElementById("layer"+n).src = 'image' + n + '_active.png';
}