Adding paramaters for an onclick function inside an element

Question

Hey guys I'm having an issue with the syntax of providing a parameter for a function that I call on an onclick event inside a div.

I can get the function open_email() to call but not when I add a parameter since the parameter I am looking to add is obtained from another form element and I'm not sure how to type it properly.

Below is my code. Please let me know if you know how it should be written. I'm currently getting nothing to happen unless I keep the parameters (arguments) blank.

To clarify, I need to know how to add emails[index].id as an argument for the function below that is called open_email(). What is the proper syntax? I tried : open_email(emails[index].id) and open_email("emails[index].id")

 for (index = 0; index < emails.length; index++) {
      if (emails[index].read == false) {
        element.innerHTML += '<div class="emails unread" onclick="open_email();">' + "From:" + JSON.stringify(emails[index].sender) +
          "<p class='subject'>" + "Subject: " + JSON.stringify(emails[index].subject) + "</p>" + JSON.stringify(emails[index].timestamp) + '</div>';
      } else {
        element.innerHTML += '<div class="emails">' + "From:" + JSON.stringify(emails[index].sender) +
          "<p>" + "Subject: " + JSON.stringify(emails[index].subject) + "</p>" + JSON.stringify(emails[index].timestamp) + '</div>';
      }

there's too many parts to make it runnable. All i need to know is how to do the "onclick=open_email();" part with emails[index].id as an argument. I can't seem to get it to work when I add an argument. — card51short
– card51short, Commented Oct 27, 2020 at 22:18
If there are too many parts for you, who wrote it, to make it runnable -- doesn't that mean it's too many parts for us, who don't know it, to make it runnable? — HoldOffHunger
– HoldOffHunger, Commented Oct 27, 2020 at 22:21
it doesn't need to be runnable. I just need to know how to put an argument into the "onclick=open_email();" part. When I put emails[index].id as an argument, it doesn't do anything when I click on it. When there's no argument, it works. I need to pass an argument, though. And the argument is emails[index].id — card51short
– card51short, Commented Oct 27, 2020 at 22:24

IvanD · Accepted Answer · 2020-10-27 22:29:02Z

1

Yes, you can. You need to send an arrow function there. Try to click on the text "Initial Content".

I do not have your open_email function, so I made up one as an example.

Basically, onclick will execute () => open_email(emailIndexId):

<div id="text">Initial Content</div>
<script>
  textDiv = document.getElementById('text');

  const open_email = id => {
    textDiv.innerText = "Sent email to " + id;
  }

  const emailIndexId = 33;

  textDiv.onclick = () => open_email(emailIndexId) // IMPORTANT
</script>

answered Oct 27, 2020 at 22:29

IvanD

2,98320 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

card51short Over a year ago

i'm sorry i think my question was confusing. how do i put emails[index].id as an argument on the div onclick event?

IvanD Over a year ago

myDiv.onclick = () => open_email(emails[index].id)

card51short Over a year ago

what does the => do? Is there any way to just put it in the onclick attribute instead? I don't really understand your method.

card51short Over a year ago

how do put the argument (emails[index].id) in the onclick attribute?

IvanD Over a year ago

It's an arrow function, basically an equivalent of myDiv.onclick = function(){open_email(emails[index].id)}, but with different scoping rules. The idea is that you create a middleman function that will run your open_email function with the necessary arguments

|

Collectives™ on Stack Overflow

Adding paramaters for an onclick function inside an element

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related