On click event on HTML requires double click - javascript

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.

Related

how to give a link with functions on the href atribute in html

I am creating a following link in my web site
<a class="newimg forimgs " href="javascript:activateTab('newpost');javascript:mymodelII(newpostmesg);javascript:slidethecontent(contentinthetopicnewpost)" > New </a>
so when the user click on this link it changes the tab. How to change the link to something like this while the functions are still in the href attributes
file:///C:/Users/pavithra/Desktop/mysites/adminhome.html?newpost
You can use onClick() function of tag for functions execution and href for its link.
<a class="newimg forimgs " href = "file:///C:/Users/pavithra/Desktop/mysites/adminhome.html?newpost" onclick="javascript:activateTab('newpost');javascript:mymodelII(newpostmesg);javascript:slidethecontent(contentinthetopicnewpost)" > New </a>
Create a separated function for the hyperlink href, on its container.
<div class="hyperlink-container">
<script type="text/javascript">
function Go(){
(function(){
activateTab('newpost');
mymodelII(newpostmesg);
slidethecontent(contentinthetopicnewpost)
})();
} // this function will not affect another function because
// it's applied to one container (div), on its top
</script>
<a class="newimg forimgs" href="javascript:Go()">
New
</a>
</div>
You could use the onclick/onmouseover attributes or properties to call these functions also.

HTML page keeps reloading after click event

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

Href Javascript works on desktop but not on Mobile

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().

Loading a page Click the Anchor tag

Hi friends I am trying many ways to onloading the page click the anchor tag using jquery or JavaScript.
must see the rel attribute .
<div id="local">
<a id="fmp-button" href="#" rel="http://google.com">
click
</a>
</div>
<script>
//$('#fmp-button').trigger('click');
//$("a[href='#']").click();
//$('#fmp-button').click();
//$('#fmp-button')[0].click();
//$(function(){
// window.location.href = $('#fmp-button').attr('href');
//});
</script>
I am tried all the ways
Any one help me how to click the anchor tag when time of page loading anchor tag must be rel attribute
If you want to just change the page, then this will do:
window.location = $('#fmp-button').attr('rel');
I think you need to do
<div id="local">
<a id="fmp-button" href="http://google.com">
click
</a>
</div>
<script>
$(function(){
$('#fmp-button').click();
});
</script>
here's another way...
<div id="local">
<a id="fmp-button" href="#" rel="http://google.com">click</a>
</div>
<script src="//code.jquery.com/jquery.js"></script>
<script>
$(document).on('click', '#fmp-button' ,function() {
var url = $('#fmp-button').attr('rel');
window.location.replace(url);
});
</script>

Strange result in firefox14 of javascript

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".m").hide();
$("#home").show();
});
function f(id) {
$(".m").hide();
$(id).show();
}
</script>
</head>
<body>
HOME
HOME2
CONTACT
<div class="m" id="home">home</div>
<div class="m" id="home2">home2</div>
<div class="m" id="contact">contact</div>
</body>
In firefox14: Whenever I click on the first <a> it doesn't work and the page will be blank. But the others except the first <a>(i.e except home) work properly.
But in IE8, all of them work properly.
Why? What's the problem with my code? Is it my problem?
I want to have some kind of menu that the source of the other page (like contact, about us) are in one page, but they are hidden and by clicking on them, they will be visible.
That's because Firefox has defined the function window.home, so it will not refer to the element with id="home". The function is not defined in IE, that's why it's working there.
You shouldn't rely on the elements becoming global variables based on their id. Use a selector to find the elements:
HOME
HOME2
CONTACT
Alternatively, send the name of the id as a string into the function:
HOME
HOME2
CONTACT
and make the function use the string instead of an element:
function f(id) {
$(".m").hide();
$('#' + id).show();
}
Your function calls are all wrong, using undefined variables instead of strings.
Instead of
HOME
It should be
HOME
This has nothing to do with the browser type and version.
You can also change your markup to:
<a href="#home" class='anchors'> HOME </a>
<a href="#home2" class='anchors'> HOME2 </a>
<a href="#contact" class='anchors'> CONTACT </a>
and instead of HTML intrinsic attributes use jQuery click method.
$('.anchors').click(function(e){
e.preventDefault()
$('.m').hide()
$(this.href).show()
})

Categories