CODEWITHSUNDEEP
javascriptjqueryhtml
Milan Conhye
Milan Conhye

Reputation: 65

How do I treat the onclick parameter as a variable rather then a string in Javascript?

I am assigning a div to a variable;

function (MenuText) {
 var li = $("<div id='streamLinkOptions' onclick='editStreamDetails(" + MenuText + ")'><i class='fas fa- 
 caret-down'></i></div>");
}

I want the onclick function to execute with the provided parameter...

MenuText is being treated as a string rather than a variable.

My end goal is for MenuText to be passed into a function like the code below;

function editStreamDetails(title) {
    console.log(title);
}

Its possible that I am not using escapes properly. How can I solve this issue?

Upvotes: 0

Views: 72

Answers (4)

Adrian Roworth
Adrian Roworth

Reputation: 823

Define the event handler:

function editStreamDetails(title) {
    console.log(title);
}

Then create the element:

    $("<div id='streamLinkOptions'><i class='fas fa-caret-down'></i></div>");

Then attach the click handler to it!

Example:

// define handler.
function editStreamDetails(title) {
    console.log(title);
}

function (MenuText) {
    // create element.
    var li = $("<div id='streamLinkOptions'><i class='fas fa-caret-down'></i></div>");

    // attach handler to event.
    li.find('.fa-caret-down').on('click', function() {
        editStreamDetails(MenuText);
    });
}

Upvotes: 2

Nico Baudon
Nico Baudon

Reputation: 57

To add a click listener to an element with jQuery there is .click()

So you could get an existing element by its id with the selector $("#"+id_element) and add the click function on it with .click() like : 

$("#streamLinkOptions").click(function(){//doSomething})

Upvotes: 0

phuzi
phuzi

Reputation: 13059

Register a click handler using jQuery to perform the appropriate action rather than try to do it all in one go.

function(MenuText) {
  var li = $("<div id='streamLinkOptions'><i class='fas fa-caret-down'></i></div>");
  li.on('click', function() {
    editStreamDetails(MenuText)
  });
}

This will capture the value of MenuText and pass it to editStreamDetails when the <div> is clicked (assuming it gets added to the DOM at some point.)

Update

To register the click handler on the icon itself

li.find('i').on('click', function() {

Upvotes: 1

Nicolas
Nicolas

Reputation: 8670

It is never a good idea to use the onclick attribute inline. Instead, you could add your data as an attribute and retreive this attribute in your click function. You should also register your click function using addEventListener instead.

let titleOfDivs = [
  'test1',
  'test2'
]

titleOfDivs.forEach((title) => {
  $('body').append('<div class="streamLinkOptions" data-title="' + title + '"><i class="fas fa-caret-down></i></div>');
});

$('.streamLinkOptions').on('click', function() {
  let title = $(this).data('title');
  console.log(title);
})
.streamLinkOptions {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 20px;
  display: inline-block;
  position:relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

</body>

Here i've change your id to a class to make it easier to demonstrate.

Upvotes: 0

Related Questions