I am looking to add some flair to my ID "checkimg" using JavaScript

JavaScript

if ((valid1 && valid2 && valid3 & valid4 && valid5 && valid6 && valid7 && valid8)==1)
{
    // include an image in the specified ID.
    document.formElem.next1.disabled=false;
} else {
    document.formElem.next1.disabled=true;
}

HTML

<li id="checkimg">Personal</li>

CSS

background:transparent url(../images/checked.png) no-repeat top left;

If the JavaScript condition is met as true, I want to apply the above style to the element with id="checkimg". What code do I need to add inside the if statement?

javascriptjqueryhtmlcss

Answer №1

give this a shot

document.getElementById('checkimg').style.background = "transparent url(../images/checked.png) no-repeat top left";

Answer №2

$("#checking").css({'background':'transparent url(../images/checked.png) no-repeat top left'});

otherwise

$("#checking").css({'background':'transparent url(../images/checked.png)', 'background-repeat': 'no-repeat', 'background-position': 'top left'});

Answer №3

hello if you are using jQuery then 

$("#checking").css({'background':'transparent url(../images/checked.png) no-repeat top left;'});

if you are working with javascript then give this a shot:

if ((valid1 && valid2 && valid3 && valid4 && valid5 && valid6 && valid7 && valid8)==1)
{ 
     var obj = document.getElementById("checkimg");
    **MODIFY**
     obj.style.background = "background:transparent url(../images/checked.png) no-repeat top left";

    document.formElem.next1.disabled=false;

}
    else
        document.formElem.next1.disabled=true;

UPDATE 2: - you can also establish a css class:

.bgimg{background:transparent url(../images/checked.png) no-repeat top left;}

and append the Attribute to the obj.

obj.setAttribute("class", "bgimg"); // within your condition, remember u get the obj via getElementById

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

The PHP header() function is not properly redirecting the page, instead it is only displaying the HTML

After double checking that no client sided data was being sent beforehand and enabling error reporting, I am still encountering issues. The issue revolves around a basic login script with redirection upon validation. <?php include_once "database- ...

javascriptphpjqueryhtmlajax

"Despite using 'vertical-align: middle' on table cells, the alignment to the middle is not achieved when using AlphaImageLoader in IE6

I am currently working on aligning text within table cells that have a PNG Transparent background. To achieve this in IE6, I am using the filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() method. However, I am facing an issue where the text is no ...

cssinternet-explorer-6vertical-alignment

Navigating through Frames using Selenium in C#

I am facing an issue with using Selenium on this site. The elements I need to interact with are within a 'frame' that is inside a 'frameset'. Here is the relevant HTML snippet: <frameset rows="0%, 95%" frameborder="0" frameSpacing=" ...

c#htmlseleniumframeframeset

Left-aligned and centered - Bootstrap

I need help figuring out how to center a list of items on the page, but have them aligned left. I am using bootstrap. I want the text to be in the center of the page but aligned left. <ul class='text-center'> <li class=& ...

htmlcsstwitter-bootstraptext

The value of ajax data at index 0 is not defined

When using AJAX to retrieve the number of rows from a SQL query in PHP, the JSON return shown in the Firefox Network tab is [{"number":2}], with the number 2 being without quotes. However, when trying to access the value (2) using data[0]["number"] or dat ...

phpjqueryajaxsqlsrv

Manipulate text with jQuery

Is there a way to remove 'http://' or 'https://' from text using javascript? I am looking for regex solutions as well. This is what I have tried so far: JSFIDDLE HTML: <div class="string"></div> JS: $text = $('.s ...

javascriptjquery

Retrieve the ngModel's current value

One of the challenges I encountered is with a textarea and checkbox interaction. Specifically, once the checkbox is checked, I aim to have the value appear in the textarea. <div class="message-container"> <textarea *ngIf="mode === 1" ...

javascriptangularionic2ionic3

Can the dashstyle be configured for a solid-gauge chart in Highcharts?

I am having trouble making the border dashed on my pie chart. It seems that the solution provided for solidgauge charts is not working as expected. Interestingly, the graph property is undefined for solidgauge charts. I wonder if the dashed style could be ...

javascripthighchartsborderpie-chart

You cannot nest a map function within another map function in React

Having some trouble applying the map function in HTML using React. Below is the code snippet: response = [ data : { name: 'john', title: 'john doe', images: { slider: { desktop: 'link1', mo ...

javascriptreactjs

Using Vue.js to create numerous modal popups

Currently, I am using Vue.JS for a research project at my workplace. My focus right now is mainly on the front-end. I have a table with several entries, and when a row is clicked, I want a modal popup window to display further details about that specific ...

javascriptjqueryangularjsvue.js

Why Isn't the Element Replicating?

I've been working on a simple comment script that allows users to input their name and message, click submit, and have their comment displayed on the page like YouTube. My plan was to use a prebuilt HTML div and clone it for each new comment, adjustin ...

javascripthtmlcss

JSON conversion error: Unable to convert circular structure to JSON - locate problem within JSON structure

Currently, I am utilizing Contentful in conjunction with a MEAN stack. Upon querying the Contentful API, I receive a json object. contentClient.entries(query, function(err, entries){ if (err) throw err; console.log(entries); }); Lately, I have been e ...

javascriptjsonnode.jscontentful

Vue.Js for a Single Page Application utilizing Two Data Sources

Currently, I am working on developing a Single Page Application using vue.js. My project consists of 2 bundles of pages stored in separate S3 buckets - one public and one private. The public bundle is meant to be accessible to all users, while the private ...

javascriptvue.jslazy-loadingsingle-page-application

Deselect the checkbox that has been selected using a JavaScript function

I have been searching everywhere for a solution and I am hoping someone in this community can assist me. I am working with a script that triggers when a checkbox is selected from a group of checkboxes. Each checkbox is given a value of "customer id". < ...

javascriptfunctioncheckbox

Change the CSS property to override the text-overflow with ellipsis

In my specific scenario, I need to override the default ellipsis behavior that adds '...' to text when using 'text-overflow: ellipsis', and instead use two stars **. Is there a way to achieve this using only Pure CSS? It is important t ...

css

The Zoom CSS property seems to be experiencing some issues on the Firefox browser

After researching the issue, I discovered several solutions involving css3 transition techniques. Currently, I have been using {zoom:1.5} for all of my buttons. However, this method does not work on Firefox. When attempting to implement the transition pro ...

htmlcss

Inject the content loaded from the server into a div element, and insert that div at the

I am trying to insert the div(#loadmore) element inside the div(#boxchatting) element when the content from "result.php" is loaded into div(#boxchatting). Here is the code I used: $('#loadmore').prependTo('#boxchatting'); $('#boxc ...

javascriptphpjqueryajax

Steps for inserting an image:

Looking for help adding a static header image to a simple HTML page that contains two div tags: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd"> <html> <head> ...

jqueryhtml

Implementing Vuejs sorting feature post rendering

Currently, I have elements linked to @click event listeners. <th @click="sort('dateadded')" class="created_at">Date Added I am looking for a way to automatically trigger this sorting function when the Vue.js component renders, so that th ...

javascriptvue.jslodashvuejs2

What is the best way to increase the row spacing in an Ant Design Table?

I have a table with expandable rows in antd, and I am looking to add some vertical space between the rows. I've tried using the rowClassName property provided by antd, but it did not work as expected. I also attempted to use a custom component, but th ...

javascriptreactjsnext.jsantdant-design-pro