I encounter issues when entering conditions in my JavaScript code

Being new to JavaScript, I'm trying to save the Vector position and use two buttons (forward and backward) to move the Camera to that specific location. I also attempted to incorporate 'gsap' for smooth movements, but unfortunately, the code isn't functioning properly.

//Coordinates
let positionIndex = 0;
const positions = [
    {
        x: -0.05,
        y: 0.6,
        z: -0.17
    },

    {
        x: -2,
        y: 1,
        z: 1
    },

    {
        x: 0.3,
        y: 0.6,
        z: -0.6
    }
]

//on button forward clicked
var element = document.querySelector(".button-1");
element.onclick = function MoveUp(){

if(positionIndex == 3)
{
    positionIndex = 0;
}
else
{
    positionIndex += 1;
}}

camera.position.x = positions[positionIndex].x
camera.position.y = positions[positionIndex].y
camera.position.z = positions[positionIndex].z


//on button backwards clicked
var element = document.querySelector(".button-2");
element.onclick = function MoveDown(){

if(positionIndex == 0)
{
    positionIndex = 3;
} 
else 
{
    positionIndex -= 1;
}}
camera.position.x = positions[positionIndex].x
camera.position.y = positions[positionIndex].y
camera.position.z = positions[positionIndex].z

Any advice from someone who can help me troubleshoot this issue would be greatly appreciated.

Thank you.

Answer №1

If you set the positionIndex to 3, it will result in undefined. A better approach might be to utilize positions.length - 1

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

Exploring the Dynamic Duo: Laravel Echo and JQuery

After including Echo in Vue.js' resources/assets/js/bootstrap.js, one of my components is throwing an error The error message states: "Error in mounted hook: 'TypeError: $ is not a function'" When I remove the Echo import, everything run ...

Upon page load, a dazzling SVG file will flicker before being adorned with CSS styles

I'm experiencing an issue with an SVG arrow icon on my webpage that flashes quickly across the entire screen upon page load before settling into its proper size and placement. I've tried using CSS to initially hide the icon and then reveal it aft ...

Filtering an array in React to match parameters value

I am working on developing an e-commerce web application using react-bootstrap. My goal is to display different items based on their category, so if the URL is product/men'sclothing, I want to filter my array and only show products that belong to the ...

Learn how to properly implement cookies in a fetch request within Nextjs

Here is a code snippet to consider: Index.getInitialProps = async function({req}) { const res = await fetch("http://localhost/api/tiles"); const json = await res.json(); } If the /api/tiles endpoint requires access to the uid cookie from the user, t ...

Tips for consistently displaying two decimal points following a period in ReactJS

I am currently working on populating a table in reactjs. One of the columns in the table displays numbers, and I now have a requirement where I need to always show 2 digits after the decimal point.https://i.sstatic.net/ZG6Qv.png For example, as shown in t ...

How can I show information on the same page as a link by simply clicking on it?

My goal is to create a functionality where clicking on a link will display specific information. Currently, all the links and their corresponding information are displayed at once. I want to change this so that the links are displayed first, and the inform ...

Only allowing designated email addresses to authenticate using Gmail Oauth

Is there a way I can limit logins by doing the following? I'm facing an issue where the page keeps reloading constantly after logging in once. function onSignIn(googleUser) { var profile = googleUser.getBasicProfile(); console.log('Name: ...

I am encountering issues with getting jquery.multiple.select.js to properly validate and send the checked boxes to PHP

I'm having trouble with the validation and output in my PHP mailer using jquery.multiple.select.js v1.1.0. My goal is to allow visitors to select multiple options to request a quote on my site. Currently, I am able to receive the email with all other ...

Is there a way to differentiate between a preflight request and the actual request?

Currently, I am utilizing CORS to transmit data to a server located on a different domain. Initially, the browser dispatches the preflight request to verify the server, followed by the main request. My goal is to identify when the request is in the "prefl ...

Troubleshooting: Fullscreen Video Autoplay Issue in Angular HTML

Could someone shed some light on why this autoplay video isn't working properly in Chrome? The video is actually hosted in firebase storage. Interestingly, it plays fine when you navigate to a different page and then return to the homepage, but doesn ...

What are the best methods for integrating Django with html, CSS, and JS?

While creating my website, I discovered that Django is typically used for the backend while HTML, CSS, and JS are used for the front end. For now, I am focused on designing my pages using HTML, CSS, and JS and have not yet begun developing the backend. I ...

When combining the ShaderMaterial with WebGLRenderer's logarithmicDepthBuffer feature enabled

In my scene, I apply the ShaderMaterial shown below to my objects. It works fine. However, when I enable the WebGLRenderer option logarithmicDepthBuffer to true, the Material defined is no longer displayed correctly. new THREE.ShaderMaterial({ uniform ...

Issues with sending parameters in JQuery Ajax POST request

Currently, I am delving into Ajax and encountering some issues with sending requests from the client side. I have a jsp file located at "/web" on my local server to manage requests. Though unsure if this is the best approach or if it should be handled by ...

Utilizing JavaScript Event Listener to Identify the Relevant PHP File for Display

I have incorporated two separate PHP files in my code: tabs.php accordion.php Both files iterate through the same dataset, but present the information in different ways. The choice between displaying tabs or accordions depends on the user's screen s ...

Angular 8 directive for concealing phone numbers

I am currently facing an issue with my phone mask directive that is designed to accept US format phone numbers. The problem arises when I try to clear the input by deleting one character at a time using the backspace key, as the value in the input field do ...

Is there a way to make the primary button on the previous page function correctly again, just like it did before it was clicked?

Issue Description: I am facing an issue on the order page where I need to link the "Continue" button to a booking page. After reaching the booking page, I expect users to be able to navigate between the two pages seamlessly even when they use the browser& ...

The integration of cypress-cucumber-preprocessor with multiple testing frameworks appears to be experiencing compatibility issues

I am trying to set up a connection between Cypress and Cucumber, and I came across this plugin: https://www.npmjs.com/package/cypress-cucumber-preprocessor However, I am having trouble with my implementation as it seems to be missing. I have also added th ...

What is the best way to fill HTML tables using an ajax response?

This is a Laravel blade view/page that requires updating without the need to refresh the entire page. The blade.php code functions correctly and retrieves data from a MySQL database, but there seems to be an issue with the AJAX and JavaScript implementati ...

Bi-weekly Calendar Gathering

I am able to get my events sorted by day with the following code: daysOfWeek: [2], However, I have not been able to find any information in the documentation on how to make it sort fortnightly. Can this be done with fullcalendar? Solution: Just a heads ...

Searching for the right approach to implementing useState with count in order to efficiently add new items in Next.js

Although my code currently functions, I have a feeling that I am not utilizing the useState and useEffect hooks in the best way to achieve my ultimate goal. Let me explain further - I have a button with an onClick event in a separate component, which passe ...