I created an image that can be clicked on, but unfortunately it only functions properly on the

Question

I created an image that can be clicked on, but unfortunately it only functions properly on the

I am currently working on creating an image that can be clicked to cycle through different images all within the same frame. While I have managed to get it to work, I am facing a limitation where it only responds to one click.

count = 1;

function myFunction(a, b, c) {
  if (count === 1) {
    document.getElementById("johnnycashpicscroll").src = b;
  }
  if (count === 2) {
    document.getElementById("johnnycashpicscroll").src = c;
  }
  if (count === 3) {
    document.getElementById("johnnycashpicscroll").src = a;
  }
  if (count === 3) {
    count = 1;
  }
}

h1 {
  font-size: 50px;
  font-family: sans-serif;
  position: relative;
  bottom: 130px;
  left: 120px;
}

#topleftimg {
  width: 100px;
  height: 120px;
  top: 100px;
}

hr {
  position: relative;
  bottom: 115px;
}

button {
  margin-left: 20px;
  margin-right: 20px;
  width: 120px;
  height: 60px;
  font-family: sans-serif;
  font-size: 19.5px;
  font-weight: bold;
}

#button1 {
  margin-left: 50px;
}

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
</head>

<body>
  <img id="topleftimg" src="https://th.bing.com/th/id/OIP.uSeMc9l3nH-tNFb-N2KrrgAAAA?w=155&h=195&c=7&r=0&o=5&pid=1.7" alt="Johnny Cash">
  <h1>Johnny Cash<button id="button1">Home</button><button>Childhood</button><button>Career</button><button>Challenges</button><button>Legacy</button></h1>
  <hr />
  <img src="JohnnyCashPic1.jfif" alt="" height="155" width="100" id="johnnycashpicscroll" onclick='myFunction("JohnnyCashPic2.jfif", "JohnnyCashPic3.jfif", "JohnnyCashPic1.jfif")'>
</body>

</html>

If you're wondering, I'm developing a Johnny Cash informational website for a school project.

javascript html css

Answer 1

Answer №1

For proper comparison in your function, make sure to use == or === instead of =.

let count = 0;
const images = ["JohnnyCashPic1.jfif", "JohnnyCashPic2.jfif", "JohnnyCashPic3.jfif"];
function myFunction(){
  const imgElement = document.getElementById("johnnycashpicscroll");
  count = (count % images.length) + 1;
  imgElement.src = images[count - 1];
}

<style>
        h1 {
        font-size: 50px;            
        font-family: sans-serif;
        position: relative;
        bottom: 130px;
        left: 120px;
        }
        #topleftimg {
        width: 100px;
        height: 120px;
        top: 100px;
        }
        hr{
        position:relative;
        bottom: 115px;
        }
        button {
        margin-left: 20px;
        margin-right: 20px;
        width:120px;
        height:60px;
        font-family:sans-serif;
        font-size:19.5px;
        font-weight: bold;
        }
        #button1 {
        margin-left: 50px;
        }
    </style>

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <img id="topleftimg" src="https://th.bing.com/th/id/OIP.uSeMc9l3nH-tNFb-N2KrrgAAAA?w=155&h=195&c=7&r=0&o=5&pid=1.7" alt="Johnny Cash">
        <h1>Johnny Cash<button id="button1">Home</button><button>Childhood</button><button>Career</button><button>Challenges</button><button>Legacy</button></h1>
        <hr />
        <img src="JohnnyCashPic1.jfif" alt="" height="155" width="100" id="johnnycashpicscroll" onclick='myFunction()'>
    </body>
    
</html>

The code above should be functioning correctly now. Ensure all image sources are valid for the code to work as expected.

Edit: I appreciate the feedback and have made necessary corrections to improve the code functionality. Instead of passing individual image names to the function, I have utilized an array within the function to cycle through images indefinitely.

Answer 2

For proper comparison in your function, make sure to use == or === instead of =.

let count = 0;
const images = ["JohnnyCashPic1.jfif", "JohnnyCashPic2.jfif", "JohnnyCashPic3.jfif"];
function myFunction(){
  const imgElement = document.getElementById("johnnycashpicscroll");
  count = (count % images.length) + 1;
  imgElement.src = images[count - 1];
}

<style>
        h1 {
        font-size: 50px;            
        font-family: sans-serif;
        position: relative;
        bottom: 130px;
        left: 120px;
        }
        #topleftimg {
        width: 100px;
        height: 120px;
        top: 100px;
        }
        hr{
        position:relative;
        bottom: 115px;
        }
        button {
        margin-left: 20px;
        margin-right: 20px;
        width:120px;
        height:60px;
        font-family:sans-serif;
        font-size:19.5px;
        font-weight: bold;
        }
        #button1 {
        margin-left: 50px;
        }
    </style>

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <img id="topleftimg" src="https://th.bing.com/th/id/OIP.uSeMc9l3nH-tNFb-N2KrrgAAAA?w=155&h=195&c=7&r=0&o=5&pid=1.7" alt="Johnny Cash">
        <h1>Johnny Cash<button id="button1">Home</button><button>Childhood</button><button>Career</button><button>Challenges</button><button>Legacy</button></h1>
        <hr />
        <img src="JohnnyCashPic1.jfif" alt="" height="155" width="100" id="johnnycashpicscroll" onclick='myFunction()'>
    </body>
    
</html>

The code above should be functioning correctly now. Ensure all image sources are valid for the code to work as expected.

Edit: I appreciate the feedback and have made necessary corrections to improve the code functionality. Instead of passing individual image names to the function, I have utilized an array within the function to cycle through images indefinitely.

I created an image that can be clicked on, but unfortunately it only functions properly on the

Answer №1

Similar questions

php code to show data in a single column of a table

The keyframe spinner fails to function properly on Firefox and results in blurry text

The TinyMCE extension in Yii fails to load CSS files when accessed through a subdomain

Secure User Validation Using ExpressJS and CouchDB

Is it possible to display the HTML video poster at the end of the video without relying on jQuery or JavaScript?

Internet Explorer does not return results when using AJAX during the onchange event (specifically for IE only

Is there a way to right-align the labels and input fields simultaneously?

What are some methods for utilizing the data received through this.props.history?

The functions firebase.auth().currentUser and onAuthStateChanged consistently return null even when the user is logged in

What benefits and drawbacks come with setting up JS libraries in resource files compared to package.json?

How to find a collision between a spherical object and a triangular shape in a three

Implementing promise-based looping for multiple GET requests in node.js

Chosen option from the Bootstrap drop-down menu

Link a PHP variable to a JavaScript variable

Display the number of rows per page on the pagination system

Attempting to create a button that will only appear for items with a defined value for a specific variable

Whenever I try to make my links responsive, they don't seem to work as intended

Using PHPMailer to send attachments uploaded through a form

Switch button while moving cursor

Consolidate list: Make sure to leave only the currently active item open