I added an onClick event to an SVG image, however, I am struggling to get the event to execute a jQuery if/else statement

I've been working on creating an SVG map of the US, and I'm almost finished. The final step involves implementing a simple if-else statement to prompt users for the name of the state when they click on it. My goal is to fill the state green if the input in the prompt is correct, and red if incorrect. Currently, the code fills the state red every time, even when the input is accurate. How can I resolve this issue quickly? Your assistance by today would be greatly appreciated. You can view the jsfiddle here: https://jsfiddle.net/vnqcyu90/

 jQuery(function($) {
$('path').click(function() {
  prompt("Enter State Initials")
  if ($('path id') == prompt) {
    this.style.fill = "green";
  } else {
    this.style.fill = "red";
  }



});

});

This particular line of code is causing me trouble, as it both adds the onclick function to the SVG map and handles the if-else statement related to the prompt asking for the state's name (which, in my case, matches the path id). (This code is jQuery 1.7.1)

Answer №1

There seem to be a few issues with the current code provided.

First off, it appears that the result of the Window.prompt() function call is not being stored in a variable. To correct this, you should assign it to a variable like so:

var userInput = window.prompt("Please enter State Initials");

The next issue lies within the jQuery selector used:

$('path id')

It seems that this selector is attempting to target all elements named "id" within a parent element of type <path>. Instead, if you wish to access the id attribute of the clicked path element, you can retrieve it using:

$(this).attr('id');

In this case, $(this) converts the clicked element into a jQuery object and attr('id') retrieves the id attribute value.

A revised version of your code could look something like this:

var userInput = window.prompt("Please enter State Initials");
if ($(this).attr('id') == userInput) {
  this.style.fill = "green";
} else {
  this.style.fill = "red";
}

Considering that all state ids are in uppercase, it might be beneficial to convert user input to uppercase as well:

var userInput = window.prompt("Please enter State Initials").toUpperCase();

You can view an updated demo here.

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

Is there a way to instruct Google to include my site in its index using Angular.js?

I am currently working on an angular.js app and have been following Google's guide for ajax-based applications. Here are the steps I have taken: Added meta tags <base href="/"> <meta name="fragment" content="!"> Configured angular.js ...

How to perfectly align columns using Bootstrap

Looking to create two fixed columns in Bootstrap. The current layout can be seen in the image below: https://i.sstatic.net/w41sD.png I want the left and right column to align at the top regardless of the number of items in each column. Refer to the image ...

Button on aspx page not functioning properly when clicked

I seem to be experiencing an issue with buttons. To check if the function is being triggered, I used alert("") and found that it does enter the function when the button is clicked. However, after the alert, any other code inside the function seems to not w ...

Conceal a script-generated div using CSS styling

Using the code below, you can create an HTML chatbox with a link in the top panel and multiple child divs. The structure is as follows: cgroup is the parent of CBG, which is the parent of CGW, and CGW is the parent of the div I want to hide. How can I u ...

When modifying a string in React, the edit always somehow ends up at the very tail end

In my ReactJS app, I have a Material-UI input element. Everything is working well except for one issue - when I try to edit the text in the middle of the string, the cursor always jumps to the end of the string after every letter I input. I suspect this m ...

Webpack in Vuejs does not have access to the keys defined in dev.env.js file

The framework utilized here is vuejs-webpack, with build and config files located here. No modifications have been made to these files. According to the information on Environment Variables, the keys specified in dev.env.js should be accessible during the ...

Having trouble establishing a connection to SQL Server with tedious in Node.js

Trying to connect to the SQL Server "SQL.SCHOOL.EDU\STUDENTSQLSERVER,4500" from my school has been a real challenge for me using tedious. I am currently working on setting up a connection between my express back end and react front end. For now, I am ...

Converting data to JSON geometry format for implementation in Three.js

Currently, I am in the process of creating an exporter using Maxscript to convert data into JSON format for use in Three.js. Information on this topic is scarce, but I did come across a helpful resource: https://github.com/mrdoob/three.js/wiki/JSON-Geometr ...

Problems arising from Jquery append functionality

When using the append method, my inner div is only attaching one WHEAT-COLORED-BOX, whereas when using appendTo, my inner div attaches all the required number of WHEAT-COLORED-BOXES. Therefore, in this case, appendTo gives the correct result while append f ...

Utilizing Vue.js with XML data streams

I ran into a problem while working on my personal site with Vue.js. My goal is to display the five latest posts from my Jekyll blog on the page. To achieve this, I am checking the feed at http://todayilearned.dk/feed.xml. However, I'm struggling to ...

The value of msg.member is empty following the messageReactionAdd event

Whenever someone reacts on my server, it triggers the messageReactionAdd event. However, I am encountering difficulty in retrieving the member object of the author of a message that someone reacted to: module.exports = async (client, messageReaction, user) ...

The replacer argument of the JSON.stringify method doesn't seem to work properly when dealing with nested objects

My dilemma is sending a simplified version of an object to the server. { "fullName": "Don Corleone", "actor": { "actorId": 2, "name": "Marlon", "surname": "Brando", "description": "Marlon Brando is widely considered the greatest movie actor of a ...

Invoke the URL with a query string and obtain the response from the specified web page

How can I make a button on my user.php page call action.php?name=john&id=10 without refreshing the page? The action.php page needs to process the query string data (name=john & id=10), execute some action, and then send a message back. Here is an ...

What is the best way to reset an HTML file input using JavaScript?

Looking for a way to reset the file input in my form. I've tried setting the sources to the same method, but it doesn't delete the selected file path. Important: Trying to find a solution without having to reload the page, reset the form, or us ...

When referencing a particular React commit in package.json, it may result in the installation of react-tools instead of react itself

After including the following line in my package.json: "react": "git://github.com/facebook/react.git#08e4420019f74b7c93e64f59c443970359102530" When I execute npm install, I notice that node_modules/react-tools has been installed instead of node_modules/r ...

Updating the HTML class with JavaScript

My HTML class has two classes $(document).ready(function() { $(".container").hover(function() { $('.green').addClass('display-on'); }); $(".container").mouseleave(function() { $('.black&apos ...

selecting unique elements using classes is not possible with jquery

I am experimenting with using ajax on dynamically generated html elements from django. I have tried selecting the instances by class, but for some reason, it is not working as expected. Can anyone point out my mistake here? javascript $(document).ready(fu ...

Using React's useEffect to implement a mousedown event listener

I created a modal that automatically closes when the user clicks outside of it. method one - involves passing isModalOpened to update the state only if the modal is currently open. const [isModalOpened, toggleModal] = useState(false); const ref = useRef(n ...

What is the best method to ensure that none of the select option values are left empty?

I have a total of 5 select option drop down menus currently, but this number may increase in the future depending on requirements. The issue I'm facing is that when I select the last element, it returns true even though the other elements are empty. I ...

Header Dropdown Problems

Hey there, I have a question regarding my header setup. I currently have two headers in place: Whenever I click the notification button, the dropdown menu seems to disrupt the layout of the header. Here is a screenshot for reference: Below is the CSS cod ...