Combining the variable name and its corresponding value in JavaScript

I am looking to work with multiple titles, such as title1, title2, title3, and so on. How can I create a variable that dynamically fetches the value of these fields?

function getTitle(i){
    var myScope={}
    myScope["title"+i]="title"+i // Is there a better way to utilize this? And how?

    var output = props.attributes.title1 // This current approach is static. Instead of using just 1, I want to concatenate the value of i like:
    var output = props.attributes.title+i
    return output
}

I aim to append the value of i to the word 'title', creating outputs like title1 or title2, etc.

Answer №1

To create dynamic content, you can use the following code snippet:

const output = props.attributes[`title${i}`];

Answer №2

It seems like you can achieve what you're looking for using template literals in JavaScript.

function generateTitle(i) {
  let title = 'myTitle'

  let result = `${title} ${i}`
  console.log(result)
  return result
}

generateTitle('merged')

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

Utilizing Laravel5 to create captivating Highmaps visuals

Good day! I am currently setting up my database to work with HighMaps using Laravel5. I have received JSON data from Laravel in the following format: [{"hc-key":"es-vi"},{"hc-key":"es-cs"},{"hc-key":"es-lo"},{"hc-key":"es-z"}] Highmaps requires the data ...

Collecting information from JSON files

Within the cells of my calendar are placeholders for events, dates, participants, and descriptions. Now, I am looking to populate these placeholders with data previously stored using localStorage. Unfortunately, my current code is not achieving this. How ...

Most efficient method for dynamically changing HTML content with JavaScript

Can anyone provide guidance on how to switch HTML content using JavaScript? For example: if($sid == 0) {insert one HTML code} else {insert another HTML code} Which method is preferable - LESS, jQuery, CSS3, etc? ...

Selecting the child checkbox within the parent div using ng-click

Is there a way to trigger the click event of a parent div on its child checkbox in AngularJS? The Checkbox will have the attribute hidden, necessitating the parent div to act as the clickable element. Sample HTML: <body ng-app="checkboxApp"> ...

Test an express + sequelize server using chai-http ping command

Currently facing challenges while setting up tests using Express and Sequelize. The testing framework being used is Mocha + Chai. Initially, only a ping test is being attempted. The code snippet from server.js: const express = require('express&apos ...

Performing synchronized execution in a node.js application by utilizing the 'readline' package

Struggling with the asynchronous nature of node.js, despite hours spent on callbacks and researching. I have a program that reads lines from a file using the readline module in node, passing data to async functions within the program. The goal is to proces ...

The jQuery mobile Multiselect feature is not correctly updating the selected attribute

In my jQuery mobile custom multiselect, when I choose an item, the list of items in the HTML select tag does not update with the selected attribute. Check out the Multiple selects example on the page: <div data-role="fieldcontain" class="ui-field- ...

Selenium's HTML unit driver does not click the button

I am facing an issue where I am unable to click on an element with the onclick tag using HtmlUnitDriver. Page source: I have tried different methods to resolve this problem. Using the click method; public HtmlUnitDriver driver = new HtmlUnitDriver(Bro ...

In order to indicate the checkbox as checked, I must ensure that its value is set to

I have a requirement where I need to dynamically set the checkbox based on the value coming from the backend. If the value is true, the checkbox should be checked and if false, it should be unchecked. However, despite setting the value in the state rules, ...

Retrieve Latitude and Longitude by clicking using JavaScript

When I click on the map, I want to retrieve the latitude and longitude coordinates and display them in an alert. Here is the code I have: <!DOCTYPE html> <html> <body> <div id="googleMap" style="width:100%;height:400px;"></div&g ...

Unable to call Ionic component function using ref in Vue3

I'm attempting to utilize the closeSlidingItems method of the IonList element in order to automatically close the sliding item after clicking a button that appears from behind once the item is slid to the right. My approach involved referencing IonLi ...

Getting JSON data from an Angular JS controller can be achieved by utilizing the built-in

My user login function includes a method called logincheck, which takes in parameters and sends a request to the server. Upon success, it redirects the user to the dashboard with the member ID. this.logincheck = function(log) { var pa ...

What is the best way to capture just the refresh event without intercepting the close event or any changes to the

Is there a way to detect the refresh button click (F5) in a specific scenario? I have a task that involves clearing my localStorage whenever the refresh button is clicked, but also ensuring that if the URL changes or the page is closed, the localStorage ...

The innerHTML of the p tag remains unaffected when using document.getElementsById("")

HTML {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'lessons/style.css' %}" /> <script> function openNav() { document.getElementById("mySidenav").style.width = "20%"; document.getElementById("main" ...

Step-by-step guide on creating a unique Bootstrap Nav overlay effect

My Bootstrap navigation bar is functioning properly However, I am facing an issue in adding an overlay to the NAV menu on mobile screens I am using Bootstrap and Umbraco 7 <nav class="navbar navbar-fixed-top navbar-default" role="naviga ...

Next auth does not provide authentication functionality for Firebase

I've implemented next-auth with a firebase adapter, and while everything seems to be functioning properly in terms of saving users in the database, I'm encountering some issues with authentication. import NextAuth from "next-auth" impo ...

Tips for implementing Webpack in a website and app development project

In one aspect of my project, specifically an app built with React that makes use of webpack. Now, I am looking to apply webpack to other areas of the website that do not involve React. When attempting to install webpack in the main project folder, I enco ...

How to detect a click outside of a specific element in Vue without using any external packages

I'm curious about how to hide all displayed elements when clicking outside of those elements in Vue: <button @click="div1=true">Show div 1</button> <div v-if="div1">DIV 1</div> <button @click="div2=true">Show div 2</ ...

Is there a way to asynchronously load image src URLs in Vue.js?

Why is the image URL printing in console but not rendering to src attribute? Is there a way to achieve this using async and await in Vue.js? <div v-for="(data, key) in imgURL" :key="key"> <img :src= "fetchImage(data)" /> </div> The i ...

How can parameters be passed to a JavaScript or jQuery function?

I am currently utilizing a JS/JQ function to convert values into currency by adding commas. Although the function is running smoothly, I am encountering an issue when attempting to pass parameters to it. Kindly provide assistance on how to successfully pas ...