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

Question

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*/}

javascript html css logical-operators

Answer 1

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

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 3

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>

Answer 4

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>

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

Answer №1

Answer №2

Similar questions

What is the best way to transfer the data from one JavaScript object to a new, empty object?

Performing a request following a POST operation within Postman

What is the reason that self focus doesn't function in JavaScript?

What is the best way to expand a div in a downward direction exclusively?

Saving components locally (vue2)

Error message: "User not found during passport authentication"

Angular JS does not acknowledge null values

There are times when JQuery scripts fail to function correctly

Tips on incorporating variable tension feature into D3 hierarchical edge bundling

What is the most efficient way to handle dependencies and instantiate objects just once in JavaScript?

What is the best way to design a regular expression that will only match up to 12 numbers?

How can I keep a fixed position element from shifting to the left when resizing the window?

What could be causing the bootstrap columns to automatically shift onto separate lines?

CSS - How to specify a class within an id using syntax

I plan to add new information to my table only when the user clicks on the submit button. This is what I have accomplished until now

Adding various react elements to a list with the click of a button: A step-by-step guide

How to manage simultaneous requests in Parse Server Cloud Code

Avoiding console errors when a REST call fails

What is the best way to design a circular icon using OpenLayers?

Difficulty encountered while managing dropdown functionality in Protractor using TypeScript