Modifying the design layout in index.html

I'm currently working on incorporating the feature for a User to switch themes in my PhoneJS application (possibly also using regular JavaScript).

Here's what I have attempted:

Index.html

<!DOCTYPE html>
<html>
    <head>
        <link id="style" rel="stylesheet" type="text/css" href="red-stylesheet.css" />
    </head>
</html>

Javascript

function swapStyle(sheet) {
    document.getElementById('#style').setAttribute('href', sheet);
}

The error I keep encountering is:

Cannot 'setAttribute' for a reference that's undefined or null

This leads me to believe that I am unable to access the link from my index.html file.

My current file structure looks like this:

views (folder)
  -> settings (folder)
    ->  settings.js (javascript)

index.html (html with the <link>)
javascriptjqueryhtmlcss

Answer №1

Your JavaScript code needs a slight adjustment. The # in the selector is unnecessary.

function changeStyle(sheet) {
    document.getElementById('style').setAttribute('href', sheet);
}

Answer №2

Give this a shot:

function modifyStyle(script) {
    document.getElementById('style').setAttribute('src', script);
}

In JQuery, the # symbol for id is necessary.

Answer №3

Here is a suggestion you can try out:

function switchStylesheet(sheet) {
   $('link[href="blue-stylesheet.css"]').attr('href','red-stylesheet.css');
}

Alternatively, you can add an if statement like this:

function switchStylesheet(sheet) {
    if($("link[rel='stylesheet']").attr("href") == "blue-stylesheet.css") {
        $('link[href="blue-stylesheet.css"]').attr('href','red-stylesheet.css');
    } else {
        $('link[href="red-stylesheet.css"]').attr('href','blue-stylesheet.css');
    }
]

Answer №4

attempt:

searching for the 'head' tag within the document and setting the value of the 'href' attribute in the first 'link' tag to the variable sheet

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

Aligning the column to the right to ensure the text is centered horizontally on the screen

<div className={css.title} > <div className={css.row}> <div className={css.columnLeft}> <div className={css.header}>Images</div> </div> <div className={css.col ...

cssreactjsflexbox

"Learn how to empty a server-side textbox effortlessly with the help of

When I use a client function to clear a textbox (server control runat="server"), the textbox appears empty after clearing it with jQuery. However, when I trace the code and check the textbox.Text control, I find that the value is still there and not null. ...

jqueryasp.nettextbox

"Exploring the best method to utilize a for loop for updating an array of objects in

I'm looking to update a nested mongo document using a for loop with my node.js code below: //loop starts var update = { "rate":mainRate, "classifierCategories."+e+".rate":temiz[i].slice(0,2) }; classifier.update({"classifierS ...

javascriptnode.jsmongodb

Create a responsive DIV element within a website that is not originally designed to be responsive

I am looking to optimize the positioning of an ad div on my non-responsive website. The current setup has the ad displayed at 120x600 pixels, always floating to the right of the screen. While this works well for desktop or large devices, the display become ...

htmlcss

Split domain names for images using a JQuery plugin

Recently, I came across an interesting article by Stoyan Stefanov on JS domain sharding for image files. After reading it, I felt inspired to enhance the concept and create something new. The script below is designed to go through all the images on a page ...

javascriptjqueryperformanceoptimizationjquery-plugins

Unable to redirect with Asp response.redirect

I have a Login popup form where I use an ajax post request to Login.asp script in order to prevent the page from going to the POST URL after submission. <script> $(function() { $('#contactForm').submit(function(e){ e.preventDe ...

javascriptajaxhttp-redirectasp-classic

Clicking on ng-click doesn't result in opening new windows

I am experiencing an issue with a table where the buttons in the last column are supposed to open a new window but they are not working as expected. Below is the code snippet I am using: <table class="table table-hover" id="angular_table"> <th ...

javascripthtmlangularjsangularjs-ng-click

How to retrieve the dimensions of an image for a specified CSS class with Selenium or PIL in Python

I am interested in using Python to determine the size of specific images. Is it possible to automate this process so that I can identify only images with certain classes? I am unfamiliar with PIL. Could I define the CSS class/name/id after specifying the U ...

pythonhtmlcssselenium

Arrange content from database in collapsible Bootstrap 4 cards

Hey there! I'm currently working on developing a shopping cart for a website that will contain products ordered from different companies. You can see an example here: screenshot My goal is to group all products from the same company together, creatin ...

phphtmlpdobootstrap-4

Truncate text on a dynamic button positioned above a fluid container

Looking for a CSS-only solution to manage text within an image-defined box? The challenge is to place a button in the center if the text is shorter than the image, or cut it with ellipsis if longer. Also, the text should not exceed the box width. Any ideas ...

htmlcssjsfiddle

Using ng-repeat with an AJAX-called JSON is not possible

I've been struggling with handling JSON data from an AJAX call and displaying it using ng-repeat. If you want to take a look at my code in a more organized way, I've shared it on http://jsfiddle.net/7quj9omw/. However, please note that the code ...

javascriptjsonangularjsangularjs-ng-repeationic-framework

Creating a loading screen in Angular2: Step-by-step guide

How can you best integrate a preloader in Angular 2? ...

javascripthtmlangular

The filter function results in a blank array being returned

I'm facing a dilemma, I have a constant defined as export const STATUS = [{ 0: 'Draft', 1: 'Sent', 2: 'Processing', 9: 'Processed', 3: 'Scheduled', 4: 'Filed', 5: 'Suspende ...

javascriptarraystypescript

Dreamweaver constantly combines an external CSS file with locally stored CSS when running on a local server

When I used Dreamweaver CS5, XAMPP Server, and PHP files in the past, I encountered an issue. The websites within my htdocs folder seemed to be pulling a specific website's CSS file. In 'Live View,' I could see all external .css and .js file ...

javascriptphpcssserverdreamweaver

What is the best method for creating a close button on the bottom right corner with Bootstrap?

I need help adjusting the position of a button in a flash message. How can I move the button to the bottom-right? <div class="alert alert-danger alert-dismissible fade show" role="alert"> <%= success %> ...

htmlcssbootstrap-5

Why is it not possible to isolate the function for xmlHttp.onreadystatechange?

The JavaScript file named test.js is functioning properly when included in my HTML. function sendData() { var formData = new FormData( document.querySelector("form") ); var xmlHttp = new XMLHttpRequest(); xmlHttp.open("post", "test.php",true); ...

javascriptajaxonreadystatechange

Looking for the MIME file type requirement for Excel or spreadsheets?

Values in the 2nd column indicate the file MIME type. https://i.sstatic.net/qPcQD.png I am looking to create a condition that will be true for all of the above file MIME types. Specifically, I need a condition for all Excel files. This is what I attempte ...

javascriptexcelreactjsfilemime-types

JSON is often portrayed as a singular value

I am attempting to save settings in my SQL Database and then restore them using ajax and php. However, I am encountering an issue where only one long JSON Value is returned instead of three separate values for each setting. Settings: {"setting1":"true","se ...

javascriptphpmysqljsonajax

Scraping Google Places using Beautifulsoup for extracting reviews

My objective is to extract User reviews from Google Places reviews, as the API only provides the 5 most helpful reviews. I am using Beautifulsoup to retrieve four key pieces of information: 1) Name of the reviewer 2) Date the review was written 3) Rating ( ...

htmlpython-3.xbeautifulsoup

Progress bar enabled JavaScript file uploader

Has anyone discovered the method for achieving multi-file upload using solely Javascript while maintaining a smooth progress bar display for each file? It seems that services like Gmail, Hotmail, and Amazon S3 have already accomplished this. ...

javascriptjqueryajaxfileupload