How do I call a function after user clicks in ng-click?

Question

I'm running an optimizely test in this page: https://www.thelotter.com/pt/bilhetes-loteria/africa-sul-powerball/?player=0

This is the current javascript for the test:

/* Don't touch this code */
function waitForDelayedContent(selector, experiment, timeout, keepAlive) {
    var intervalTime = 50;
    var timeout = timeout || 3000;
    var keepAlive = keepAlive || false;
    var maxAttempts = timeout / intervalTime;
    var attempts = 0;
    var elementsCount = 0;
    var interval = setInterval(function() {
        if ($(selector).length > elementsCount) {
            if (!keepAlive) {
                clearInterval(interval);
            }
            experiment();
            elementsCount = $(selector).length;
        } else  if (attempts > maxAttempts) {
            clearInterval(interval);
        }
        attempts ++;
    }, intervalTime);
}
/* --------------------------------------------- */

waitForDelayedContent(".jackpot", function(){

$("#ctl00_tdMainRightSite").css({"display":"none", "visibility":""});
$("#divMainLeftSite").addClass("Clean_content_left_wide");
$("#tdMainLeftSite").addClass("Clean_TdMainLeftSite");
 
$(".play-request-options").css({"display":"none", "visibility":""});
  $(".play-request-options").attr("style", "display: none !important;");
$(".play-request-summary").addClass("Clean_play-request-summary");
$(".btn-lucky-numbers").css({"display":"none", "visibility":""});
$(".bonus-box").addClass("Clean_bonus-box");
$(".ticket-line-holder").attr("style", "width: 153px !important;");
$(".cell-value").attr("style", "height: 20px !important; width:22px !important; font-size:14px; padding-top: 3px; margin-right:1px;");

$(".SkipThisFixedPosition").css({"display":"none", "visibility":""});
$(".nav-tabs-simple").css({"display":"none", "visibility":""});
$(".wrapper").addClass("Clean_ticket-lines-container");
$(".long_regular_separator").addClass("Clean_long_regular_separator");
$(".nav-tab > .syndication").css({"display":"none", "visibility":""});
$(".nav-tab >  .bundle").css({"display":"none", "visibility":""});
$(".nav-tab >  .personal").css({"display":"none", "visibility":""});
$(".play-view-regular").addClass("Clean_play-view-regular");
$(".ticket-line-content").addClass("Clean_ticket-line-content");


$(".watermark").addClass("Clean_watermark");
$(".lottery-card").addClass("Clean_lottery-card");
$(".jackpot").addClass("Clean_jackpot");
$(".btn-size-large").addClass("Clean_btn-size-large");


$(".btn-size-large > .btn-content > .btn-text").addClass("Clean_btn-text");

$(".nav-buttons-group > .btn-color-blue").addClass("Clean_btn-color-blue");  
$(".nav-buttons-group > .btn-color-blue > .btn-content").addClass("Clean_btn-color-blue_content"); 
$(".play-type-selection-wrapper").addClass("Clean_play-type-selection-wrapper"); 
 
});

But instead of the waitForDelayedContent function, I need the test to run with a function that will make the test run after the user clicks in any of the li tags below (part of the HTML already):

<div id="App-PlayRequest" data-ng-controller="PlayRequest.PlayRequestController" class="ng-scope">
<ul class="play-type-containers">
<li class="play-type-container" ng-click="setGameType(0)">...</li>
<li class="play-type-container" ng-click="setGameType(3)">...</li>
<li class="play-type-container" ng-click="setGameType(4)">...</li>
</ul>
</div>

How do I call a function after the user clicks in any of the ng-click?

I think it might be a simple code, but I'm not a developer and couldn't make the code in the answers work.

Thank you so much!

When you mix jQuery with AngularJS, you are asking for problems. When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. Use as little code as possible that still produces the same problem. See [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). — georgeawg, May 11 '17 at 16:14

sumit chauhan · Answer 1 · 2017-05-10T09:49:13.800

try bellow code snippet: IT will work if you want to work with angular js.

angular.module('app',[])
.controller('TodoListController', function ($scope) {
$scope.setGameType = setGameType;
 function setGameType(index) {
    console.log(index);
  }
});

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app='app'>
    <div ng-controller="TodoListController as todoList">
    <ul class="play-type-containers">
            <li class="play-type-container" ng-click="setGameType(0);">a...</li>
            <li class="play-type-container" ng-click="setGameType(3);">b...</li>
            <li class="play-type-container" ng-click="setGameType(4);">c...</li>
            </ul>
    </div>
    </div>

update Also if you want to use only javscript: try these:-

function setGameType(index) {
  console.log(index);
}

    <ul class="play-type-containers">
            <li class="play-type-container" onclick="setGameType(0);">a...</li>
            <li class="play-type-container" onclick="setGameType(3);">b...</li>
            <li class="play-type-container" onclick="setGameType(4);">c...</li>
            </ul>

Thank you so much, but I cannot edit HTML, only insert new code in it. I tried the version without the angular, and it didnt work. I think i've might be calling the function in a wrong way. I've edit the post adding the javascript that belongs to the test. — Manoela Orsi, May 10 '17 at 11:28
if ng-click is mentioned in your html than you've to try with angular only. — sumit chauhan, May 10 '17 at 11:39

score 0 · Answer 2 · 2017-05-10T09:49:23.087

Please try this.

<!DOCTYPE html>
<html>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body ng-app="myApp">

<div ng-controller="myCtrl">

<button ng-click="setGameType(1)">OK</button>
<ul class="play-type-containers">
<li class="play-type-container" ng-click="setGameType(0)">One</li>
<li class="play-type-container"   ng-click="setGameType(1)">Two</li>
<li class="play-type-container" ng-click="setGameType(2)">Three</li>
</ul>

</div>

<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;

$scope.setGameType = function(val) {
  alert("Do something here with id "+val);
};
}]);
</script>
</body>
</html>

score 0 · Answer 3 · answered May 10 '17 at 12:01

<!DOCTYPE html>
<html>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body ng-app="myApp">

<div ng-controller="myCtrl">

<button ng-click="setGameType(1)">OK</button>
<ul class="play-type-containers">
<li class="play-type-container" ng-click="setGameType(0)">One</li>
<li class="play-type-container"   ng-click="setGameType(1)">Two</li>
<li class="play-type-container" ng-click="setGameType(2)">Three</li>
</ul>

</div>

//This script code according to john pappa's guideline.
<script>
(function() {
  angular.module('myApp')
    .controller('myCtrl', myCtrl);

  function myCtrl(
    $scope
    ) {
    $scope.setGameType = setGameType;
    function setGameType(val){
           console.log('Selected game type value',val);
           //do stuff which you want when user click.
    }
})();

</script>
</body>
</html>

How do I call a function after user clicks in ng-click?

3 Answers3