I am looking to dynamically alter the CSS background URL using JavaScript

Currently, I am looking to update the background image url using JavaScript. Most tutorials I've come across involve having the image downloaded on the desktop and then providing its path. However, in my scenario, the user will input an image link which should be displayed within that specified URL.

let imglink = document.getElementById("img_link").value
document.getElementById("imgPreview").style.backgroundImage = 'url(' + imglink + ')'

I acknowledge that my code might seem incorrect and unconventional. I am seeking a proper solution on how to insert the link into the URL without resorting to overly complex coding as I am still at a beginner level and find it challenging to grasp advanced concepts.

javascripthtmlcss

Answer №1

Amend the following code snippet:

'url(' + img_link + ')'

with this updated code:

'url("' + img_link + '")'

Answer №2

Is this functioning correctly?

Assign the background image of the element with id "imgPreview" to the value of the variable img_link using document.getElementById("imgPreview").style.backgroundImage

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

props remain undefined even after being assigned in the redux store

I encountered an unusual error related to a reducer called prs when adding or deleting a person in an app. Essentially, this app allows users to add or remove a person with a unique ID assigned to each individual. To start off, here is the parent componen ...

javascriptreactjsreduxreact-redux

Effective strategies for integrating Bootstrap and AngularJS without relying on jQuery

Currently exploring AngularJS after experimenting with Twitter's Bootstrap. I appreciate Bootstrap for its simplicity, sleek design, and mobile-friendliness. On the other hand, I have noticed a trend where people recommend using AngularJS over jQuery, ...

javascripthtmlangularjstwitter-bootstrap

How to add 1 to the final element in a JavaScript

I'm currently working on a task that involves incrementing the last element in an array using pop() and push(). However, I'm facing an issue where the original values are being retained after I try to increment the popped array. The objective is ...

javascriptarrays

"Unexpected outcome: Angular's HTTP request for a JSON file yields an undefined

Learning Angular has been a challenging experience for me. I am currently working on reading a json file into a chart on my main app page to visualize temperature data from my PI. Despite trying various methods found online, I have not been successful so f ...

javascriptnode.jsjsonangular

Creating a pie chart with ExtJS using data from a JSON file

After successfully creating a pie chart using ExtJS with JSON values through AJAX calling, I encountered an issue when trying to do the same with JSON values retrieved from a file named myjson.json. Can anyone advise me on how to draw a pie chart by retrie ...

javascriptajaxjsonextjs

How can we use jQuery to extract an HTML element's external stylesheet and add it to its "style" attribute?

My goal is to extract all CSS references from an external stylesheet, such as <link rel="stylesheet" href="css/General.css">, and add them to the existing styling of each HTML element on my page (converting all CSS to inline). The reason for this re ...

javascriptjqueryhtmlcss

Make sure to validate a form when submitting from an external source rather than through an HTML

In my form, there are various input fields (some acting as inputs even if they're not). Each field is validated upon submission by angular validation and html attributes like required, ng-maxlength, minlength, etc. Now, we want to implement a keyboar ...

javascriptjqueryangularjshtml

Durandal attempts to retrieve a view located within the viewmodel directory

Having an issue with durandal's compose binding as it is looking for views under app/viewmodels instead of app/views The ViewModel code: define(["fields/fieldClosures"], function (fields) { var ctor = function(opt) { this.value = opt.valu ...

javascriptknockout.jsdurandal

jQuery Ajax form submission encountering issues

I created a form dynamically with the help of jQuery. Here is the code: <form id="editorform" accept-charset="utf-8" method="post" name="editorform" action="menuupdate"> <div> <input id="updateItem" type="submit" value="Update"& ...

jqueryajaxhtmlspring-mvc

What is the significance of $() in jQuery?

I understand that $() is a selector, but I find it puzzling as to what it actually selects since there is nothing inside the parentheses. Is this a common practice or frowned upon in coding conventions? An example of where I have seen it used is when maki ...

javascriptjqueryhtmljquery-uidom

The crosshair functionality in Zing Chart is causing a CPU leak

After enabling the crosshair feature on my chart, I noticed a significant issue when using Chrome 57 (and even with versions 58 and ZingChart 2.6.0). The CPU usage spikes above 25% when hovering over the chart to activate the crosshair. With two charts, th ...

javascriptangularzingchart

Most effective method to retrieve yesterday's data

Currently, I'm working on a requirement and I need to validate the logic that I've implemented. Can someone help me with this? The task at hand is to calculate the 1 month, 3 month, and 6 month return percentages of a stock price from the curren ...

javascriptangularjsnode.jslogicconcept

Is there a way to command Chrome or Firefox to execute JavaScript or load a Bookmarklet directly from the command line?

Is there a way to execute javascript in the current browser window through the command line, either in Chrome or Firefox? Or is it possible to load a bookmarklet that includes javascript? I'm interested in creating a program that can monitor changes ...

cssfirefoxgoogle-chrome

Page rendering issue: Access to page unavailable

I've been attempting to include a link to my privacy policy in the footer using the following code: <a href="/privacypolicy"> Privacy Policy </a> However, when I view the homepage on my local host and try to access the privacy p ...

htmlexpress

Display line numbers in HTML/CSS cellsorIncor

Attempting to include row numbers in HTML/CSS. Below is the HTML code with React populating the rows: <table className="table table-striped"> <thead> <tr> {/*<th>ID</th>*/} ...

htmlcssreactjs

Firefox returns a "null" error when attempting to access the Vimeo API, whereas there are no errors reported when accessing the YouTube API or when

I tried researching this issue on multiple platforms, including Google and other forums, but I am still unable to resolve it. I recently transitioned from a proxy request approach (using AJAX to communicate with a server-side script that then interacts wit ...

javascriptajaxfirefoxyoutube

When using the resize property in monaco-editor, it may result in editor popups being obscured or

My current task involves utilizing the deltaDecorations method to display errors in my editor. Feel free to check out my code here: https://gist.github.com/dinager/41578bd658b60cc912a6023f80431810 Below is the output: I am currently attempting to in ...

htmlcssmonaco-editor

Help with enabling the recognition of backspace key in JavaScript?

My current JavaScript is almost perfect but missing one key element. The form has two fields that are disabled when the user fills it out. <label>Can you drive? </label> <input type="booleam" id="drive" disabled><br> <label>W ...

javascripthtml

Encountering a "Evaluation Failed" error while scraping YouTube data with Puppeteer and Node.js

As I attempt to scrape the YouTube headline and link from a channel using Puppeteer, I encounter an Evaluation Error presenting the following message: Error: Evaluation failed: TypeError: Cannot read properties of null (reading 'innerText') a ...

javascriptnode.jsyoutubepuppeteer

Creating a button in HTML that performs a POST request without redirecting involves using specific code techniques

Looking for a way to create an HTML button that triggers a POST request to a quick route with parameters passed through req.params. The challenge is preventing the button from redirecting me to the route when clicked, but instead staying on the same page w ...

javascripthtmlnode.jsexpressbackend