Adjust the colors of the borders upon clicking the button

Hello, I'm attempting to create a function where clicking on one button changes its border color to blue and changes the border color of all other buttons to orange. However, I'm encountering an issue where the border color for the other buttons is not changing as expected.

function clickimageone(el){
el.style.border = "1px solid blue";
document.getElementById("border2").className="borderorange";
}
.border1{
border: 1px solid red;
}
.border2{
border: 1px solid red;
}
.bordeorange{
border: 1px solid orange;
}
<div class="image"><img src="img/500.png" onclick="clickimageone(this)" class="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
<div class="image"><img src="img/1000.png" onclick="clickimagetwo(this)" class="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>

Essentially, I am looking to have the border of the clicked button turn blue while changing the color of all other buttons to orange upon clicking.

javascripthtmlcss

Answer №1

Modify the class attribute to id in order for document.getElementById() to function properly

See below for the corrected code:

function clickimageone(el){
el.style.border = "1px solid blue";
document.getElementById("border2").style.border = "1px solid orange";
}

function clickimagetwo(el){
el.style.border = "1px solid blue";
document.getElementById("border1").style.border = "1px solid orange";
}
#border1{
border: 1px solid red;
}
#border2{
border: 1px solid red;
}
.bordeorange{
border: 1px solid orange;
}
<div class="image"><img src="img/500.png" onclick="clickimageone(this)" id="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
<div class="image"><img src="img/1000.png" onclick="clickimagetwo(this)" id="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>

Answer №2

Simply change the getElementById to querySelector('.border2'), as the identifier border2 is actually a class, not an id.

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

Execute a script once the AngularJS view has finished loading

Just starting out with AngularJS and I've encountered an issue; I'm populating part of my view with HTML from a variable in my controller: <div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div> Everything works as expected ...

javascriptangularjs

Is it possible for JavaScript to style two different phone number elements on a single page?

After successfully creating a script that auto formats an element by ID on my website, I encountered an issue with multiple forms. The script works perfectly for a single element, but when I attempted to change it to target elements by class name using get ...

javascriptformattinggetelementbyidphone-numberautoformatting

Utilizing Nested Click Events in jQuery to Enhance User Interaction

I'm really struggling with this and can't seem to find a solution anywhere. I want to capture data when button A is clicked, and then submit that data via AJAX when button B is clicked. Here's what I've been considering: $(document).o ...

javascriptjquery

The Lenis smooth scrolling feature (GSAP) is not functioning properly

I have encountered an issue with the smooth scrolling feature of gsap causing a delay on my website. This problem is only resolved when I manually go into the browser settings and disable smooth scrolling by navigating to chrome://flags/#smooth-scrolling ...

javascriptreactjstypescriptnext.js

modifying the state in a stateless React component

Hello everyone! I am here trying to work with hooks and I'm not sure how to achieve my goal. Here is the code I have: import React, { useState } from 'react' import { useForm } from 'react-hook-form' import {useDispatch } from &a ...

javascriptreactjsreact-hooks

How can you personalize the dropdown button in dx-toolbar using DevExtreme?

Currently, I am working with the DevExtreme(v20.1.4) toolbar component within Angular(v8.2.14). However, when implementing a dx-toolbar and specifying locateInMenu="always" for the toolbar items, a dropdown button featuring the dx-icon-overflow i ...

javascriptangulartypescriptdevextremedevextreme-angular

What is the process for closing the side menu by clicking on the dark area?

I created a basic side navigation menu. When you resize the window to a smaller size, a red square will appear. If you click on this red square, the menu will open. The menu opens correctly, but I want it to close when I click on the dark area instead of ...

javascripthtmlcss

Discover and transform any strings that begin with http & https into clickable links

Can I use jQuery to search a paragraph for all strings that begin with http & https and turn them into clickable links? I have my Twitter feed displayed on my website, but any lines starting with http & https are shown as regular text. Is it feasible to t ...

javascriptjqueryhtml

Is it secure to attach the password field to a data object property in Vue.js?

This particular inquiry has been bothering me lately. Imagine I aim to create a login element for my application (using Vue), containing 2 specific input fields - one for the userID and the other for the password. The focus here is on the security of the ...

javascriptvue.js

What is the most effective method to extract an ID from a URL that is written in various formats?

Does anyone know of a reliable method to extract an ID from various URL formats using javascript or jquery? https://plus.google.com/115025207826515678661/posts https://plus.google.com/115025207826515678661/ https://plus.google.com/115025207826515678661 ht ...

javascriptjqueryhtmlxhtml

Initialization of Masonry JS occurs prior to images being fully loaded

I am in the process of creating a website to serve as my portfolio for university applications. Despite my efforts, I am struggling with the javascript aspect and have not been successful in resolving the issue by following similar inquiries. The problem ...

javascriptjqueryjquery-masonrymasonrybootstrap-5

Building a theme with TypeScript in React

As I embark on my React project, I've been tasked with creating a CSS using TypeScript while referring to the color palette diagram provided below. Utilizing createMuiTheme to build the theme, I've realized that there are various possible conditi ...

cssreactjstypescript

In Vue3, I utilize the Provide and Inject feature to handle data changes without triggering a visual update. Instead, I apply a filter() function to remove an item from an

I am currently testing the usage of the provide and inject methods. I have placed the datas and del-function in the parent component to provide, and in the child component, I am dynamically rendering using v-for='data' in datas. The objective I ...

javascriptvue.jsvue-componentvuejs3

activating a jQuery function and sending a parameter

Looking for some help with JavaScript - I'm having trouble getting this code to work. I need to trigger a predefined function from one script within my AJAX script. Specifically, I want to activate the qtip functionality on the content of a div that i ...

javascriptjqueryfunction

"Exploring the symbiotic relationship between Node.js and Express.js: an

I recently started learning Node.js and Express.js. I used the Express.js executable (express) to create an express application, which generated the following lines in app.js: ... var app = express(); http.createServer(app).listen(app.get('port' ...

javascriptnode.jsexpress

Vue 3's click event handler does not recognize $options.x as a valid function

I'm encountering a perplexing issue. I am currently in the process of creating a Wordpress plugin using Vue, but unfortunately, I am unable to establish functionality for the @click event. <script> export default { name: "App", me ...

javascriptwordpressvue.jsvuejs3

Acquire the information for PHP data updating

I'm currently working on a login system and data update feature that allows users to update their account information. To begin, please enter the login name of the account you wish to modify: UPDATEINPUT.HTML <html> <form method = "get" a ...

phphtmlmysql

What is the CSS code to modify the color of an SVG ::marker?

I am looking to change the color of an SVG li::marker based on the font color. I attempted using fill="currentColor" but it did not work as expected. Any suggestions on how to resolve this? li::marker { content: url("data:image/svg+xml,% ...

csssvg

Setting up angular-cli project for rc5- Step by step guide

Trying to integrate angular-cli with angular 2 rc5 but facing challenges: The issue of 'Promise' not being found After attempting to install 'npm install -g angular-cli@webpack', typings did not get installed, resulting in WebStorm un ...

javascriptangularnpmangular-clingrx

Discover the benefits of utilizing router.back() cascade in Next/React and how to effectively bypass anchor links

Currently, I am working on developing my own blog website using Next.js and MD transcriptions. The issue I am facing involves anchor links. All the titles <h1> are being converted into anchor links through the use of the next Link component: <Link ...

javascripthtmlreactjsnext.js