I'm using a button onclick and Image array to show a 1 image, and then a third image. I want to have several images do this next to each other. The code works fine with one..But when I try to add another it goofs up. I'm very new to Javascript so do not know what the problem is.
<button onclick="Suit()" class="button">
<img id="IMG1" src="suit.png" class="suit" width="300" height="260">
</button>
<script>
img_array= new Array('suit.png','suitwrong.png','suittry.png');
i=0;
function Suit()
{
i++;
document.getElementById("IMG1").src=img_array[i];
if(i==img_array.length-1) {
i=-1;
}
}
</script>
I basically want to have x3 of this code (3 image click arrays). Happy to put it in a seperate .js file if that helps.
is this really the script? if it is so try changing something like put var everytime you declare a js variable. and practice more math and logic in arrays and loops.
btw try this
<button onclick="Suit()" class="button">
<img id="IMG1" src="suit.png" class="suit" width="300" height="260">
</button>
<script>
img_array= new Array('suit.png','suitwrong.png','suittry.png');
i=0;
function Suit()
{
i++;
document.getElementById("IMG1").src=img_array[i];
if(i==img_array.length) {
i=i-img_array.length;
}
}
</script>
now try to add another picture in your array
Related
I had an image which appears on the click of another image.
I'm posting the code below. Please tell me where I went wrong. Thanks !
JavaScript
function suit1() {
var element = document.getElementById("suit1");
element.setAttribute("Hidden", "False");
}
HTML
<img src="suit1.png" style="width:100%; height:595px;" hidden="true" id="suit1"/>
<img src="point.png" onclick="javascript:suit1()">
Try this:
function suit1() {
var element = document.getElementById("suit1");
element.removeAttribute("hidden");
}
As stated in the comments, the number in suit1() was causing the issue. However, changing the function name to any name other than the id for first img resolves the problem. HTML:
<img src="suit1.png" style="width:100%; height:595px;" hidden="true" id="suit1"/>
<img src="point.png" onclick="javascript:some1()">
JavaScript:
function some1() {
var element = document.getElementById("suit1");
element.removeAttribute("hidden");
}
Or change the id of the img.
I know there are other questions like this and I've tried following them I'm just not aware of what exactly I'm doing wrong. I've declared the pic variable as being linked to the image with the corresponding id of 'pic' and I've tried many different examples and trying to follow other questions like this but to no avail.
--- THE REAL QUESTION ----
I would like the image to change its src to another one that I have in my workspace with the click of a button.
HTML:
<img class="trans" id="pic" src="images/link_rouge.png" alt="" width="1000" height="333" />
JavaScript:
var pic = document.getElementById('pic');
function rouge() {
pic.src = "images/link_rouge.png";
}
function blue() {
pic.src = "images/link_blue.png";
}
I know the functions already work with the buttons because they are affecting some divs on the page that change color the only things not changing are the images.
The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on.
Use addEventListener over button elements to attach click events and bind your handler functions to those events.
var pic = document.getElementById('pic');
function rouge() {
pic.src = "http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png";
}
function blue() {
pic.src = "http://bin.smwcentral.net/u/1944/Link%2BBlue%2BTP%2Bshrunk.png";
}
document.getElementById('btn1').addEventListener('click', rouge);
document.getElementById('btn2').addEventListener('click', blue);
img {
width: 200px;
}
<button id='btn1'>rouge</button>
<button id='btn2'>blue</button>
<br/>
<img class="trans" id="pic" src="http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png" alt="" width="1000" height="333" />
There's a chance your page has not loaded before pic is set equal to document.getElementById('pic');.
You can use something like jQuery's $(document).ready() function (or document.addEventListener("DOMContentLoaded", handler);) to ensure your page is fully loaded before assigning the pic variable.
$( document ).ready(function() {
var pic = document.getElementById('pic');
function rouge() {
pic.src = "images/link_rouge.png";
}
function blue() {
pic.src = "images/link_blue.png";
}
});
Note: You will need to pull the JQuery library into your project to use this method. See here.
Also, you can read this post to learn a little more about HTML/JavaScript and page loading.
I'm working on a website, and the pictures page I'm trying to create has 1 big picture, with smaller thumbnails underneath. I have a javascript function in the head:
function loadThumbnail(divID){
document.getElementById("mainPicture").src = document.getElementById(divID).src;
document.getElementById("mainPicture").alt = document.getElementById(divId).alt;
document.getElementById("caption").innerHTML = document.getElementById(divId).alt;
}
The parameter divID is a misleading title, it's actually the ID of the img element that holds the thumbnail. The function is called whenever the user clicks a thumbnail. The .src bit works, but I can't get the function to change the caption to the picture. Any idea why?
Edit: Here's the HTML
<img id="mainPicture" src="images/food/chickenAndCheeseFries1.png" width="420" height="313" alt="Chicken Tenders and Cheese Fries">
<p id="caption">Chicken tenders and cheese fries</p>
<div onClick="loadThumbnail('t1')" id="thumbnail1" class="thumbnail">
<div id="thumbnailPic1" class="thumbnailPic">
<img id="t1" src="images/food/buffaloAndHotWings1.png" width="105" height="80" alt="Sweet Chilly and Buffalo Wings">
</div>
</div>
Make sure the divID variable is used consistently, including the case. It looks like you typoed and used "divId", which won't work. Try it like this, "divID", in all cases.
function loadThumbnail(divID) {
document.getElementById("mainPicture").src = document.getElementById(divID).src;
document.getElementById("mainPicture").alt = document.getElementById(divID).alt;
document.getElementById("caption").innerHTML = document.getElementById(divID).alt;
}
Case matters! divID != divId
I'm doing this for my assignment which is due next week.
Our instructor wanted us to create image rollovers. I already created one but it won't work.
Here's my code:
<script>
function turnSwitchOn(img) {
buttonImg="lab11-1switchon.jpg"
document.getElementById(lightswitch).src=buttonImg
}
function turnSwitchOff(img) {
buttonImg="lab11-1switchoff.jpg"
document.getElementById(lightswitch).src=buttonImg
}
</script>
and here's the img:
<img src="lab11-1switchoff.jpg" alt="light switch" id="lightswitch" onMouseOver="turnSwitchOn()" onMouseOut="turnSwitchOff()" />
The picture on my Website won't change to the one I put in the Javascript code, why is that?
Your Id's need to be in quotes
function turnSwitchOn(img) {
buttonImg="lab11-1switchon.jpg"
document.getElementById("lightswitch").src=buttonImg
}
function turnSwitchOff(img) {
buttonImg="lab11-1switchoff.jpg"
document.getElementById("lightswitch").src=buttonImg
}
Besides the fix for making sure to call getElementById with a string ("lightswitch"), you could get a little nicer and not even have to lookup the image by id at all if you pass this into the function:
<script>
function turnSwitchOn(img) {
img.src="lab11-1switchon.jpg"
}
function turnSwitchOff(img) {
img.src="lab11-1switchoff.jpg"
}
</script>
<img src="lab11-1switchoff.jpg" alt="light switch" id="lightswitch" onMouseOver="turnSwitchOn(this)" onMouseOut="turnSwitchOff(this)" />
I wrote this function to change my pic what is the problem?
my aim is when clicking on a pic toggle between 2 images if image p is showing by clicking shows me image p1
I have this in script:
<script>
function changeimage()
{
if(this.getElementById('myimage').src=="../../images/p1.gif")
{
document.getElementById('myimage').src="../../images/p.gif";
}
else
{
document.getElementById('myimage').src="../../images/p1.gif";
}
}
</script>
in the html part I have these ones which are more than one picture but I set the whole of them with Id=myimage is it wrong to set the whole one same ID?:
<table width="100%">
<tr>
<td><img id='myimage' src="../../images/p1.gif" onclick="changeimage();setTable('table2');setTable('table2-2');check('table3');check('table3-3');check('table3-3-3');check('table4');check('table5');check('table6');check('table6-1');"></td>
<td style="font-weight: bold;font-size:13; font-family:arial,verdana;" width="25%">General Rule Options</td>
<td valign="bottom" width="100%">
I have many rows in my tables like this
The problem is the following line:
if(this.getElementById('myimage').src=="../../images/p1.gif")
In particular, it's the use of this. In your function this will refer to the window, and the window doesn't have a getElementById method. Use document like you have in the other cases:
if(document.getElementById('myimage').src=="../../images/p1.gif") {
//...
}
And it looks like it should work fine. Alternatively, you can pass in an a reference to the clicked element when you call the event handler, and reference that instead of using getElementById. For example:
onclick="changeimage(this);"
You call changeImage() from the <img> element, and then reference this inside the function. Since the function runs without context (it's not tacked onto an object), this would refer to the window object, which doesn't have getElementById.
In your HTML, change onclick="changeImage() to onclick="changeImage(this) and change your changeImage function to work with the argument passed instead:
function changeimage(img) {
if(img.src=="../../images/p1.gif")
img.src="../../images/p.gif";
else
img.src="../../images/p1.gif";
}
In the if statement it should be document.getElementById() not this.getElementById().
Though having said that, you can pass a reference to the clicked element in to your function:
<img onclick="changeImage(this);">
function changeImage(imgEl) {
if(imgEl.src=="../../images/p1.gif") {
imgEl.src="../../images/p.gif";
} else {
imgEl.src="../../images/p1.gif";
}
}
That way if all of your table rows are using the same two images they can all call the same function. Better than having the function hardcoded to a particular element's ID.
You need to call the function on click like this:
http://jsfiddle.net/4ca9m/
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<img id="special" src="http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg" alt ="none">
<script>
$("img#special").click(function () {
if($(this).attr("src") == "http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg")
{
$(this).attr("src", "http://gcaptain.com/wp-content/uploads/2011/04/image5.png");
}
else
{
$(this).attr("src", "http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg");
}
});
</script>
</body>
</html>
It doesn't work because when you use a relative path like:
<img src="../../images/p1.gif" onclick="changeimage();" />
The browser may secretly turn it into an absolute path like:
<img src="http://example.com/somewhere/images/p1.gif" onclick="changeimage();" />
At least Internet Explorer 9 exposes this behavior. However, you shouldn't depend on this behavior.
There are at least two ways how you can solve this problem:
Use data- attributes. You add a custom attribute to your image tag:
<img src="../../images/p1.gif" data-image="p1" onclick="changeimage();" />
Then change your JavaScript function to this:
<script>
function changeimage()
{
if(this.getElementById('myimage').getAttribute("data-image") == "p1") {
document.getElementById('myimage').src="../../images/p.gif";
document.getElementById('myimage').setAttribute("data-image", "p");
} else {
document.getElementById('myimage').src="../../images/p1.gif";
document.getElementById('myimage').setAttribute("data-image", "p1");
}
}
</script>
Use a variable to accomplish the same thing as above.
<img src="../../images/p1.gif" onclick="changeimage();" />
And the JavaScript:
<script>
var image = "p1";
function changeimage()
{
if(image == "p1") {
document.getElementById('myimage').src="../../images/p.gif";
image = "p";
} else {
document.getElementById('myimage').src="../../images/p1.gif";
image = "p1";
}
}
</script>
I prefer the first method because it allows me to include all information about the image in the image itself and not in a variable declared several lines away.