Alter value upon click using JavaScript switch statement

I have an array that was downloaded from PHP to JS with paths to images. I am trying to switch the value on clicking the arrow image, -1 for left and +1 for right. However, my code is not working as expected.

<script>
    var urls = <?php echo json_encode($urls); ?>;
    var i = 4;

    function goleft(){
        if (i > 1) {
            i = i - 1;
            return i;
        }
    }

    document.write('<div id=showcase><a id=leftslide><img onclick=goleft() src=images/left.png></a><img id=bigpic src='+urls[i]+'></div>');
</script>

img src=images/left.png represents the left arrow.
urls[i] is what I want to change onclick to make it interactive

javascript

Answer №1

Thank you to everyone who helped me find the solution, I was able to make it work with jQuery.

  const data = <?php echo json_encode($data); ?>;              
  let index = 4;
        function moveLeft(){
            if (index > 1) {
            index = index - 1;
            $("#image").attr("src",data[index]);
                                }
                            }           
                </script>
<div id=gallery><a id=previous><img onclick=moveLeft() src=pictures/arrow-left.png></a><img id=image src=></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to change the size of a QR code

My current HTML code: <input id="text" type="text"/> <div id="qrcode"></div> Previous version of JAVASCRIPT code: var qrcode = new QRCode("qrcode"); $("#text").on("keyup", function () { qrcode.makeCode($(this).val()); }).keyup().focus ...

javascriptjquerycsskendo-uiqr-code

How can I make sure to consider the scrollbar when using viewport width units?

I've been working on developing a carousel similar to Netflix, but I'm facing an issue with responsiveness. I've been using a codepen example as a reference: Check out the example here The problem lies in the hardcoded width and height use ...

javascriptcss

CSS grid challenges on a massive scale

My CSS grid timeline is currently generating around 1300 divs, causing performance issues. Is there a way to style or interact with the empty nodes without rendering all of them? I also want each cell to be clickable and change color on hover. Any suggest ...

javascriptcsscss-grid

Exploring the functionality differences between mouse wheel tilt and scroll in JavaScript with scrollTop

Did you know that some computer mice come equipped with a scroll wheel that can tilt both left and right? This feature allows users to navigate through Google's piano roll app, which can be accessed here (source code available here). I am working to ...

javascriptjqueryscrollhtml5-canvasmouseevent

What are the best practices for managing data input effectively?

I am facing a challenge with input validation. I need to restrict the input to only accept strings of numbers ([0-9]) for the entity input field. If anything else is entered, I want to prevent it from overwriting the value and displaying incorrect input. I ...

javascriptreactjsvalidationinput

Is there a way to include a different component without it automatically displaying within a div element?

Is there a way to make the Torrent component render without directly binding it to a DOM element? I am facing an issue with my Torrent Table Component as I want it to be populated with Torrent Components based on API data, but it's not rendering beca ...

javascriptreactjs

Vue alert: Issue with rendering - TypeError: Unable to access property 'NomeStr' as it is undefined

I'm having trouble displaying the 'NameSrt' item array value in my template, and I keep encountering this issue: vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'NomeStr' of undefined" The ...

javascriptjsonrestvue.js

Incorporate a prefix into the URL of Angular development servers

When our application is in production, it will not be served from the root. Instead, it will be served from something like https://ourdomain.com/ourapp. This setup is causing problems with image URLs. To work around this issue, I am trying to serve the ap ...

javascriptangularserver

Retrieving the chosen option in Vue.js when the @change event occurs

I have a dropdown menu and I want to perform different actions depending on the selected option. I am using a separate vue.html and TypeScript file. Here is my code snippet: <select name="LeaveType" @change="onChange()" class="f ...

javascripthtmlvue.js

The combination of jQuery, using .load method in javascript to prevent scrolling up, making XMLHttpRequest requests, updating .innerHTML elements, and troubleshooting CSS/JS

While utilizing this code, CSS and Javascript are disabled (only HTML loads): function loadContent(limit) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status ...

javascriptjqueryhtmlcssajax

What is an example scenario where Async Storage can be tested using Jest-expo?

To better understand the testing of Mock-async-storage for reactjs, I decided to replicate an example. If you have any suggestions on a different approach to testing, please feel free to share. I attempted to mimic a use case illustrated on this stack over ...

javascriptreactjsreact-nativejestjsasyncstorage

Vue component lifecycle hook to fetch data from Firebase

Looking for a solution with Vue 2 component that utilizes Vuefire to connect declaratively with a Firebase real-time database: import { db } from '../firebase/db' export default { data: () => ({ cats: [] }), firebase: { ...

javascriptfirebasevue.jsfirebase-realtime-databasevuefire

JavaScript is experiencing an error where it cannot define a function, rendering it unable to generate a JSON object due to its inability to recognize that the

I've created a JavaScript script function that holds cart items for ordering food. This function takes two parameters: ID and price. Here is a snippet of my script file: <script> function addtocart(mitem, mprice) { var price = ...

javascriptdjangodjango-templates

Can I create interactive stacked shapes with CSS and/or JavaScript?

Trying to explain this may be a challenge, so please bear with me. I need to create an "upvote" feature for a website. The number of upvotes is adjustable in the system settings. The upvote controls should resemble green chevrons pointing upwards. For exa ...

javascripthtmlcssdrawingcss-shapes

Exploring JSON data in React applications

Below is the code I am currently working with: export class Highlights extends React.Component { render() { return ( <div> {JSON.stringify(this.props.highlights_data.data)} </div> ) ...

javascriptreactjsjsx

In a Custom Next.js App component, React props do not cascade down

I recently developed a custom next.js App component as a class with the purpose of overriding the componentDidMount function to initialize Google Analytics. class MyApp extends App { async componentDidMount(): Promise<void> { await initia ...

javascriptreactjstypescriptnext.js

Comparing ng-transclude usage: element or attribute styling

Creating a wrapper directive to frame a notification widget within a list is my goal. I plan to transclude specific content based on a property from the 'notif' object into this frame. Currently, I have hardcoded a 'div' element. The i ...

javascriptangularjsangularjs-directivetransclusionangularjs-ng-transclude

Mastering advanced String templating using loops and control statements in Javascript

During runtime, I receive an array similar to the example below: var colors = ['red', 'green', 'blue']; I then need to create a JSON String that looks like this: { "color" : { "name" : "foo", "properties ...

javascriptnpm

Can you explain the concept of a function value?

In the world of JavaScript (ECMAScript 5), functions are highly esteemed (referred to as "first-class functions"). This unique characteristic allows us to treat functions as expressions, which means they can produce values and even include other expressio ...

javascriptfunctionecmascript-5

The custom tooltip is not being displayed as intended

I'm currently working on customizing tooltips in angularjs google charts. My goal is to display multiple series data along with some text within the tooltip, similar to the demo showcased here. Specifically, I aim to include the legend and title of th ...

javascriptangularjschartsgoogle-visualization