By clicking on the following DIV, nothing happens.
Where is the error ?
<div onclick="function dummy(that) { alert(that.toString())}" class="next">></div>
Please help.
You are defining dummy but not calling it. I don't think it works that way, not in the HTML onclick property anyway.
I suggest you move dummy() into a separate code block:
<script type='text/javascript'>
function dummy(that) { alert(that.toString())}
</script>
and then:
<div onclick="dummy(this);" class="next">></div>
or attach the function programmatically like so:
document.getElementById("myDummyDIV").onclick = function(event) { ..... }
This should do the trick:
<div onclick="dummy(this);" class="next"></div>
<script type="text/javascript">
function dummy(that) {
alert(that.toString());
}
</script>
This is silly actually. The function you've declared is unusable as a function unless you intend to do some more fantastic stuff and call the click event of this link from other methods elsewhere. However, if you're hell-bent-for-leather intent on putting the function declaration in the onclick event, it can be done this way:
<div onclick="(function dummy(that) { alert(that.toString())})();" class="next">></div>
You end up putting the function in it's own block and then the () at the end tells the parser to do it.
This is a function declaration, not invocation.
You could do something like this:
(function dummy(that) { alert(that.toString())}) (event);
and the complete HTML would be:
<div onclick="(function dummy(that) { alert(that.toString())})(event);" class="next">></div>
you dont create function here
you can just write the following
<div onclick="alert(that.toString())" class="next">></div>
Related
html element ondragstart I want to call a prototype function when I call it this way console.log() says this.drag(event) not a funciton
<div draggable="true" ondragstart="this.drag(event)"></div>
How can I achieve it in this manner ?
When you say this.drag(event), the this is the <div> that you made, so you try to call a method drag on the HTML element.
You can fix it like this:
<script>
function dragStarted(event) {
console.log("Drag event fired");
}
</script>
<div draggable="true" ondragstart="dragStarted(event);"></div>
I hope it helps :)
I am learning AngularJS. I have some article tag and on clicking on a button each article page is showed without any page refresh. This is one page website. What I want is that when article id "showSelector" is loaded I want to call myFunction() and in this function I want to show an alert. But the alert is not showing.
How can I do that?
<article id="showSelector" class="panel" ng-controller="CinemaCtrl" onload="myFunction()">
<header>
<a ng-click="back()" class="icon fa-arrow-circle-left"></a><h2>Shows in {{getSelectedCinema()}}</h2>
</header>
<p>
These shows are played in our single room theatre. Select one to reserce a ticket for it.
</p>
<section>
<div class="row">
<div class="4u" ng-repeat="show in shows">
<div class="movieCard">
<a ng-click="selectShow(show)"></a>
<h3>{{show.nameOfShow}}</h3>
<h4>{{show.timeOfShow | date:'MMM d'}}</h4>
<h4>{{show.timeOfShow | date:'HH:mm'}}</h4>
<p>Free seats: {{show.reservations | freeSeatFilter}}</p>
</div>
</div>
</div>
</section>
<script>
function myFunction() {
alert("Page is loaded");
};
</script>
</article>
You should call this function from the controller.
angular.module('App', [])
.controller('CinemaCtrl', ['$scope', function($scope) {
myFunction();
}]);
Even with normal javascript/html your function won't run on page load as all your are doing is defining the function, you never call it. This is really nothing to do with angular, but since you're using angular the above would be the "angular way" to invoke the function.
Obviously better still declare the function in the controller too.
Edit: Actually I see your "onload" - that won't get called as angular injects the HTML into the DOM. The html is never "loaded" (or the page is only loaded once).
Instead of using onload, use Angular's ng-init.
<article id="showSelector" ng-controller="CinemaCtrl" ng-init="myFunction()">
Note: This requires that myFunction is a property of the CinemaCtrl scope.
<section ng-controller="testController as ctrl" class="test_cls" data-ng-init="fn_load()">
$scope.fn_load = function () {
console.log("page load")
};
It's not the angular way, remove the function from html body and use it in controller, or use
angular.element(document).ready
More details are available here: https://stackoverflow.com/a/18646795/4301583
you can also use the below code.
function activateController(){
console.log('HELLO WORLD');
}
$scope.$on('$viewContentLoaded', function ($evt, data) {
activateController();
});
you can use it directly with $scope instance
$scope.init=function()
{
console.log("entered");
data={};
/*do whatever you want such as initialising scope variable,
using $http instance etcc..*/
}
//simple call init function on controller
$scope.init();
var someVr= element[0].querySelector('#showSelector');
myfunction(){
alert("hi");
}
angular.element(someVr).ready(function () {
myfunction();
});
This will do the job.
I have the href: <a class="like_counter_wrap fl_l" onclick="openFullList();">
I need to hide the function openFullList();. How to do this?
Ok, the code:
<!--Vk.com-->
<div class='scVK scSB'>
<script type='text/javascript' src='http://userapi.com/js/api/openapi.js?49'></script>
<script type='text/javascript'>VK.init({apiId: 2010456, onlyWidgets: true});</script>
<div id='vk_like'></div>
<script type='text/javascript'>
VK.Widgets.Like('vk_like', {type: 'button', height: 20});
</script></div>
is forms <a class="like_counter_wrap fl_l" onclick="openFullList();">. The idea is to prevent function "openFullList();"
JavaScript is client side code, meaning ALL code is viewable by somebody in a browser, as long as they dig deep enough. Sure, you could minify it like tyme suggests, but be aware one can still use a tool like the Chrome web inspector to find the exact line number and snippet of code run for the click event.
Basic answer: if the flow of how your code runs must not be "visible" to the end client, JavaScript is not the language you want to be using.
You can change your markup to this
<a class="like_counter_wrap fl_l">
now you wrap your function in a script tag and place it before the closing tag body (for performance)
<script>
function openFullList(){
//do something
}
var button = document.querySelector(".like_counter_wrap");// document.querySelector("a");
button.addEventListener("click",openFullList,false);
<script>
or put it in a file and bind it to your HTML like this
<script src="script/myscript.js"></script>
Hi what if you do like below,
<a class="like_counter_wrap fl_l" onclick="openFullList(true);">link1</a>
<a class="like_counter_wrap fl_l" onclick="openFullList(false);">link2</a>
then script as follows,
function openFullList(val) {
var showList = val;
if (showList)
{
//allow your function to execute
}
else
return false; //dont allow the function to execute simple by returning false
}
So, If you want to show list if user clicks on the link then pass true while calling the function or else pass false...hope it helps...
I have a HTML code as :
<body>
<div id = "mypage">
<svg>....</svg>
<div>Hello all, how are you?</div>
<img>........</img>
</div>
</body>
When I highlight any part on this page (highlighting "how are") a span is attached to this part in the body and the resulting code becomes:
<body>
<div id = "mypage">
<svg>....</svg>
<div>Hello all, <span class="highlight">how are</span> you?</div>
<img>........</img>
</div>
</body>
This means a change has occured in the HTML body. Now, when this happens I want to trigger a javascript function. i.e. the function should be called whenever any change in the body happens.
I know this can be done by running the function via setInterval and continuously checking for any changes. Can I avoid it and trigger the function just when any change occurs?
did you try this in your JS(Jquery is required).
$(body).change(function() {
yourFunction();
});
I thought that JavaScript is simple, but seems that it doesn't work
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function org(){
$(this).toggle()
}
</script>
<span onClick="org()" id="kaka">Click me and i hide</span>
Anyone knows what's wrong?
this in your code is not referencing your <span> element. You need to pass a reference to your element.
<script>
function org(e){
$(e).toggle()
}
</script>
<span onClick="org(this)" id="kaka">Click me and i hide</span>
Alternatively (and this is really the preferred way) you can attach an event handler and avoid using an inline handler:
<script>
$("kaka").on("click", function() {
$(this).toggle()
});
</script>
<span id="kaka">Click me and i hide</span>
You don't need to pass a reference to the element. You can also tell the function to use the element for this
<span onClick="org.call(this);" id="kaka">Click me and i hide</span>
Demo: JSFiddle