Calling two function alternatively on clicking the same element
Calling two function alternatively on clicking the same element
I need to call two function alternatively on clicking the same element in which I need to call one function with parameter and the other without parameter. It is basically that I need to select the element on first click and unselect on the second click.
My JS code:
var list = document.getElementById("sectionDispName");
for (var i = 0; i < secArr.length ; i++)
list.innerHTML += '<li onclick="func(this)" ondblclick="dblclickadd(this)"> ' + secArr[i][0] + '</li> ';
var func = (function (val)
var first = true;
return function (val) // argument moved to here.
first ? getValue(val) : singleclick();
first = !first;
)();
getValue(val) function is for selecting the element and singleclick() is for unselecting.
Declare var first = true; outside of function should work.
– NullPointer
Aug 29 at 5:32
try @NullPointer 's solution, it should work, if that's your problem
– Nadeem Shadan
Aug 29 at 5:39
okay, also when I am adding an alert( val) in the func() , the value of val is undefined.
– Neha
Aug 29 at 5:41
4 Answers
4
I'm not sure if this is what you're looking for but something like this makes sense to me and is a little simpler:
var list = document.getElementById("sectionDispName");
var selected = ;
for (var i = 0; i < secArr.length ; i++)
selected.push(false);
list.innerHTML +=
'<li onclick="toggleSelected(' + i + ')" ondblclick="dblclickadd(this)">' +
secArr[i][0] + '</li>';
var toggleSelected = function(i)
selected[i] = !selected[i];
;
When you call a function, amongst other things a "variable
environment" for that call is created, which has something called a
"binding object". (Call it the "variable object" for short; saying
"the binding object of the variable environment" is just a tad bit
long-winded!) The variable object has properties for the arguments to
the function, all local variables declared in the function, and all
functions declared within the function are alive only inside the
fucntion.
This mean when you used
var func = (function (val)
var first = true;
/* Code */
That is also what is known as variable scope.
A variable only exists within its containing function/method/class, and those will override any variables which belong to a wider scope.
The var first was stored only when the function is excuted after that it would be destroyed. then you need a global variable to store that data :
var first
var first = true;
var func = (function (val)
/* Code */
or
var first = ;
var func = (function (val)
first.push(true);
/* Code */
I applied all the solution given above but the problem is still . I am selecting and at the same time it is getting unselected. Even now my ondblclick event is not working. Please help me.
– Neha
Aug 29 at 6:25
@Neha can you edit your question with your lastest code
– M0ns1f
Aug 29 at 6:31
I have edited my question with my latest code.
– Neha
Aug 29 at 6:41
I am not certain about your approach because there are better means. But still, you have misunderstood the behavior here. You have written
var func = (function (val)
var first = true;
return function ()
first ? getValue(val) :singleclick();
first = !first;
)();
which is an IIFE. However, func holds the function that you have returned. That return function () .... That function does not expect an argument. Yet you attempt to call that function with an argument.
func
return function () ...
If you want to pass an argument, please move the argument from the IIFE initializer to your returning function object. So, do return function (val) .... In this situation, func is now a function object with one argument.
return function (val) ...
func
Here below is an interactive example. I have adjusted some values for PoC purpose. Just click on the list element.
var func = (function()
var first = true;
return function(val) // argument moved to here.
console.log('first? ' + first);
first ? getValue(val) : singleclick();
first = !first;
)();
function getValue(val)
console.log('getValue called with ' + val);
function singleclick()
console.log('singleclick called');
<ul>
<li onclick="func(1)">list 1</li>
<li onclick="func(2)">list 2</li>
<li onclick="func(3)">list 3</li>
<li onclick="func(4)">list 4</li>
<ul>
You weren't passing val to returned function.
var func = (function (val)
var first = true;
return function (val)
first = !first;
first ? getValue(val) : singleclick();
)();
window.onload = function ()
var list = document.getElementById("sectionDispName");
for (var i = 0; i < secArr.length; i++)
list.innerHTML += '<li onclick="func(this)" ondblclick="dblclickadd(this)"> ' + secArr[i][0] +
'</li> ';
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var secArr = [
['element_0_0'],
['element_1_0'],
['element_2_0'],
['element_3_0']
];
function getValue(HTMLelement)
console.log('getValue',
HTMLelement);
function singleclick()
console.log('singleclick');
</script>
</head>
<body>
<ol id="sectionDispName"></ol>
</body>
</html>
For multiple selection, if I am selecting one element and clicking on the other element to select the first element got unselected.
– Neha
Aug 29 at 6:33
Have you tried
<input type=radio? in <li>– Ketan Yekale
Aug 29 at 6:38
<input type=radio
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Does it work? Is there a problem?
– Ian
Aug 29 at 5:28