Ways to inspect a number within a span and adjust its color depending on the value?

Can someone help me figure out why this code is not reading the value correctly?

Check it out here

This is the HTML:

<a class="InterestLink">Click me</a>

<div id="InterestExpander">
            <div id="InterestExpanderX">
                &times;
            </div>

            <br><br>

            General Rating: 
            <span class="RatingGeneralNumber">80%</span>
</div>

CSS:

<a class="InterestLink">Click me</a>

<div id="InterestExpander">
            <div id="InterestExpanderX">
                &times;
            </div>

            <br><br>

            General Rating: 
            <span class="RatingGeneralNumber">80%</span>
</div>

And here is the jQuery:

$('.InterestLink').click(function() {
    $('#InterestExpander').fadeIn(450);

    if (parseInt($('.RatingGeneralNumber').val()) > 50 ) {
        $('.RatingGeneralNumber').css({"color":"green"});
    }

}); 



$('#InterestExpanderX').click(function() {
    $('#InterestExpander').fadeOut(250);
});

I have another question as well. My website will have links to different movies, each triggering a pop-up with a unique rating based on the database. Should I use an "ID" or a "Class" for the span containing the movie rating, or neither?

Answer №1

Utilize the text() function instead of using val for span elements.

    $('.InterestLink').click(function() {
        $('#InterestExpander').fadeIn(450);
        
        if (parseInt($('.RatingGeneralNumber').text()) > 50 ) {
            $('.RatingGeneralNumber').css({"color":"green"});
        }
     
    }); 



    $('#InterestExpanderX').click(function() {
        $('#InterestExpander').fadeOut(250);
    });
.InterestLink {
}

#InterestExpander {
    color:white;
    background-color:#484848;
    position:fixed;
    margin-left:auto;
    margin-right:auto;
    width:700px;
    height:480px;
    display:none;
    box-shadow:0px 0px 5px 0px #000000;
}

 
#InterestExpanderX {
    float:right;
    cursor:pointer;
    font-family:Arial;
    font-size:50px;
}


.RatingGeneralNumber{
    display:block;
    font-size:22px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<a class="InterestLink">Click me</a>

<div id="InterestExpander">
            <div id="InterestExpanderX">
                &times;
            </div>
         
            <br><br>
                   
            General Rating: 
            <span class="RatingGeneralNumber">80%</span>
</div>

Answer №2

Make sure to switch out $(".RatingGeneralNumber").val() with $(".RatingGeneralNumber").text(). The reason for this is that the val() function is specifically for elements within a form, such as input, textarea, or option. Give this adjustment a try and your code should run smoothly! :)

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

How can I prevent clicks on child links using the :not() selector?

I am working on a script using JQuery where I want to add a click handler to a div while ignoring clicks on the children a tags within it. You can check out my attempt (which is not working as expected) on this JSFiddle link: http://jsfiddle.net/q15s25Lx/ ...

Can you explain the purpose of using href="#" in web development?

I've noticed that numerous websites use links that have href="#". Can you explain what this means and how it is typically used? ...

NPM Messer - the innovative chat tool for Facebook Messenger. Ready to see it in action?

Previously, I had the idea of creating my own Messenger client. However, when I reviewed the documentation, it only provided instructions on how to write a chatbot. Despite this obstacle, I stumbled upon something intriguing - a Messer command line client. ...

What's the best way to include a div on the right side of my adaptable divs?

I need the "div 1" label to always appear on the right side of the divs, while still maintaining responsiveness. Is there a way to achieve this effectively? Struggling to find a wrapper that meets my responsiveness requirements. #wrapper { width: aut ...

When working with THREE.js in Electron, web development tools seem to vanish into thin air

Exploring electron is fairly new to me (if you know of any good documentation, please leave it in the comments) and I've encountered an issue that has left me puzzled: Everything seems fine until I load the THREE.js library. At that point, even thoug ...

How to Ensure an Element Appears Above Another Despite Z-Index Troubles?

After conducting approximately 2 hours of research on this topic, I was unable to find clear answers or solutions. Hence, I have decided to address the issue here. The problem I'm facing is as follows: Due to the nature of HTML/CSS, it seems impossi ...

Having trouble with installing a React app using npx create-react-app my-app?

description needed for image Having trouble creating a react application using npx create-react-app my-app... Encountering errors shown in the image. Attempted npm init but it was unsuccessful. Included node.js and vs code in the path. ...

`Cannot locate the CSS file on my local server`

My Node.js application uses the Express.js framework, and I am attempting to execute the following code: app.use('/public', express.static(path.join(__dirname,'public'))); However, I encountered the following error message: The CSS ...

Switching from map view to satellite view on Google Maps allows you to see detailed aerial

Is there a way to switch from map view to satellite view on a Google Map using JavaScript after zooming in 100%? If so, how can it be achieved within the following JavaScript code? DEMO:http://jsfiddle.net/keL4L2h0/ // Load Google Map ///////////////// ...

What is the best way to access the EXIF data of an image (JPG, JPEG, PNG) using node.js?

In my quest to access the EXIF data of an image in order to extract GPS information such as Latitude and Longitude, I have experimented with approximately 4-5 EXIF packages available on npm/node, including exif, exif-parser, node-exif, exifr, exif-js, and ...

JavaScript: Add an element to the precise middle of an array

Sorry if this is a repeat question, but I couldn't find the answer despite searching. Let's say there's an array of unknown length and you want to insert items at a specific position, such as the center. How can you achieve this? Here&apos ...

Navigation bar failing to show all content on Safari web browser

When navigating to this website, http://www.togethermutualinsurance.co.uk, using any browser except for Safari on Windows, the menu displays correctly. However, in Safari, the title of the menus and submenus with images does not display properly. Despite ...

Fetching content and an image simultaneously via AJAX

My website features a photo gallery that I created using the code below: /*Begin Photo Gallery Code*/ var images = ['g1.jpg', 'g2.jpg', 'g3.jpg', 'g4.jpg']; function loadImage(src) { ...

Steps for adding a stroke to just the left and right sides of an SVG wave:

How do I apply a stroke only to the right and left sides of an SVG (specifically a wave SVG)? <svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="wave"> <svg viewBox="0 0 100 50" ...

modify the final attribute's value

Hello I've been using skrollr js to create a parallax website. However, the issue arises when determining the section height, as it depends on the content within. My goal is to locate the last attribute and adjust the number value based on the section ...

What is preventing me from generating a string for transform:translate within Angular.js?

Attempting a new approach here $scope.graph.transform = "transform: translate(" + $scope.graph.width + "," + $scope.graph.height + ");"; Despite my efforts <h3>transform: <span ng-bind="grap ...

What is the best way to enable the delete function exclusively for users who are logged in?

I am currently working on implementing a delete function in JavaScript that will remove a MySQL row if and only if it was created by the user who is currently logged in. This means that users cannot delete rows they did not create. Below is the progress I ...

Issue encountered: Unable to load resource - ajax file upload failed due to net::ERR_SSL_BAD_RECORD_MAC_ALERT error

I've implemented an AJAX form file upload using jQuery. After testing my code across multiple computers and browsers, I've encountered an issue on one Windows 8 machine running Chrome where the upload functionality fails with the following error ...

Dragging a Google Maps marker causes a border to appear around a nearby marker

Recently, I added a main draggable marker to the map. However, an unusual issue arises when dragging this marker - a blue outline appears around one of the existing markers on the map. This behavior is puzzling as it seems to be triggered by a click event ...

Modify a Google Docs script for use in Google Sheets

I created a function called "myFunk()" that works flawlessly in Google Docs. It essentially looks for fields marked with ## in a sheet and replaces them with user input. However, when I attempt to run it in Sheets after making some changes to the functions ...