Having trouble with the Wordpress JS CSS combination not functioning properly and unable to determine the cause

I recently set up a page on my WordPress site using the Twenty Seventeen theme.

At the top of the page, I created a toolbar for users to easily adjust the font size and background color. Check out the image below for reference: See Image for Bar

Here's the code for the toolbar:

<table>
 <tbody>
  <tr>
   <td>Change Background</td>
   <td><img id="button_colour_yellow" class="aligncenter size-full wp-image-2080" src="Colour-FFFFDB.png" alt="" width="28" height="28" /></td>
   <td><img id="button_colour_red" class="aligncenter size-full wp-image-2079" src="Colour-FFCCFF.png" alt="" width="28" height="28" /></td>
   <td><img id="button_colour_blue" class="aligncenter size-full wp-image-2078" src="Colour-E6FFFF.png" alt="" width="28" height="28" /></td>
   <td><img id="button_colour_green" class="aligncenter size-full wp-image-2077" src="Colour-CCFFCC.png" alt="" width="28" height="28" /></td>
   <td><img id="button_colour_black" class="size-full wp-image-2076" src="Colour-000000.png" alt="Colour 000000" width="28" height="28" /></td>
   <td></td>
  </tr>
 </tbody>
</table>

To make the background color toggle, I've included some CSS styles:

.Background_Black{
    background-color: black;
    color: white;   
}

.Background_Yellow
{
    background-color: #ffffdb;
    color: black; 
}

.Background_Green
{
    background-color: #ccffcc;
    color: black; 
}

.Background_Red
{
    background-color: #ffccff;
    color: black; 
}

.Background_Blue
{
    background-color: #e6ffff;
    color: black; 
}

The idea here is that when someone clicks on an image in the toolbar, the color will switch accordingly.

I added JavaScript scripts to the JS folder in my WordPress installation:

$("button_colour_black").click(function(){
    $(this).toggleClass("Background_Black");
});

$("button_colour_green").click(function(){
    $(this).toggleClass("Background_Green");
});

$("button_colour_blue").click(function(){
    $(this).toggleClass("Background_Blue");
});

$("button_colour_red").click(function(){
    $(this).toggleClass("Background_Red");
});

$("button_colour_yellow").click(function(){
    $(this).toggleClass("Background_Yellow");
});

Unfortunately, when I click on the images in the toolbar, nothing happens. I'm not very experienced with programming and I'm new to JavaScript, so I'm not sure what's wrong with my code. Any help would be greatly appreciated!

I did browse through similar forum posts, and they suggested that this setup should work. Is there something obvious that I'm overlooking?

javascriptjquerycsswordpress

Answer №1

Perhaps starting with some basic exercises would be beneficial for getting acquainted with CSS classes and jQuery selectors. Below is an example to help you begin.

$("[id^=button_colour_]").click(function(){
    $('#test-area').attr('class', $(this).data('color'));
});
.Background_Black{
    background-color: black;
    color: white;   
}

.Background_Yellow
{
    background-color: #ffffdb;
    color: black; 
}

.Background_Green
{
    background-color: #ccffcc;
    color: black; 
}

.Background_Red
{
    background-color: #ffccff;
    color: black; 
}

.Background_Blue
{
    background-color: #e6ffff;
    color: black; 
}

.test-area{
  width: 200px;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Change Background</td>
<td><img id="button_colour_yellow" class="aligncenter size-full wp-image-2080" src="Colour-FFFFDB.png" alt="Colour-FFFFDB" width="28" height="28" data-color="Background_Yellow"/></td>
<td><img id="button_colour_red" class="aligncenter size-full wp-image-2079" src="Colour-FFCCFF.png" alt="Colour-FFCCFF" width="28" height="28" data-color="Background_Red"/></td>
<td><img id="button_colour_blue" class="aligncenter size-full wp-image-2078" src="Colour-E6FFFF.png" alt="Colour-E6FFFF" width="28" height="28" data-color="Background_Blue"/></td>
<td><img id="button_colour_green" class="aligncenter size-full wp-image-2077" src="Colour-CCFFCC.png" alt="Colour-CCFFCC" width="28" height="28" data-color="Background_Green"/></td>
<td><img id="button_colour_black" class="size-full wp-image-2076" src="Colour-000000.png" alt="Colour 000000" width="28" height="28" data-color="Background_Black" /></td>
<td></td>
</tbody>
</table>
<div id="test-area">TEST AREA</div>

Answer №2

The problem lies in the way you are defining the classes in your stylesheet. Make sure to prefix the class names with a period like this:

.Background_Green
{
    background-color: #ccffcc;
    color: black; 
}

Additionally, in your jQuery selector, don't forget to include the hash symbol before the element id like so:

$("#button_colour_black").click(function(){
    $(this).toggleClass("Background_Black");
});

Answer №3

According to @Andrew Schultz, it is essential to establish CSS rules for classes using a preceding dot, and ensure that your jQuery selection of an ID element includes the # symbol.

In addition, if you aim to change the background color and font sizes for the entire page (rather than just the clicked button), the jQuery code should target either the html or body element - depending on where the initial styles were defined. For instance, if they were set in the body, your jQuery script would look something like this:

$("#button_colour_black").click(function(){
    $('body').toggleClass("Background_Black");
});

(and repeat for other buttons)

Please note: The HTML snippet you provided was missing a closing </tr> tag - I have added it in my edit.

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

Can the repeated use of AJAX function calls at regular intervals adversely affect the speed of the application?

On a specific page of my application, I have been using an AJAX function continuously as shown below: <script type="text/javascript"> $(document).ready(function(){ setInterval(function() { $.ajax({ ...

javascriptjqueryajax

CoffeeScript is failing to run the code

I'm attempting to use a click function to alter the CSS code and then run a function. Here is my current code: ready: -> $("#titleDD").click -> $("#titleDD").css('text-decoration', 'underline'); $("#catDD").css( ...

javascriptcoffeescript

Troubleshooting Problem with Angular JS Page Loading on Internet Explorer 9

My angularjs single page application is encountering issues specifically in IE9, despite functioning perfectly in Chrome and Firefox. The initial load involves downloading a substantial amount of data and managing numerous dependencies through requireJS. ...

javascriptangularjsinternet-explorer

What is the best way to configure maxSockets in Node.js while working with Express?

Can the maximum number of sockets in Node.js be adjusted while working with the Express framework? More information can be found here. ...

javascriptnode.jsexpress

Having trouble getting a local npm installation to work from a specific file path?

After following the instructions from this helpful link to install an npm package through a file path, I encountered an error when attempting to use it: Cannot find module '<module_name>' or its corresponding type declaration Are there an ...

javascripttypescriptnpm

Utilize AJAX and JavaScript to retrieve file information and facilitate file downloads

I have developed a script that intercepts Captcha form submissions. Typically, when the form is submitted, a file will be downloaded (such as exe or zip) in the usual way where it appears at the bottom of the Chrome browser and gets stored in the "download ...

javascriptajax

Utilizing pixel values for Material-UI breakpoints rather than using the default sm, md, lg, xl options

Below is the code snippet that I am using: [theme.breakpoints.only('lg')]: {} The above code works perfectly and shifts at the desired breakpoint. However, when I implement the following: [theme.breakpoints.between('1200', '1021&a ...

javascriptcssreactjsmaterial-uijss

Gathering information from an HTML form and displaying it through JavaScript by utilizing Bootstrap's card component

I've been working on integrating form data from my index.html page into a card component using Bootstrap. I've successfully collected the data in the backend, but now I'm struggling to display it on the frontend as a card component. Any help ...

javascripthtmlcssformsobject

Tips on handling a redirection request following a fetch post request

When communicating with my node server (Express) using fetch to build a Single Page Application (SPA), I have encountered an issue. Upon each request to the server, I validate the session and redirect to a login page if it is not valid. However, I noticed ...

javascriptnode.jsexpressfetch-api

Guide on transferring numerous files (50k+) from a folder to AWS S3 using node.js

Currently, my Node.js API on a Windows machine is generating numerous XML files that are later sent to an S3 bucket. The quantity of files sometimes surpasses 50k. For the uploading process, I am utilizing the aws-sdk package. Essentially, I iterate throu ...

javascriptnode.jsasynchronousamazon-s3npm

Using Regular Expressions in an ExpressJS Router

When working with ExpressJS, is there a way to combine the following routes into one using RegEx? app.get(/^\/blog(?:\/p(\/\d+)?)?$/, blog.list); ...

javascriptregexnode.jsexpress

When combining <a> with the class line-through, the line does not appear

I am currently utilizing a class to replace the deprecated strike in HTML: .entfall { text-decoration: line-through; } However, when using Firefox 38.x and the following code: <span class="entfall"><a href="some link">text</a></span ...

htmlcss

What exactly is the purpose of the script type importmap?

Can you explain the role of <script type="importmap"> and why it has become necessary for my code to function properly? <script type="importmap"> { "imports": { "three": "http ...

javascriptimport

What steps can I take to ensure the reset button in JavaScript functions properly?

Look at this code snippet: let animalSound = document.getElementById("animalSound"); Reset button functionality: let resetButton = document.querySelector("#reset"); When the reset button is clicked, my console displays null: resetButton.addEvent ...

javascripthtmldom

The tooltip feature in jQuery is experiencing some stuttering issues

Sometimes, images can convey messages better than words. I encountered a strange issue with my self-made jQuery tooltip. I prefer not to use any libraries because my needs are simple and I don't want unnecessary bloat. When I move my mouse from righ ...

javascriptjquery

a guide to presenting information in a horizontal layout within a single table using the Laravel framework and Vue.js

I have 2 tables: table 1 ________________ | name_id name | | 1 john | | 2 heaven | |_______________| table 2 _______________________ | id name_id product | | 1 1 bag | | 2 1 shoes | |______ ...

javascriptphplaravelvue.js

Tips on effectively utilizing a value that has been modified by useEffect

Here is my current code: const issues = ['x','y','z']; let allIssueStatus; let selectedIssueStatus = ''; useEffect(() => { const fetchIssueStatus = async() => { const response = await fetch(&ap ...

javascriptreactjsreact-hooksuse-effect

How do I ensure a single row in my table constantly remains at the bottom?

I am currently working on developing a MUI table that shows rows, with the last row displaying the total number of colors. The challenge I am facing is ensuring that the last row always stays at the bottom when there are no results in the table. I have att ...

javascriptreactjsmaterial-ui

Leverage the power of Bootstrap's col-push and col-pull

Here is the code snippet I am currently working with: <div class="col-md-9 col-md-offset-3"> <div class="row> <div class="col-sm-4 col-sm-push-4"></div> <div class="col-sm-8 col-sm-pull-8"></div> </div> ...

csstwitter-bootstrap

Utilizing ReactJS and Gatsby Js: How to pass the value of a child component to the parent component to create a button

In my current project, I am facing an issue with a simple component that is supposed to pass back the link value from the child component to a function in the parent component. However, it seems to only call back the full function instead of its actual v ...

javascriptreactjsgatsby