I am currently working with a JavaScript file that receives input from an HTML page. My task is to incorporate this variable into a CSS style that is embedded within the JavaScript file

I recently started utilizing simplemaps and came across a JavaScript file that contains a function to extract values from an HTML page.

Here's the JavaScript function:

function getValue(intvalue){
alert(intvalue);
var mapval = intvalue;
}
var simplemaps_worldmap_mapdata = {

main_settings:{
//General settings
width:1004,
background_color: '#FFFFFF', 
background_transparent: 'no',
border_color: '#FFFFFF',
zoom: 'yes',
pop_ups: 'detect', //on_click, on_hover, or detect

//Country defaults
state_description:   'Country description',
state_color: '#88A4BC',
state_hover_color: '#3B729F',
state_url: 'http://simplemaps.com',
all_states_inactive: 'no',

//Location defaults
location_description:  'Location description',
location_color: '#FF0067',
location_opacity: 1,
location_url: 'http://simplemaps.com',
location_size: 35,
location_type: 'circle', //or circle
all_locations_inactive: 'no',

url_new_tab: 'no',  
initial_zoom: 1,   
initial_zoom_solo: 'no',
auto_load: 'yes',
hide_labels: 'no'  
},
}//end of simplemaps_worldmap_mapdata

I am currently working on dynamically inputting values for the 'initial zoom' and color fields. Adjusting these values results in different zoom levels of the image.

Answer №1

It seems like you're unsure about the specific question, but it looks like you need to access the main_settings object.

To access a property in an object, you can use:

simplemaps_worldmap_mapdata.main_settings.initial_zoom

or

simplemaps_worldmap_mapdata["main_settings"]["initial_zoom"];

For more information, you can read this article.

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

JavaScript error: Cannot read property 'str' of undefined

I'm attempting to retrieve specific values from a JSON array object, but I encounter an error message. var i = 0; while (i < n) { $.get("counter.html").done(function (data2) { var $html = $("<div>").html(data2); var str = ...

The "Add to Cart" button is non-responsive in the Ionic app

After purchasing the icymobi source code from codecanyon, I encountered an issue with adding a cart button to the wishlist page. Despite my efforts, the button does not add the product to the cart. https://i.stack.imgur.com/pqr7J.png The file in question ...

Using Webpack to transfer a function to the front-end

I am currently delving into the world of webpack and attempting to set up a basic integration. Within my file script.js, I have included some essential functions: scripts.js export foo = () => { console.log('foo') } export bar = () => ...

The div on my website is rising to the top

My final div (well, not really final as I plan to add more divs) is moving upwards with the page (trying to adjust the height). I can't figure out why this is happening, especially since my second div is working perfectly fine. Link here: HTML ...

`Utilizing Symbolic Links to Share Code Across Multiple React Applications`

Presently, I have developed two distinct frontend applications. One is a lightweight mobile client, and the other is a heavy administration panel. Both of these were built using Create React App (CRA), utilizing TypeScript throughout. The current director ...

Error Comparison Between AngularJS Date String and Object

Having an issue retrieving user information by searching firstname in Mongo DB using Mongoose schema. The response includes the firstname and booking date, but the date is returning as undefined with the error message Error: [ngModel:datefmt] Expected `201 ...

Guidance on using AJAX to update select box options based on the selection from another select box

I am currently working on a popup form that includes two drop-down menus. The challenge I am facing is that the options in the second drop-down menu need to change based on the selection made in the first one. This requires me to retrieve information from ...

How can I smoothly navigate to the top of a page using AngularJS?

After receiving an ajax call response using angularjs, I am looking to automatically scroll to the top of the page. The purpose is to bring focus to alert messages displayed at the top of the page upon receiving the ajax response. Appreciate any guidance ...

Two divs featuring a cohesive gradient background, with one div containing a sticky element

I am currently facing a dilemma that is causing me some frustration. The situation is as follows: I have two divs on my webpage. The top div consists of a banner with the logo, while the bottom div is the navbar containing icons as links and a dropdown me ...

Can you explain the significance of npm WARN excluding symbolic link?

Could you please explain the meaning of npm WARN excluding symbolic link? Also, any advice on how to resolve this issue? ...

Assigning a style class to the material-menu component in Angular 2+ is not possible at this

Is there a way to apply a style class to mat-menu elements? I've tried various methods, but it seems like the styles are only visible when inspected using Chrome. HTML <mat-menu class="matMenuColor" #menu="matMenu"> <form #logoutForm ng ...

Is there a way to automatically set all object properties to false if one property is set to true in React?

The Issue: My task at work involves creating 3 buttons with separate filters to display different tickets in a table. All the functionality is completed, and the filtered tickets are displayed correctly. However, I am facing an issue that is preventing m ...

Verifying Objects with AngularJS JSON

Currently, I am using Angular to import a json file and showcase it in a table. Since some of the objects are different, I want to check if job.text is present. [ { "job": { "href": "www.google.com", "text": "Google" }, "api": " ...

FormSubmit is recommending that my form utilizes the method=POST attribute, even though it is already doing so

I have implemented FormSubmit to create a contact form on my static website, which is hosted on a server. Below is how my contact form is structured: <div id="contact-area" class="container"> <h1>~$ contactme</h1&g ...

Transforming a menu tab into an active anchor when navigating to a particular section

Hello, I have successfully created a JavaScript code that can dynamically add menu tabs into the menu list window.addEventListener("load", () => { const navList = document.getElementById("nav_list") const fragment ...

Filtering data in a table using Jquery based on specific columns and headers

To retrieve a price value from an HTML table based on a specific column and header, follow these steps: Here is how the table is structured: https://i.sstatic.net/UM3MA.png The HTML code appears as follows: <input id="search_height" placeholder= ...

I am struggling with utilizing the data that has been fetched in JavaScript. Despite successfully retrieving the data, I am facing difficulties in effectively using it in

I am facing an issue where I am unable to utilize the data after fetching it from a local JSON file. Below are the screenshots showcasing the problem: Here is the data displayed in the console: Here is the code snippet: fetch('api_link.json') ...

Tips on implementing the hide function within an if statement

When I click the .dot element, it should query the database and display the result. On the second click, it should hide the result. However, on the first click, nothing is shown. If I leave the second if statement empty, the database is successfully queri ...

Google Maps Marker disappeared upon relocation to the current application

After reading several articles on missing markers, I'm still facing a unique issue that doesn't seem to have a clear solution. The problem arises when attempting to render a basic map with just one marker and a fixed location. Despite Chrome dev ...

Data that is loaded asynchronously will not display rendered

I have async data loading via jayson from a server. After the data has finished loading, the boolean "loading" is set to false but my content does not re-render. Even though I can see on the console that the data was loaded correctly. var App = new Vue( ...