Hi I have a small website, which keeps reloading after a click event. How can I prevent this?
PS: I'm only allowed to use pure JS.
HTML
Cookie Clicker
</head>
<body>
<header>
<h1>Points: </h1>
<span id="score"></span>
</header>
<div class="container">
<div>
<a href="" onclick="addPoints(1)">
<img src="assets/graphics/Friis.png" />
</a>
</div>
</div>
<script src="assets/scripts/cookieClicker.js"></script>
</body>
</html>
JS
var points = 0,
score = document.getElementById("score");
function addPoints(increase) {
console.log('hit');
points += increase;
score.innerHTML = '' + points;
};
You can modify only your html and it works:
<a href="javascript:void(0);" onclick="addPoints(1)">
Some people make this:
<a href="#" onclick="addPoints(1)">
But this is an anchor that scrolls your page to top. If you need to make by javascript, search about event preventDefault.
EDIT
Read about void javascript function:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
It's good to understand behaviour.
update your code to:
<a href="" onclick="addPoints(1);return false">
or
<a href="" onclick="return addPoints(1)">
and let your function addPoints return false. Upside of this is that you can actually let the href link to a page in case addPoints reaches a certain level for instance. If addPoints returns true the link will take the user to that page, return false will keep the user on the current page.
Instead of using onClick you can just change the href to run the function.
For example:
<a href="javascript:addPoints(1);">
that happens because you code contain
<a href="" onclick="addPoints(1)"> // These Can Reload Same Page
<a href="#" onclick="addPoints(1)"> // Modify upper code to these code
Related
This seems like it should be simple i have a menu using Angular that sets a variable "active"
<a class="about" href="#" ng-click="active='About Me'">About Me</a>
and a Paragraph that will output whatever that active name is
<p ng-show="active">You chose <b>{{active}}</b></p>
What i can't figure out is now to set up a if check wither if "$active/{{active}} = "about me"" display this block of code so each link will fill the body with different content.
Any thoughts?
To achieve expected result, use below option
HTML:
<div ng-app="test" ng-controller="testCtrl">
<a class="about" href="#" ng-click="active='About Me'">About Me</a>
<a class="about" href="#" ng-click="active='Home'">Home</a>
<p ng-show="active">You chose <b>{{active}}</b></p>
</div>
JS:
var app = angular.module('test',[]);
app.controller('testCtrl',function($scope){
})
Make sure that the active scope variable is inside the tag having controller
code sample- https://codepen.io/nagasai/pen/wmBMjd
I have this anchor which has an onclick function that changes the background color of certain div to green. It is properly working but the problem is it needs to be double clicked in order for the function to be executed.
HTML:
<a onclick="btngreen()" href="">MENU</a>
Javascript:
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = 'green';
}
You could use ondblclick
<a ondblclick="btngreen()" href="">MENU</a>
As per my understanding of your problem.
Try this code. use # in href
<a onclick="btngreen()" href="#">MENU</a>
or you can use
<a onclick="btngreen()" href="javascript: void(0)">MENU</a>
Works fine for me. Only issue I had was your empty href="" tag so I removed it. You could also use href="#" if you do not want to remove it.
<script>
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = "green";
}
</script>
<a onclick="btngreen()" href="#">MENU</a>
<div id="nameofdiv" style="width:100px;height:100px;"></div>
If you do not need the button to be a link, you could simple change it to another tag such as <p> since the a will be trying to naviagte the page.
<p onclick="btngreen()">menu</p>
<script type="text/javascript">
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = "green";
}
</script>
or you could also just default the link to not navigate from the page such as this example below.
<a onclick="btngreen()" href="#">menu</a>
<script type="text/javascript">
function btngreen(){
document.getElementById("nameofdiv").style.backgroundColor = "green";
}
</script>
Using the href="#" is a dead link and will not navigate the page anywhere.
<div class="button">
<a class="testclass" href="javascript:actionx(objectId);"></a>
</div>
So the question is how do I initiate JavaScript bit using jQuery, I have tried:
window.location = javascript:actionx(objectId);
And some other similar variations, but they do not seem to work.
By the way, class is universal and all the buttons have it. The only thing that changes is the objectId.
If you are trying to redirect then you can try this:
html:
<div class="button">
<a class="testclass" href=" javascript:actionx(1234);">Redirect</a>
</div>
script:
function actionx(data){
//rest of the code without return
window.location="d3.php";//here your location to redirect
}
I am using to do this function to rotate html contents. It is working on laptop/mac but not working when I 'touch' the links on mobile phone.
<a href="javascript:void(0)" >Link 1</a>
<a href="javascript:void(0)" >Link 2</a>
<a href="javascript:void(0)" >Link 3</a>
<a href="javascript:void(0)" >Link 4</a>
<a href="javascript:void(0)" >Link 5</a>
Upon clicking, the html contents will be dynamically changed.
I tried
<a href="#" onclick="javascript:;" >Link 1</a>
Also tried
Link 1
Both didnt work on mobile. Any idea why is this so? Do I need to add any codes in the javascript?
Edit:
The triggering code is this. Firstly it is using a class. Below is one of the methods.
bindMoveHandler:function(target){
var _this = this;
target.on(_this.options.trigger,'a',function(event){
var w = $(this).width();
var current_offset = $(this).offset();
var control_offset = target.offset();
var left = current_offset.left - control_offset.left;
var scale = w/100;
var d = 0; //index after move finished
Full code: http://www.jqueryscript.net/demo/jQuery-Plugin-For-Stylish-Tabbed-Slider-Kiwi-Slider/javascripts/kiwi-slider.js
How do I modify this to suit the suggested solutions?
Use jQuery instead of the onclick attribute and use a function call something like this:
html:
Home
jQuery (Tested):
$('#onceClicked').click(function(e) {
$(this).text('You clicked me!');
});
An example page would be like this:
<!DOCTYPE html>
<html>
<head>
<title>Change Text</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
Link 1
Link 2
Link 3
Link 4
Link 5
<script>
$('.onceClicked').click(function(e) {
$(this).text('You clicked me!');
});
</script>
</body>
</html>
Here is a working example:
http://jsfiddle.net/q87dLoc1/
Although if you wish to add html and not just text you would change this:
$(this).text('You clicked me!');
to something like this:
$(this).html('<b>You clicked me!</b>');
Have you tried this:
Link 1
Do keep in my mind that this method may bite a possible return value of yourFunction().
For example, let's say this is the code:
<a href="index.html">
<img src="http://oi40.tinypic.com/aes9wo.jpg">
</a>
I know clicking on it doesn't redirect you anywhere, but if it did, how would you ensure that instead of redirecting you there, it would redirect you somewhere else, where you say it should?
For example, assume the code is an iframe or anything that cannot be touched. What can be done to catch the link it's directing you onclick, and either deny it, or just make the clickable option "unclickable" altogether?
Would you do something like:
<div onclick="window.location='http://google.ca'()" style="cursor:pointer">
<a href="index.html">
<img src="http://oi40.tinypic.com/aes9wo.jpg">
</a>
<div>
Using <div> HTML tag or Javascript, AND ASSUMING YOU CANT AMEND THE CODE GIVEN
Please and thank you!
Just change:
<a href="index.html">
to:
<a href="http://google.com">
or anywhere else you like. http://example.com/your-site/
Does that make sense? Or do you need something more specific?
Link to your full home page URL.
<a href="http://yoursite.com">
<img src="http://oi40.tinypic.com/aes9wo.jpg">
</a>