Having trouble getting the desired output from the Jquery ready function

HTML Snippet

 <section>
 <textarea class= "text" placeholder="type something"> </textarea> </br> </br>
    <button id= "append"> Append </button>
    <button id= "prepand"> Prepand </button>
    <button id= "replace"> Replace </button>
</section>

JQuery Code Segment

$(document).ready(function(){

    $('#append','#prepand','#replace').on('click', function(e){

           var e1 = $(e.currentTarget);
           var action = e1.attr('id');

           if (action == "prepand"){
             console.log("Prepending");
           }
           else if (action == "append") {
             console.log("Appending");
           }
           else if(action == "replace"){
             console.log("Replacing");
           }});

           });

I am trying to test the functionality of the buttons on my webpage, but I'm not seeing any output in the console. Can someone please assist me with this issue?

Answer №1

To use all three IDs, simply include one quote for all.

Here is the updated code snippet:

 $(document).ready(function(){     

    $('#append,#prepand,#replace').on('click', function(e){

           var e1 = $(e.currentTarget);
           var action = e1.attr('id');

           if (action == "prepand"){
             console.log("Prepending");
           }
           else if (action == "append") {
             console.log("Appending");
           }
           else if(action == "replace"){
             console.log("Replacing");
           }
    });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<textarea class= "text" placeholder="type something"> </textarea> </br> </br>
    <button id= "append"> Append </button>
    <button id= "prepend"> Prepend </button>
    <button id= "replace"> Replace </button>
</section>                                                              
<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 <section>

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

Implementing Undo and Redo capability for input tag in Angular: A step-by-step guide

I need help creating a feature in Angular that allows users to undo and redo values entered in an input field. Here's what I want to achieve: if I type Hello into the input: Click the undo button: display hell Click the undo button: display hel Click ...

What is the best way to implement a nested lookup in MongoDB within a field?

Within my database, I have a collection named Randomhospital. Inside this collection, there is a field named hospital structured as follows: { "id": "GuDMUPb9gq", "Hospital Name": "UPHI", "Hospital City&qu ...

Switch the style of the anchor tag using JavaScript

I need assistance with modifying a list on my webpage. Here is the current structure: <ul id="breadcrumbs" class="breadcrumbs-two"> <li><a href="#" class="current" id="a1">Step1</a></li> <li><a href ...

MUI: Autocomplete cannot accept the provided value as it is invalid. There are no matching options for the input `""`

https://i.stack.imgur.com/KoQxk.png Whenever I input a value in the autocomplete component, an unresolved warning pops up... Here's how my input setup looks: <Autocomplete id="cboAdresse" sx={{ width: 100 + " ...

Having trouble with JWT verification in combination with Redis

In my API, I am utilizing Node.js in conjunction with a package called jwt-redis to generate and verify authentication tokens. This allows me to easily remove the tokens from the redis database when logging out. The first step was successful - creating th ...

Struggling to extract information from the front-end by utilizing Node.js/Express with body-parser and encountering difficulties

Attempting to transfer data from the frontend to a node server utilizing body-parser Shown below is the frontend code: <body> <h1>Donate!</h1> <h2>Select A tier</h2> <label for="donate-tier-select">Suggested Sp ...

Tips for initiating a PHP class method through AJAX

As someone who is just starting to learn about ajax, I'm currently facing a challenge with calling the get_mother method through ajax in my form's textbox change event. My goal is to display the results in a datalist by using the following code. ...

Refreshing data in a Bootstrap modal

I am having trouble passing data from a Bootstrap modal to the ul element. Although I can add multiple li elements, only the first one is displayed and it does not change. Can anyone offer assistance with this issue? <ul id="myList"> </ul> ...

What could be the reason for my jQuery function functioning in IE8 but not in FF3.6.11?

I have a group of checkboxes with an option for 'None'. When 'None' is clicked, it should uncheck the rest of the checkboxes in the set. If any other checkbox is clicked, 'None' should be unchecked. This functionality is worki ...

Controller using the 'as' syntax fails to add new object to array

Lately, I've been experimenting with the Controller as syntax in Angular. However, I seem to be struggling to grasp its functionality. I am currently following a tutorial that utilizes $scope to bind the members of the controller function rather than ...

Steps to store a string with all characters in a JavaScript variable

I am faced with a situation where I need to pass variables that are considered Javascript objects, in a format similar to the following: var pageVars= [ { origin:'page', property:'name', value:'whatever' }, { origin:& ...

Increase the date by one day in the minimum date field using the date picker

I've been struggling with adding one day to the minDate in my code. Despite trying multiple solutions from Stackoverflow, none of them have worked successfully. Here is the code I currently have: $('#cal_mulamhn').datepicker({ minDate ...

What is the reason behind the sorting of sets in jQuery when using the .add() method?

Recently, I encountered an issue while adding multiple DOM objects (SVG elements) totaling around 3000 to an empty jQuery set using the .add() method. The process was taking an unexpectedly long time, causing the UI to freeze while the JavaScript code wa ...

Load data from SQL into dropdown menu and utilize selections to alter database info

As I continue to develop my skills in programming, I encountered a puzzling issue that I can't seem to figure out. My objective is straightforward: users input data into a form and are then directed to either a results page or back to the form. On the ...

React - Implementing toggling of a field within a Component Slot

I find myself in a peculiar situation. I am working on a component that contains a slot. Within this slot, there needs to be an input field for a name. Initially, the input field should be disabled until a web request is made within the component. Upon com ...

Identify and click on the child span within the li element using Cypress

I am struggling to select a li element and click/check on the span with the checkbox class, but I can't seem to make it work. Here is what I have attempted: <div id="list-widget"> <ul class="tree"> <li class ...

Angular is attempting to call the $http method and trigger the success callback even

I have implemented a function in a service: function retrieveData(link) { return $http.get(link).then(function (res) { return res.info; }); } If the request is successful, everything works smoothly - I receive a promise as expected. Howe ...

How to Enhance a Partial View Selectlist with a Plugin in MVC ASP.Net

I am facing an issue with a jQuery function that loads a partialview into the HTML in a DIV: function getResponse(url) { $.ajax({ url: url, context: document.body, success: function (data) { $('.modal-body p.bo ...

How can you "flatten" an array containing objects?

What is the most efficient method to "flatten" a JSON array of objects using only JavaScript or Lodash? Consider this sample array [ { "name": "Mat", "age": "18", "studies": [ { "subject": "English", "mark": 5 }, ...

Error: Website unable to load on Internet Explorer 6

When trying to load a specific page in IE6, I encounter an issue where a popup message appears stating 'This page contains both secure and nonsecure items. Do you want to display the nonsecure items?' Regardless of my choice, I receive an HTTP 40 ...