CSS Class Not Updating in WordPress Using JavaScript

Looking to incorporate a small JavaScript code directly into The Twenty Sixteen theme in WordPress.

This HTML Code needs to be modified on the Page: 

<p class="site-description">Example Text</p>

The goal is to change a classname:

document.getElementsByClassName("site-description").className ="Site-example-class";

However, despite using FireBug on the page, the class site-description remains unchanged.

Additionally, attempting to select the text of the headline with this code:

document.getElementsByClassName("site-description").innerHTML ="Hello There";

has proven to be unsuccessful.

javascriptwordpress

Answer №1

To access all elements with the "site-description" class, you can use the <code>document.getElementsByClassName("site-description")
method which will return an array of those elements. To make changes to their innerHTML, you must do so within the array. If there is only one element with this class name, you can directly modify it like so :

document.getElementsByClassName("site-description")[0].innerHTML = "Insert your new HTML content here"

Answer №2

The method getElementsByClassName() will provide you with an array containing all matching elements. To refer to the first result, you can simply do 

document.getElementsByClassName("site-description")[0]

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

Sending a property as a parameter to a different component through Vue's router-link

I have a component designed to showcase recipes in a list format. Each recipe is rendered using a separate component from an array of recipes. I am currently attempting to pass the recipe object from one component to another component using Router-Link ...

javascriptvue.js

Displaying the saved MTRC (markdown-to-react-components) content from the database

I currently have data stored in a database that has been produced using the markdown-to-react-components package as MTRC(content).tree What is the best way to render this content? I've experimented with various approaches, such as dangerouslyInsertHT ...

javascriptreactjsmarkdown

How to style a div for printing using CSS

Currently, I am working on a project that has already been completed but now requires some enhancements. To give you an overview, the project includes a search functionality that displays additional details upon clicking on the displayed name in the result ...

javascriptjqueryhtmlcssprinting

Reimagining scrolling through content with a stylish unordered list (a sleek alternative to a select box

After having our company website redesigned by a professional designer, our site now looks much more visually appealing. However, I have encountered difficulties when trying to implement their design using HTML and CSS. One particular challenge is the heav ...

javascripthtmlcssselectdrop-down-menu

Tips on choosing filters and leveraging the chosen value for searching in a Vue application

I am currently working on a Vue JS application that allows users to apply filters and search a database. The user can select or type in filters, such as "to" and "from", which are then used in a fetch URL to retrieve data from a json-server. Once the user ...

javascriptvue.jsvue-componentvuetify.jsjson-server

What could be the reason for my electron application consistently displaying false results when using Google Authenticator, despite entering the correct token?

Within this snippet of code, I am initiating a request to the main process to create a QR code using speakeasy and qrcode. document.addEventListener('DOMContentLoaded', async function() { const data = await ipcRenderer.invoke('generate-q ...

javascriptnode.jselectron

How Angular services transmit information to components

I have implemented a search field within my top-bar component and I am facing an issue in passing the input value of that search field to another component. Design Search service Top bar component Result component Operation Top bar component receives th ...

javascriptangulartypescript

Submitting both $_POST[] data and $_FILES[] in a single AJAX request

Struggling with uploading images along with dates on my website. I am passing the date using $_POST and the image files in $_FILES. Here is the Javascript code snippet: (function post_image_content() { var input = document.getElementById("images"), ...

javascriptphpjqueryhtmlajax

Node.js: Array remains undefined despite being logged on the console

My goal is to download a CSV file, read it line by line, and add the split lines (based on ',') to the tmparray. This code successfully prints all the elements in the array. var request = require('request'); var fs = require('fs&a ...

javascriptarraysnode.jscsv

"An error occurs when trying to trigger a .click() event within a list element

There is a list that can contain either plain text or a link. If there is a link present, the entire list element should be clickable. When attempting to execute the following code: if ($('.link').length) { $('li[data-contains-link]' ...

javascriptjquery

How can I eliminate the CSS value that was inherited?

Looking for a way to eliminate the effect of an inherited CSS property with Jquery. .class1 #id1 div.class2 input.class-input{ border-color: #bbb3b9 #c7c1c6 #c7c1c6; } Can someone explain how to delete this "border-color"? Thanks. ...

javascriptjqueryhtmlcss

Tips for choosing an image using jQuery from an external HTML page

I'm attempting to embed an HTML page within a div and then individually select all the img tags within that page to display an overlay div on top of the images. Currently, I can insert the HTML into a div named "asd" and it seems like the jQuery is f ...

javascriptjqueryhtml

Utilizing the power of Vue.js version 2.x alongside the sleek features of Bootstrap

I'm currently experimenting with incorporating Bootstrap 5 into Vue (2.x) without relying on any third-party libraries. My approach involves creating a custom wrapper for select Bootstrap components that I intend to utilize. For guidance, I've b ...

javascriptvue.jsvuejs2bootstrap-5

React onClick event image attribute is unique because it allows for interactive

Is there a way to dynamically add the onClick attribute to an image, but have the click event not working? //Code const parser = new DOMParser(); const doc = parser.parseFromString(htmlContent, "text/html" ); const imageDa ...

javascriptreactjstypescript

Looking for the optimal method to display numerous lines of text in HTML, one by one, at intervals of 60 seconds?

I'm working on a display page for my website. The main text in the center needs to change every 60 seconds. I have over 150 individual lines of text that I want to cycle through on the page. What would be the most efficient way to load all these te ...

javascriptcssajaxhtml

Different Slide Library Fullpage.js

Is it feasible to have two sections with the same slide in fullpage.js? For example, if I'm currently on slide 1 of section 1 and then move to slide 2 of section 1, can section 2 automatically switch to slide 2 as well? I'm curious if this funct ...

javascriptjquerytwitter-bootstrap-3fullpage.js

There is no 'Access-Control-Allow-Origin' header on the requested resource when connecting to a Heroku server

After deploying a Node.js + Express server to Heroku, I encountered an error while trying to use it: "Access to XMLHttpRequest at 'https://harel-shop-backend.herokuapp.com/auth/autologin' from origin 'http://localhost:3000' has ...

javascriptnode.jsexpressherokucors

The accuracy of the fromPointToLatLng function in Google Map's JS API seems to be inconsistent with the actual events

My objective is to enhance user experience with a drawing tool on the map interface. I aim for a functionality where, upon single-clicking somewhere on the map using tools like the rectangle tool, the map automatically centers on that clicked location. Thi ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Is there a way to prevent a web page from automatically refreshing using JavaScript?

I would like my webpage to automatically refresh at regular intervals. However, if a user remains inactive for more than 5 minutes, I want the refreshing to stop. There is an example of this on http://codepen.io/tetonhiker/pen/gLeRmw. Currently, the page ...

javascriptjqueryhtml

Create a random number within a specified range using a different number in JavaScript

I am looking for a unique function that can generate a number within a specified range, based on a provided number. An example of the function would be: function getNumber(minimum, maximum, number) { ... } If I were to input: getNumber(0, 3, 12837623); ...

javascriptnumbers