How do can I change and individual element in EJS using JQuery

Question

So I'm having a problem right now. In my code, I go through an array when displaying my code to the user. However when I want to select an element using JQuery to change using the .val method it changes all the elements with that class name? I'm new to Node and JQuery, so please point me to any duplicates. How can I make it such that on click of the element only that element changes?

JQuery code:

$('.likebutton').on('click', function(){ // hit like
    console.log("like clicked?"); // works
    // i need to find a way to connect this with code and make it update???

    var curr = $('#changeit').val();
    var item = $('.likebutton').val('Liked'); // problem
    console.log("item: " + curr);
    $.ajax({ //do something with the data via front-end framework, so we can update in reall time
      type: 'GET',
      url: '/',
      success: function(err){
        // here we will get the data, find it in the data base and update it. Changes will occur 
        // via a reload, either manually or when they create a post, for now. Later we can update 
        // the thing in real time.

        // on click we must also change the color of the thing too to show that it was liked
        console.log('success!'); 
      }
    });
      return false;

    });

EJS code

<!DOCTYPE html>
<html>
    <head>
    </head>
    <script
    src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="/assets/chat.js"></script>    
    <body>
        <h1> Ut whispers</h1>
        <form action="/" method="POST">
            <input type="text" placeholder = "say something" name="msg"> <input type="submit" value="Submit"> <br>
        </form>
        <ul>
            <% for(var i = 0; i < chats.length; i++) { %>
            <li class = "display"><%= chats[i].msg %> <input type="button" id = "changeit" class = "likebutton" value = "Like: (<%=chats[i].likes%>)" >
                <ul>
                    <li>replies will go here</li>
                </ul>
            </li>
            <% } %>
        </ul>
    </body>
</html>

Answer 1

Use the keyword ' this '

" In many ... programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked. "

You need to reference the object that is clicked and you can do that by using ' this '.

So in your code, change:

var item = $('.likebutton').val('Liked'); // problem

to this:

var item = $(this).val('Liked'); // problem

I find it easier to remember the keyword when I think about it like this:

I want THIS thing (button, input, link or whatever) I am attaching the event to, to do the task.

Read more about the ' this ' keyword here .

In answer to your comment. In the for loop you're using IDs. That's not a good idea because the IDs won't be unique, so you should remove any references to IDs in the for loop.

The reason why you always get the first value is because the query selector finds the first element with the ID (#changeit) and use the value of that element.

You should use the ' this ' keyword again to get the value because the value you are trying to get is stored in the button you are clicking.

So in your code, change:

var curr = $('#changeit').val();

to this:

var curr = $(this).val();

How do can I change and individual element in EJS using JQuery

Question

1 answers

solution1
1 ACCPTED 2019-12-21 01:53:32

How do can I change and individual element in EJS using JQuery

Question

1 answers

solution1 1 ACCPTED 2019-12-21 01:53:32

solution1
1 ACCPTED 2019-12-21 01:53:32