Steps to toggle text color upon clicking and switch the color of another text

As a beginner with no Js knowledge, I am trying to achieve a specific function. I want to be able to change the color of text when it is clicked, but also have the previously clicked text return to its original color.

<div class="mt-5 first-member" onclick="document.getElementById('myImage').src='./assets/images/person-team.png'">
        <span>
          <small>
            <sup>01</sup>
          </small>
        </span>
        <h1> Alexandr Bruegel</h1>
      </div>
      
      <div class="mt-3 other-member" onclick="document.getElementById('myImage').src='./assets/images/bg-img.png'">
        <span>
          <small>
            <sup>02</sup>
          </small>
        </span>
        <h1>Ann Fowler</h1>
      </div>

javascripthtmljquerycssbootstrap-4

Answer №1

Here is some code that should work for you:

document.querySelector('.mt-5').addEventListener('click',function(){
//document.getElementById('myImage').src='./assets/images/person-team.png'
document.getElementById('text1').style.color = 'red'
document.getElementById('text2').style.color = 'black'
})
document.querySelector('.mt-3').addEventListener('click',function(){
//document.getElementById('myImage').src='./assets/images/bg-img.png'
document.getElementById('text2').style.color = 'red'
document.getElementById('text1').style.color = 'black'
})
<div class="mt-5 first-member" >
  <span>
                        <small>
                        <sup>01</sup>
                     </small>
                  </span>
  <h1 id='text1'> Alexandr Bruegel</h1>
</div>
<div class="mt-3 other-member" >
  <span>
                        <small>
                        <sup>02</sup>
                     </small>
                  </span>
  <h1 id='text2'>Ann Fowler</h1>
</div>

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

Transforming the appearance of the menu element in Vue using transitions

In my Vue app, I have this SCSS code that I'm using to create a smooth transition effect from the left for a menu when the isVisible property is set to true. However, I am encountering an issue where the transition defined does not apply and the menu ...

javascripthtmlcssvue.js

The reason why the hasClass method in jQuery is failing to work on an element

When the Quantity Tab is clicked, a unique ID for the label is generated as follows: For Tab1: 703_ABC_0_ABC_0tab1 703_ABC_1_ABC_0tab1 For Tab2: 703_ABC_0_ABC_0tab2 703_ABC_0_ABC_0tab2 Upon selecting/unselecting the checkbox, the framework adds class ...

jquery

Guide to easily uploading an image to Amazon AWS (S3) with Ajax and Jquery in a Rails application

Is there a way for users to easily upload their images directly from the site? I've made progress, but now I'm stuck on uploading the image to the server. How can I resolve this issue? HTML - <div> <div style="height: 80px; position ...

jqueryruby-on-railsajaxamazon-s3coffeescript

Error: The lambda response was not defined. Please review your function code. The response returned with a status of 500 in 583 milliseconds

https://i.sstatic.net/GUHr9.png I'm experimenting with Netlify and its Lambda function feature to execute a Node.js function. Following the guide at https://css-tricks.com/using-netlify-forms-and-netlify-functions-to-build-an-email-sign-up-widget/. ...

javascriptnode.jslambdanetlify

Inject an html <img> tag using an AJAX PHP call

Greetings everyone, I am currently in the process of developing a captcha maker using PHP with an Object-Oriented Programming (OOP) approach. The implementation involves a Captcha class responsible for generating the captcha image. You can find the complet ...

phpjqueryhtmlajax

Tips for implementing jquery.validation on a form that has been dynamically rendered and returned by an AJAX request

I am encountering a minor issue with the implementation of the jQuery validation plugin. When using static forms that are rendered during regular page load, the validation works flawlessly. The code snippet I utilize for validation looks similar to this: ...

phpjqueryjquery-validate

Updating meta tags dynamically for Facebook sharing using Angular 6

I am struggling to dynamically update meta tags such as og:title, og:description, and og:image for sharing on Facebook. I have attempted various methods without success. Initially, I tried setting meta tags with JavaScript like this: var meta = document. ...

javascriptangular

Utilizing a function from a separate file in Vue: A step-by-step guide

Recently starting to work with Vue, I encountered an issue while trying to utilize a helper function called arrayDateFormatter within one of my imported .vue files. Despite importing it, the function doesn't seem to be called when used inside the moun ...

javascriptvue.js

Is it possible to transfer .NET backend functions to a frontend framework like React or Vue for client-side execution?

For instance, imagine a scenario where there is a login page requiring a username and password to meet specific criteria for validation: the username must contain a capital 'A' and the password should be exactly 8 characters long. The challenge l ...

javascriptnode.jsreactjsvue.jsasp.net-core-webapi

Sending data from JavaScript to PHP using the POST method

I recently learned that using ajax for data passing doesn't require a form or hidden value. I'm hoping to find an example to better understand how it works. index.js: function collectData(r) { // identifies the row index var i = r.pare ...

javascriptphpjqueryajax

Troubleshooting: When Angular Fade In Out Animation Won't Work

Looking to create a simple animation with the angular animation package The goal is to smoothly transition from opacity 0 to opacity 1 for a fade effect. I've had success with other properties like height and display, but struggling with opacity. H ...

htmlcssangularanimationangular-animations

Enhance your date with a specific month using MomentJS

I attempted to retrieve only the Saturdays of upcoming months with: var momentDt = moment('2017-03-18').add(1); //or 2 or 3 However, adding 1 results in April 18, 2017, which is a Tuesday. Is there an easier way in moment to achieve this wit ...

javascript

What are the steps to display JSON data within an HTML div?

Struggling to display this JSON data within an HTML div [{ "botten": ["Crispy", "thin"] }, ] The HTML document's div has the class name box1_data. Below is my script: var crustInfo = document.getElementsByClassName("box1_data"); $.getJSON(' ...

javascriptjqueryhtmljson

The HTML input element does not comply with the specified pattern

My current struggle lies in validating the input field for a "Phone Number". Despite creating a regex pattern that demands 10 numbers, I still encounter the error message: "Please match the requested format". I am puzzled as to why this is happening, even ...

htmlformsvalidationinput

Transmitting several images via the HTML INPUT tag through AJAX to a Laravel Controller, in addition to sending other data not contained within the

$('#update-post').on('click', function(event){ $.ajax({ method: 'POST', url: editPostUrl, data: { content: $('#post-content').val(), deleteImages: deleteImages, postId: postID, ...

jqueryjsonajaxlaravel

Plugin that collapses dropdown menus when the mouse hovers over them, powered by jQuery

My webpage has a simple set of links, and one of them triggers a dropdown menu to appear on mouseover (refer to the image below). The dropdown submenu becomes visible when the link "How fast is it?" is hovered over, and remains fixed in place due to the di ...

javascriptjqueryhtmlcss

Sass compilation with source mapping

Is there a more efficient method to compile my sass files with sourcemap enabled other than using the command below? sass --compass --sourcemap --style compact --watch sass:css In the case of utilizing compass, 'compass watch' would be the pref ...

csssasscompass-sass

Enabling Proper Emission of 'Change' in Custom Widgets at Dojo Practice

Picture this: there's a listener set up for the native dijit/form/Select element, ready to respond to the change event: nativeSelectWidget.on('change', lang.hitch(this, onSelectClick)); Now, I've developed my own custom widget that cl ...

javascriptdojo

Display intricate header and preview in a printed datatable

Hey there, I've been using the Datatable plugin and it's really great. However, I've come across a problem with complex headers like this: <thead> <tr><td>some text</td></tr> <tr><td>some te ...

javascripthtmldatatable

If you want to use the decorators plugin, make sure to include the 'decoratorsBeforeExport' option in your

Currently, I am utilizing Next.js along with TypeScript and attempting to integrate TypeORM into my project, like demonstrated below: @Entity() export class UserModel extends BaseEntity { @PrimaryGeneratedColumn('uuid') id: number } Unfortun ...

javascriptnode.jstypescriptbabeljsnext.js