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

Postman sends requests by utilizing AJAX and adhering to the same origin policy

I recently came across a Chrome extension called Postman that has proven to be incredibly useful. This tool is particularly handy for those working with RESTful applications. One thing that has puzzled me is how Postman is able to successfully send POST r ...

javascriptjqueryajaxapipostman

How can we manage JSON data in chunks during a progress event?

My dilemma involves dealing with a server request that may bring back a substantial JSON list (around 100K records, approximately 50 Mb) of points to be presented on a canvas using D3js. To ensure interactivity and save memory, I am keen on rendering them ...

javascriptjsond3.jsxmlhttprequestchunked-encoding

Highcharts is displaying inaccurate data on the chart

Can anyone help me figure out what's causing my example to not work properly? Here is the URL for reference: <a href="http://jsfiddle.net/LtkX2/" rel="nofollow">http://jsfiddle.net/LtkX2/</a> Thank you! P.S. Update: The issue has been ...

jqueryhighcharts

Django does not support running JavaScript natively

Wondering how to incorporate JavaScript into Django for creating chained forms? My first step was simply trying to understand how to run JavaScript. I've placed a basic main.js file in the static folder. I included a link to main.js in the header of ...

javascripthtmldjango

Requires a minimum of two page refreshes to successfully load

Our website is currently hosted on Firebase. However, there seems to be an issue as we have to refresh the website at least twice in order for it to load when visiting www.website.com. Update: We are unsure of what could be causing this problem. W ...

javascriptnode.jsreactjsfirebasenpm

Authenticate through Twitter when using PhoneGap Cordova

Looking to implement Twitter login in my application using JavaScript and HTML. How can I redirect users to the Twitter login page when they click on the "Sign In with Twitter" button? ...

javascriptandroidhtmlcordova

What causes Vue to drop nested component data within a v-for loop?

Witness the mysterious behavior through my fiddles: Anticipated outcome: https://jsfiddle.net/o7c9mwzf/27/ By clicking "unshift," I add an element to the beginning of my items array. After setting its data, clicking "unshift" again should maintain the el ...

javascriptvue.jsvuejs2vue-component

Implementing a JavaScript function that uses the AJAX method to confirm and update

I am currently attempting to update a database using the JavaScript confirm() function in combination with AJAX. My goal is to have "accepted_order.php" run if the user clicks "OK," and "declined_order.php" run if the user clicks "Cancel," all without caus ...

javascriptjqueryajax

Utilize JSON parsing with AngularJS

My current code processes json-formatted text within the javascript code, but I would like to read it from a json file instead. How can I modify my code to achieve this? Specifically, how can I assign the parsed data to the variable $scope.Items? app.co ...

javascriptjqueryangularjsjson

Visual Studio 2017 experiencing compatibility issues with Bootstrap

I've been working on creating a carousel using bootstrap within Visual Studio 2017. I utilized the NuGet package manager to install jQuery and Bootstrap, and to test its functionality, I generated a bootstrap snippet for the carousel. Take a look at ...

htmlcssbootstrap-4visual-studio-2017

I'm having trouble executing the straightforward code I discovered on GitHub

https://github.com/Valish/sherdog-api Upon downloading the sherdog-api, I embarked on installing node.js as a prerequisite for using this new tool, despite having no prior experience with such software. Following that, I opened up the command prompt and n ...

javascriptnode.jsgithubnpm

Scouring the web with Cheerio to extract various information from Twitter

Just starting out with Web Scraping, using Axios to fetch the URL and Cheerio to access the data. Trying to scrape my Twitter account for the number of followers by inspecting the element holding that info, but not getting any results. Attempting to exec ...

javascripthtmlnode.jsweb-scrapingtwitter

How should I start working on coding these sliders?

Which programming language should I use? My understanding of Java Script is limited, so coding them on my own might be challenging. What would be the essential code to begin with? Here are the sliders - currently just Photoshop images... ...

javascriptjqueryslider

Hide the scrollbar in CSS when it is not needed

I need help figuring out how to hide the scroll bar using overflow-y:scroll;. I am working on a website where posts are displayed in a main area, and I want to only show the scroll bar when the content exceeds the current width. My second question is abou ...

htmlcss

Creating an ImmutableJS Record with custom types: A step-by-step guide

Is there a way to make ImmutableJS Records throw runtime exceptions if fields are missing instead of needing default values? ...

javascriptimmutable.js

the scrollbars are appearing on the window instead of within my div container

I'm having trouble getting a scrollbar on my div element when the content is too wide. Instead, the scrollbar always appears on the window itself. I have tried adjusting the overflow settings but can't seem to find the right solution. jsFiddle ...

htmlcssresizescrollbaroverflow

I need three buttons, but I only want one to be active at a time. When one button is clicked and becomes active

function toggleSlideBox(x) { $("#"+x).slideToggle(300); } I am utilizing a JavaScript feature on buttons to create dropdowns that display forms, text, etc. When one button is clicked, it drops down along with the other two buttons, and when the ...

javascriptjqueryhtml

What could be causing the CSS not to load on my WordPress website?

In an effort to improve my page speed score, I decided to install several plugins. Unfortunately, after installing w3 total cache, my website stopped loading CSS properly. Check out this image of the website ...

htmlcsswordpressplugins

Unlocking Extended Functionality in JQuery Plugins

At the moment, I am utilizing a JQuery Plugin known as Raty, among others. This particular plugin typically operates as follows: (function($){ $.fn.raty = function(settings, url){ // Default operations // Functions ...

javascriptjqueryplugins

Using Ajax for submitting forms with jquery and html techniques

I am having an issue with my form submission page. I need to call a function at the time of form submission using AJAX. The form submission should occur or not based on certain conditions in the AJAX response. Below is the code I have, but it seems to be n ...

jqueryhtmlajax