increase the count by one every second using setInterval

I need my sHand to increase by 6 every second, but currently it only increases once. When I try something like this.sHand++, it works fine and increases by 1 degree per second. However, I want it to increase by 6 instead of 1. Any solutions?

data:{
    sHand: 30
  },
  computed:{
    style(){
        return { transform: 'rotate(' + this.sHand + 'deg)'}
    }
  },
  created(){
    setInterval(() => {
        this.sHand += 6  // not working :/
    },1000)
  }
    <div :style="style" class="secondhand"></div>

Answer №1

Assignment was overlooked.

this.sHand++ is equivalent to:

this.sHand = this.sHand + 1

Therefore, it increases and assigns at the same time.

this.sHand += 6

This will suffice.

Answer №2

Make sure to update the variable this.sHand with the new value:

this.sHand = this.sHand + 6

Answer №3

Make sure to set the value for this.sHand once it has been incremented.

initialized(){
    setInterval(() => {
        this.sHand = this.sHand + 6
        // alternatively, use: this.sHand += 6
    },1000)
  }

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

Implementing a Where Condition in JavaScript with the MongoDB whereObj

Working on a project involving JavaScript and MongoDB has led me to a specific collection named test_collection. Within this collection, there is a field/object called test_field_1 which contains test_sub_field_1 and test_sub_field_2. Currently, I am sett ...

Dart and external CSS and JS libraries and tools

As I prepare to dive into developing my very first web application, one technology that has caught my eye is Google Dart. The idea of using a new, innovative approach to web development excites me, and I am seriously considering utilizing it for my project ...

Defined a data type using Typescript, however, the underlying Javascript code is operating with an incorrect data type

Recently delving into Typescript and following along with an educational video. Encountered a strange behavior that seems like a bug. For instance: const json = '{"x": 10, "y":10}'; const coordinates: { x: number; y: number } = JSON.parse(json); ...

What Causes My Issue with $(document).ready()?

Currently delving into the world of jQuery, but I've hit a roadblock. Below is the snippet in question: var script = document.createElement('script'); script.src = 'https://code.jquery.com/jquery-3.4.1.min.js'; script.type = " ...

Steps for Disabling Autocomplete in a JSP Page

How can I prevent the browser from remembering the username and password on my JSP page after submitting the form? I've already tried using autocomplete=off in the JSP code. <form name="indexFrm" id="indexFrm" autocomplete="off" method="post"> ...

Encountering issues while trying to run Nuxt locally with HTTPS due to a problem with the n

Currently, my objective is to run nuxt locally with HTTPS in order to test some geolocation functionalities. (https://nuxtjs.org/, https://nuxtjs.org/api/nuxt) I have been following a tutorial available at: In addition, I came across this resource as wel ...

Angular - ui-router states are not being detected

I'm currently working on a Spring and Angular JS web application project. The structure of the project is as follows:https://i.sstatic.net/xgB4o.png app.state.js (function() { 'use strict'; angular .module('ftnApp') .con ...

What is the best way to handle an AJAX JSON response in AngularJS?

Need help with extracting properties from a JSON object returned by a REST service in AngularJS? Want to parse the firstName, lastName, and other attributes from the JSON response? Check out the code snippets below for guidance. Here is an example of an A ...

Any ideas on how I can adjust this basic JSON to avoid triggering the "Circular structure to JSON" error?

Learning Journey I am currently teaching myself JavaScript and exploring JSON along the way. My current project involves developing a JavaScript WebScraper where I plan to store my results in JSON format. While I am aware of other methods like using data ...

Is it possible to pass multiple IDs into document.getElementById?

I am working on a form that contains 45 dropdown lists and currently, I am using the following code for validation. Is there a way to modify this code so that I can use a single function to validate all 45 dropdown lists? Below is the Function: function ...

What could be causing these strange white lines to show up on my AFrame meshes?

When I import a GLB scene with baked textures into A-Frame using THREE.js, I am experiencing an issue where white lines appear on my objects (pictured below). The walls are grouped meshes which may explain the lines appearing there, but I am puzzled as to ...

What is preventing typescript from inferring these linked types automatically?

Consider the following code snippet: const foo = (flag: boolean) => { if (flag) { return { success: true, data: { name: "John", age: 40 } } } return { success: false, data: null } ...

Trouble with Bootstrap 5 Carousel swipe functionality: Issues arise when inner elements with overflow are involved, causing vertical scrolling to interfere with left to right swipes

I've been scouring the internet for answers to my unique issue with a Bootstrap 5 carousel. My setup is fairly basic, but I've removed the buttons and rely solely on swiping to navigate through the carousel items. When I swipe left to right, eve ...

Troubleshooting Vue 3 Computed Property Not Updating

I'm currently facing a challenge while developing a login form using Vue 3. I am having difficulty in getting the state to update 'realtime' or computed. When attempting to login a user from the template, the code looks like this: <button ...

Navigate through each of the pictures within the folder and encode them into base64

I'm currently working on a project where I need to convert images in a folder to base64 and then store them in MongoDB. At first, I successfully converted a single image: var filename = '1500.jpg'; var binarydata = fs.readFileSync(filename ...

Establishing a secondary Node.js service for local communication with Parse Server

My current project involves using Node.js + Parse Server for an application. I have been utilizing the Parse SDK from the client side, but there are still many changes and refactors that need to be made. One issue I am facing is that certain logic should b ...

What is the best way to ensure that all components within a Container automatically inherit its calculated width?

Check out my tab panel setup on Sencha fiddle. The buttons are dynamically added to a tabs container with a layout of hbox within a vbox. The width of the tabs container is determined by the flex property. I attempted to set each button's width to &a ...

Verify whether the value is considered false, true, or null

When dealing with variables in JavaScript, I often need to determine if a variable is false, true, or null. If the variable is null or undefined, I want to assign an array to it by default. While this syntax works well in other languages, in JS assigning a ...

After successfully sending a GET request to the API, the Next.js 13.4.3 website still does not reflect new posts added on the hosting platform

I am currently using Next.js version 13.4.3 in my app directory to create a blog site. However, I am facing an issue. When I run npm run build locally on my computer and then start with npm run start, the new posts are displayed normally after adding them ...

The width of the table remains consistent

I have created a division that includes two tables stacked on top of each other. However, I am facing an issue where the width of the second table remains fixed and does not change even when I try to increase it. Here is the code snippet below: functio ...