Employing a variable for locating an element based on its class or id

Can the image source be changed using a JavaScript variable? For example, if I have a variable called "vp_active_row_count" that indicates which ball is active by number ("_a" signifies active image source).

I am struggling to locate any object with the provided JavaScript code. Is it actually feasible?

Javascript

var vp_active_row_count=2;
var test = '"#'+vp_active_row_count+'"';
$(test).attr('src','assets/img/vp_a.png');

HTML

<div class="vp_balls" style="width: 48px;">
    <img id="1" src="assets/img/vp_a.png">
    <img id="2" src="assets/img/vp.png">
    <img id="3" src="assets/img/vp.png">
</div>
javascripthtmlcss

Answer №1

Avoid double quoting! Quotation marks indicate strings in JavaScript, but jQuery functions do not require them twice.

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

How can a div fill the remaining vertical space, despite the dynamic height of the div above it?

Check out my code snippet on JSFiddle: http://jsfiddle.net/nom4mxLt/ <div id="wrapper"> <div id="yellow">variable height (I put 200px but can change in realtime)</div> <div id="red">This one should fill all remaining space ...

css

What is the best way to update the div id by extracting the last digits from a number?

Is there a way to change the div ids using a function? Before: <div id="a_1">a1</div> <div id="b_1">b1</div> <div id="c_1">c1</div> <div id="d_1">d1</div> <button onclick="change()">Change</button& ...

javascriptjqueryhtml

Toggle the visibility of an HTML element and dynamically change the text of a button

As a beginner in Javascript, I am experimenting with changing button text upon the show/hide of a fieldSet. However, I am encountering some issues with the button text not updating correctly. $(window).on("load", function() { $('.indoor').sl ...

javascriptjqueryhtml

Vue component using axios for conditional state toggling

My Vue method/function triggers a state change and toggles text on a button upon click. pauseTask: function() { this.isOpen = !this.isOpen; this.pauseButton.text = this.isOpen ? 'Pause' : 'Resume'; }, While it works flawle ...

javascriptvue.js

Tips for integrating SASS from the Bulma package into an Angular application

I'm currently working on implementing Bulma into my project. The documentation suggests using NPM to obtain it. yarn add bulma Further in the documentation, there is an example provided with code snippets like the ones below. <link rel="styles ...

cssangularnpmsass

Creating a layout with cards positioned next to each other using Bootstrap

I have been trying to display these 3 cards side-by-side, but they always end up stacked on top of each other. Is there a specific code I need to add to fix this? <div class="col-md-4"> <div class="card rounded-lg" style="width: 17.5rem;"> ...

htmlbootstrap-4

Rounding to Significant Digits: The Mystery of Vanishing Zeros

I am currently working on a JavaScript mathematics package that focuses on rounding to different significant figures (S.F.), but I have encountered a problem that is proving challenging to solve. Before delving into the issue, let me provide some backgrou ...

javascriptmath

Here is a unique rewrite: "Strategies for effectively passing the data variable in the geturldata function within Vue.js on the HTML side vary

How can I properly pass a variable in the getdataurl function in Vue.js? I need help with passing a variable in getdataurl function in Vue.js. Please provide a clear explanation and include as much detail as possible. I have tried doing some background r ...

javascriptphpjqueryajaxvue.js

Media queries for min-width and max-width are being disregarded in inline CSS styling

I am currently designing a pricing page for my Django application, featuring three columns. The intended design is to display all three columns side-by-side when the screen size is more than 768 pixels, and switch to a single column layout with pricing opt ...

htmlcssdjango

Angular.js - Update a model value through a function using a parameter

I am currently faced with the following scenarios: <input ng-model="something" /> <button ng-click="modify(something)">Modify</button> Within the controller, there is this method: $scope.modify = function (value) { value = value + ...

javascriptangularjs

The variable 'DataList1' is not recognized within the current scope

Upon loading a page, I encountered the following error message: 'The name 'DataList1' does not exist in the current context' Below is the code snippet where the issue occurred: listviewvideos.aspx.cs private void BindGrid() { ...

c#htmlcssasp.net.net

When creating nested objects, the defineproperty function on the object prototype does not trigger

Exploring and experimenting to unravel the workings of this feature, but I find myself puzzled by this particular scenario. Object.defineProperty(Object.prototype, 'a', {set: function() {console.log("Set!");} }); Based on my understanding, when ...

javascriptobjectdefineproperty

Multiple individual image uploads via ajax on a single webpage

Currently, I am facing an issue with my ajax upload script. It only allows for one image upload at a time which is causing problems for me as I am working on a shop CMS that requires multiple image uploads for each product. Each product needs a thumbnail i ...

javascriptjqueryajaximage-upload

Failure to send chat form

I have been developing a PHP chat application and everything is working well. However, I am looking to implement AJAX in order to prevent the page from refreshing. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></s ...

phphtmlajax

How to efficiently export modules and handle return values in Node.js using async functions

In my current project, I am extracting data from a CSV file and performing some operations on it to create an object with the derived information. This function is implemented using module.exports for exporting. var csvtojson = require('csvtojson&apo ...

javascriptnode.jsasynchronousnode-modules

Tips for integrating '.jar' files into React Native for Android operating systems

My English skills are not great. I work as a FRONT-END developer. Currently, we require an App that can connect to a Bluetooth Printer on Android using React-Native for development. The SDK file provided by the Printer's manufacturer has a 'ja ...

javascriptjavaandroidreact-nativefrontend

Convert a binary array into a signed 64-bit integer

Although JavaScript may not accurately represent all 64-bit integer numbers, it can handle numbers larger than 32 bits, which is what I am looking for. I need JavaScript to provide me with whatever level of precision it can offer. I have a byte array of a ...

javascriptarraysbinarynumbers

Is there a way to make a selected option stay selected in vue.js 2?

Here is the structure of my Vue component : <template> <select class="form-control" v-model="selected" :required @change="changeLocation"> <option :selected>Choose Province</option> <option v-for="option in o ...

javascriptvue.jsvuejs2vue-component

The browser does not support the display of Spanish special characters

I am working on a website and need to incorporate support for the Spanish language. I have prepared an XML file with both English and Spanish text. The XML file is being read based on the user's selection of language from a dropdown menu. Everything s ...

htmlxmlutf-8metaiso-8859-1

Tips for resolving the "Unexpected reserved word" error during the installation of Laravel Jetstream

I have been following the steps outlined on to set up Laravel Jetstream. Upon running artisan jetstream:install, I selected Livewire support, API support, email verification, and PHPUnit support for installation. Next, I executed npm install as per the ...

javascriptphplaravelnpm