Displaying an image with a JavaScript variable is a common task in web

I have a Javascript code snippet below where the image name "samson decosta" is stored in a MySQL database. I am retrieving this image and trying to display it as a background_image in a div.

document.getElementById("image_chk").style.backgroundImage="url(img/"+ clicked_id+".jpg)";

The issue I am facing is that whenever I store an image name with spaces between the words, the image does not display. However, when I replace the spaces with underscores (or remove spaces altogether), the image displays correctly.

For example,

clicked_id = samson decosta (unable to retrieve this image due to spaces).

clicked_id = samson_decosta (able to retrieve this image).

clicked_id = samsondecosta (able to retrieve this image).

javascripthtmlmysqlcss

Answer №1

Always remember to enclose parameter values in single quotes when dealing with URLs

document
  .getElementById("image_chk")
  .style.backgroundImage="url( 'img/"+ clicked_id+".jpg' )";

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

Switching between displaying or hiding one of two backgrounds within a div using CSS and jQuery

Seeking guidance on implementing a two-background div setup where A is constantly displayed within the element and toggling B based on button control click. HTML <div class="container"></div> CSS .container{ url(B.png) 10px 10px no-repeat ...

jquerycssbackground-image

The angular2-webpack-starter kicks off with a simple static page

When starting my project using angular2-webpack-starter, the initial loading of index.html allows us to create our own components. However, in my case, I am looking to first direct users to a static page without any Angular code before clicking a button th ...

htmlangularjs

MYSQL Query Failing to Retrieve Data

Currently, I am working on my social network project, and I am facing an issue where the profile picture and writer's name do not display when a post is shown on the newsfeed. Here is the code snippet that I am using: $owner_id=mysql_result($result,$ ...

phpmysqlhtml

Extracting information from a checkbox list displayed within an HTML table

I have a table with multiple rows and two columns in each row. The first column contains text, and the second column consists of checkboxes. While I was able to retrieve the values from the first column, I am struggling to fetch the values of the selected ...

javascripthtmljsp

Does a DOM API exist specifically for querying comment nodes within the document?

My document contains a debugging comment that appears as follows: <!--SERVER_TRACE {...}--> Is there a method to search the DOM and access this specific node? I would prefer a vanilla JavaScript solution, without relying on any external libraries. ...

javascripthtmldom

The clipPath feature in webkit fails to display correctly

After reading this insightful article, I decided to experiment with applying a gradient clip-path to a simple shape (an O letter converted to curves). To my frustration, the technique worked perfectly in Firefox but failed to render anything in webkit bro ...

csssvgfirefoxwebkit

Using Special Fonts in Visual Studio 2013

Encountering a small issue with Visual Studio 2013. My application, developed using html and javascript, utilizes a custom font. When attempting to run the application on a different computer that does not have the font installed, it fails to display corr ...

htmlcssvisual-studio-2012

Turn off automatic HTML correction in Google Chrome

I'm currently developing a NODE.js app that utilizes Nunjucks as its view engine. To ensure the validity of the HTML being generated, I've implemented tests to check if all tags are properly closed. My approach involves spinning up the applicatio ...

htmlnode.jsgoogle-chromegoogle-chrome-headless

Is there a way to import TypeScript modules from node_modules using browserify?

After successfully running tsc, I am facing difficulty understanding how to import TypeScript modules from node modules. The crucial section of my gulp file is as follows: gulp.task('compile-ts', ['clean'], function(){ var sourceTsF ...

javascriptnode.jstypescriptgulptsify

Socket IO: Error - The call stack has exceeded the maximum size limit

Whenever a client connects to my node.js server, it crashes with a 'RangeError: Maximum call stack size exceeded' error. I suspect there's a recursive problem somewhere in my code that I can't seem to find. This is the code on my serve ...

javascriptnode.jssocketswebsocket

What is the process for changing the URL displayed in the address bar for each individual page?

Hey everyone, I need some help with a website issue I'm having. Let me explain what I'm trying to accomplish. My website www.website.com has several pages and is currently hosted on Apache via Aruba www.website.com/site/index.php ...

html.htaccessurl

Arrange a set of items using AngularJS according to specific criteria

Hello, I'm new to Angular I've created an angular app and you can view it in this plunkr. Can someone guide me on how to sort the list displayed here using angular? I want the course with the flag to always stay on top, while sorting the rest o ...

javascriptangularjs

Tips for accessing the result of a Node.js mysql query connection

New to Node.js and trying to retrieve data from a database using a select query. Below is my code: var address = socket.request.client._peername.address; var ip_addrss = address.split("::ffff:"); let mine = ip_addrss[1]; var location = iploc ...

mysqlnode.js

What is the process for attaching an analytics tag to data messages using the Firebase Admin SDK with Javascript or TypeScript?

Adding a label to my message is something I'm trying to do. I checked out the official guidelines here and found a similar question answered on Stack Overflow here. I've been attempting to implement this in JavaScript, but I'm stuck. Here& ...

javascripttypescriptfirebase-cloud-messaginglabelsend

The hamburger menu is only functional for a single link

I've been developing a hamburger menu for my website, and it seems to be working fine until I click on a link. Once I navigate to a new page, the menu stops responding. To fix this issue, I attempted to use window.location.reload, which worked in Chro ...

javascriptphpjqueryhtmlcss

Having trouble applying CSS styles to an element using JavaScript

Hello, I have an unordered list with some list elements and I am trying to apply a CSS style to highlight the selected list element. However, the style is not taking effect as expected. function HighlightSelectedElement(ctrl) { var list = document.ge ...

javascripthtmlasp.netcss

Having trouble scaling image with CSS, not reacting to size properties

I have little experience in web development, but a small business client has me working on their website while I handle other tasks for them. I've created a home page design that is almost ready to be turned into a template for the chosen CMS. Things ...

htmlcssimage

I'm currently attempting to incorporate the Material-UI InfoIcon into my code, but I'm unsure of how to properly integrate it within a TextField component

I am attempting to integrate the Material-UI InfoIcon into my TextField code, but I'm unsure of how to go about it. Here is the snippet of Material-UI code: <InfoIcon fontSize="small" /> This is where I would like to place it: <Grid item ...

javascriptreactjsmaterial-ui

When two $scopes are updated simultaneously, it leads to the duplication of data

Here is the snippet of code I am working with: $scope.addToOrder = function(index) { var tempItem = $scope.item; if (tempItem[index].validate == true){ if (_.isEmpty($scope.item2) == true) { $scope.item2.push ...

javascriptangularjsangularjs-scopejavascript-objects

Tips for identifying the amount of <ul> elements contained within every div

Dealing with a large file structured in the same way, I am looking for a method to isolate a specific div, determine the number of ul's within it, and then iterate through each one to extract the value of every li element. <div class="experiment ...

javascriptjquery