If other options fail, Else If may not be a suitable choice

This is the process: switching from Issue: x==0||1 to x==0||x==1 etc.

This code runs from an .html file

<body>
<div class="" id="pimg1">
      </body><script>
      var x=new Date().getMonth();
     if (x == 0||x == 5||x == 2){document.getElementById('pimg1').className='pimg1';}
      else 
      if (x == 3||x == 4){document.getElementById('pimg1').className="pimg1a";}
      else 
      if (x == 6||x == 7||x == 8){document.getElementById('pimg1').className='pimg1b';}
      else                            {document.getElementById('pimg1').className='pimg1c';}
    </script></html>

External css:

.pimg1{
   background-image: url('images/style1.jpg');/*Zone 1*/}
  .pimg1a{
 background-image: url('images/style2.jpg');/*Zone 1*/}
 .pimg1b{
background-image: url('images/style3.jpg');/*Zone 1*/}
    .pimg1c{
background-image: url('images/style4.jpg');/*Zone 1*/}
javascripthtmlcsslogical-operators

Answer №1

It is important to remember to enclose your javascript code within <script></script> tags as it will not execute properly within an html <div></div> tag.

Instead of using x == 0||9||2, make sure to use x == 0 || x == 9 || x == 2.

For better readability, always indent your code properly. The || operator checks for conditions on both the left and right sides. Numbers like 9 and 2 are not conditions. By using x == 9 || x == 2, you're instructing the system to evaluate the condition on the left first, and if that's false, then check the one on the right. If either condition is true, the code will proceed accordingly.

Answer №2

In order to avoid using CSS within the <script> tag, it is important to remove the <script> tag from the <div> tag as shown below:

<html>

<head>
  <style>
    .pimg1 {
      background-image: url('images/style1.jpg');
      /*Zone 1*/
    }
    .pimg1a {
      background-image: url('images/style2.jpg');
      /*Zone 1*/
    }
    .pimg1b {
      background-image: url('images/style3.jpg');
      /*Zone 1*/
    }
    .pimg1c {
      background-image: url('images/style4.jpg');
      /*Zone 1*/
    }
  </style>
</head>

<body>
  <div class="" id="pimg1"></div>
  
  <script>
    var x = new Date().getMonth();
    if (x == 0 || x == 9 || x == 2) {
      document.getElementById('pimg1').className = 'pimg1';
    } else if (x == 3 || x == 5) {
      document.getElementById('pimg1').className = "pimg1a";
    } else if (x == 6 || x == 1 || x == 8) {
      document.getElementById('pimg1').className = 'pimg1b';
    } else {
      document.getElementById('pimg1').className = 'pimg1c';
    }
  </script>
</body>

</html>

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

Another inquiry regarding a city autocomplete field in a global setting

While I understand that this question may have been previously asked, I have spent several days searching without finding a satisfactory answer. Some websites, such as eventful.com, etc., have an autosuggest city field with cities from all over the world ...

phpjavascriptajax

The listener is not activating the AJAX function

It seems like the function validate() is not being called in the listener, causing an error and preventing data from being added to the database. Here is the code snippet from index.php: <!DOCTYPE html> <html> <head> <title>< ...

javascriptphpjqueryajax

Dealing with pesky table cell padding issues in Chrome

Struggling with table cell paddings in Chrome because it appears that if a table cell doesn't have pure text, the padding isn't applied. Here's my code: <table> <tr> <th></th> <th ...

cssgoogle-chromefirefoxhtml-tablepadding

Counting the number of PHP inputs in a field

Hello, I am using a PHP script from Steve Dawson's website. To display the output on my HTML page, I am utilizing this AJAX script: <script> $.ajax({ type:'GET', url:'http://www.solariserat.se/count.php', data: ...

javascriptphpjqueryhtmlajax

I encountered an unexpected token error while using JavaScript syntax with objects

In my current coding project, I have encountered an issue while attempting to utilize an object from a different JavaScript file. Despite importing the necessary function from this external file, there seems to be a syntax error present. Can anyone offer ...

javascriptreactjs

Using AJAX to showcase data from a table in a database using the <select> tag but with an unfinished submit process

I am encountering an issue with my code. When I submit the value in getinv.php, it only returns a partial value. For example, when I click '2016-08-27', it only retrieves '2016'... My question is, how can I ensure that the exact value ...

javascriptphpjqueryhtmlajax

"Obtain permission from Azure Graph to fetch details for a specific user using their principal

Here is the Node.js code snippet: const GraphkManagementClient = require('azure-graph'); client = new GraphkManagementClient(credentials, tenantId); client.users.get(principalID); The last line triggers an error message: Authorization_Reques ...

javascriptnode.jsazureazure-active-directoryazure-ad-graph-api

JavaScript, Page Method, and GridView are essential components to creating dynamic and interactive

After learning how to use the page method in JavaScript and ASP.Net (VB.Net), I encountered an issue when trying to insert multiple items into a database using a gridview. Despite my efforts, there were no error messages appearing. Here is what I have so f ...

javascriptasp.netajaxvb.netgridview

what's the reason for ajax constantly sending requests back-to-back?

Today, I find myself pondering. In my current project, the ajax calls are not behaving asynchronously. Each request is being sent one after the other. As one request is being processed, all other requests are getting stuck in a pending state. You can ob ...

javascriptjquery.netangularjsasp.net-mvc

Replicate the form to a new one while concealing the elements and then submit it

Initially, I was working with just one form. Now, I find myself in a situation where I need to utilize a different form which contains the same inputs. This is necessary because depending on the action taken upon submission, different processes will be tri ...

javascriptjqueryhtmlforms

What is the best way to display data from an Excel spreadsheet on my website?

I'm faced with a challenge in my Excel spreadsheet- I have a mix of numbers and text that I want to turn into graphical representations on a webpage. I'm considering using Python or PHP to achieve this as HTML alone doesn't seem up to the ta ...

pythonphphtml

What is the destination for next() in Express js?

I'm new to javascript, nodejs, and express, and facing confusion with the usage of next(). I am trying to make my code progress to the next router using next(), but it seems to be moving to the next then instead. This is what my code looks like: // ...

javascriptnode.jsexpress

Tips for maintaining previously accessed data when utilizing useQuery

I am currently working on incorporating a GET request using useQuery from the react-query library. Below is the relevant code snippet: import queryString from "query-string"; import { useRouter } from "next/router"; const { query } = ...

javascriptreactjsnext.jsreact-querytanstackreact-query

Is Moment.js displaying time incorrectly?

When using moment.tz to convert a specific date and time to UTC while considering the Europe/London timezone, there seems to be an issue. For example: moment.tz('2017-03-26T01:00:00', 'Europe/London').utc().format('YYYY-MM-DD[T]HH: ...

javascriptdatedatetimetimezonemomentjs

How can I generate a fresh window/frame within my Javascript canvas?

Is there a way to open a new frame or window within the canvas using JavaScript? I am working on a game project where I want to implement a feature that displays additional information on a menu screen when a button is pressed. Currently, I have managed to ...

javascriptcanvas

Arrange the items in the last row of the flex layout with equal spacing between them

How can I arrange items in rows with equal space between them, without a large gap in the last row? <div fxFlex="row wrap" fxLayoutAlign="space-around"> <my-item *ngFor="let item of items"></my-item> </div> Current Issue: htt ...

htmlangularcssflexbox

During the initial cycle, the CSS keyframes animation may experience glitches, but it will run smoothly in subsequent cycles

Seeking advice on troubleshooting a CSS keyframes animation issue. I have created an animation with 5 frames where the background image fades and transitions to the next image smoothly in all cycles, except for the first cycle where it glitches before each ...

htmlcssbackgroundcss-animationskeyframe

How can I set a default radio button selection when the page is loaded?

Input your radio button code below: <ion-radio ng-model="data.gender" ng-required="true" ng-value="'male'">Male</ion-radio> <ion-radio ng-model="data.gender" ng-required="true" ng-value="'female'">Female</ion-rad ...

angularjshtml

I'm having trouble retrieving data from the server using the AngularJS $http.get() function. What am I doing wrong

Ensure that your question is clear and that your code properly showcases the issue at hand. Feel free to leave any questions or comments below for clarification. app.js var express = require('express'); var app = express(); app.use(express.sta ...

javascriptangularjsnode.jsexpressget

Having issues with the CSS block in my Jekyll dropdown navbar

I have been exploring resources from both w3schools and another website to create a navigation bar in Jekyll using frontmatter. However, I am running into issues with the block property in CSS. Most of the navbar is functioning properly, except for the dro ...

htmlcssjekyll