How to disable onclick of a class - javascript

I would like to know how to disable the onclick event of a certain class. I am aware that you can use the CSS pointer-events: none; however I would like for the hover events to still work, just onclick to be disabled.
Also how do I re-enable them later? For example:
if (document.getElementById('wuzi').backgroundColor == "green" ) {
//disable onclick
} else {
//enable onclick
}
Thank you

You can just add and remove the listener to 'click':
var wuzi = document.getElementById('wuzi');
if (wuzi.backgroundColor === "green" ) {
wuzi.removeEventListener('click');
} else {
wuzi.addEventListener('click', clickHandler);
}
where clickHandler is your function for handling the click.

You can try as below:
var element = document.getElementById('wuzi')
if (element .backgroundColor == "green" ) {
//disable onclick
element.onclick = '';
} else {
//enable onclick
}

I would suggest you to add CSS class instead of comparing backgroundColor, then check set disabled property based on class
var element = document.getElementById('wuzi');
element.disabled = element.classList.contains("foo");

try returning false onclick:
var element = document.getElementById('wuzi')
if (element .backgroundColor == "green" ) {
//disable onclick by returning false from onclick
element.onclick = return false;
} else {
//enable onclick or do some appropriate action
}

I hope this will helps you
if (document.getElementById('wuzi').style.backgroundColor === "green" ) {
//disable onclick
this.onclick=null
} else {
//enable onclick
this.onclick=my_function;
}
Just define your function as you want
function my_function()
{
alert('enable');
}

Related

function toggle - open all items

guys
I have a following HTML code with wrap (notice-wrap):
<div class="notice-title">
Title
</div>
<div class="notice-content">
Content text
</div>
<div class="notice-toggle" value="Hide" onclick="toggle()">
<img src="../img/icon_rollout.png">
</div>
And Toggle Script
function toggle() {
var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
$('.notice-toggle').val(newStatus);
if (newStatus == "Show") {
$("div.notice-content").css('overflow','hidden');
$("div.notice-content").css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
$("div.notice-content").css('overflow','visible');
$("div.notice-content").css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
When i'm clicking on the toggle, open once all the items. How to make the opening only that element which i choose?
P.S. I also use Angular
Thanks in advance!
Maybe you can just change this:
function toggle() {
var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
$('.notice-toggle').val(newStatus);
if (newStatus == "Show") {
$("div.notice-content").css('overflow','hidden');
$("div.notice-content").css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
$("div.notice-content").css('overflow','visible');
$("div.notice-content").css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
to:
function toggle() {
var noticeToggleElement = $(this);
var newStatus = noticeToggleElement.val() === "Hide" ? "Show" : "Hide";
noticeToggleElement.val(newStatus);
if (newStatus == "Show") {
noticeToggleElement.css('overflow','hidden');
noticeToggleElement.css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
noticeToggleElement.css('overflow','visible');
noticeToggleElement.css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
As you should have the context of the element you toggle on with the mouse click.
As you're using jQuery, should be better if you remove the onclick from the HTML tag and make the bind in your javascript code, on a function that is executed on document ready:
$(function(){
$('div.notice-content').click(toggle);
})
But this is just a plus.
What you should do first is move that styling from js to css,
and have additional variations of your classes, for example:
.notice-title--toggled {
...
}
.notice-content--toggled {
...
}
.notice-toggle--toggled {
...
}
Now you have good separation of concerns, and your toggle function could just toggle classes for those elements.
Also you should put this toggle click handler on document ready, so final result would be:
$(function) {
$('.notice-toggle').click(function() {
$('.notice-title').toggleClass('notice-title--toggled');
$('.notice-content').toggleClass('notice-content--toggled');
$('.notice-toggle').toggleClass('notice-toggle--toggled');
});
}

Javascript to trigger one function only if two events are both true

Say I want to activate myFunction only if the user has pressed the paragraph with a key and clicks on it. In the case below, the function will get triggered if any of the events is true.
<p id="p1" onClick="myFunction()" onKeyDown="myFunction()">
Text awaiting to be colored in red</p>
<script>
function myFunction(){
document.getElementById("p1").style.color = "red";
}
</script>
You need one extra variable isKeyDown, and isKeyDown should be set to true on keydown, and set to false on keyup.
And than in click callback check is isKeyDown true, call myFunction.
An example of how you could do it. This works with Enter and normally clicking it. Really you don't need to make p focus but I thought it was neat, even though you can still handle the key events from the document and since the click only registers on p there's nothing to worry about.
var p = document.getElementById('p1');
p.addEventListener('mousedown', function(e) {
p.clicked = true;
checkEvents(p);
});
p.addEventListener('mouseup', function(e) {
p.clicked = false;
});
p.addEventListener('keydown', function(e) {
if (e.keyCode === 13) {
p.enterDown = true;
}
});
p.addEventListener('keyup', function(e) {
checkEvents(p);
if (e.keyCode === 13) {
p.enterDown = false;
}
});
function checkEvents(el){
if(el.enterDown && el.clicked){
el.style.backgroundColor = 'red';
}
}
p:focus {
outline: none;
}
<p id="p1" tabindex='0'>
Text awaiting to be colored in red</p>
You'll need to breakdown into two methods. First is keystrokes->click and then click->keystrokes. I'm not sure if this is achievable on pure/vanilla javascaript. But on jquery it goes something like:
$('#p1' ).keydown(function() {
if($('#p1').click()) {
document.getElementById("p1").style.color = "red";
}
});
$('#p1')click(function () {
if($('#p1').keydown()) {
document.getElementById("p1").style.color = "red";
}
});

How to check button is clicked inside a function

My Scenerio:
I have a function:
The function Addprocedure() is called on onclick of Addprocedure button.
In this function i want to check if btnAddSelectedProcedures is clicked then do Something else do nothing
function Addprocedure(){
if()// Check if Button is clicked, button id = `btnAddSelectedProcedures`
{
//Do Something
}
else{
//Do nothing
}
}
Save the state of the button in a variable.
Define btnClicked globally as false. When btnAddSelectedProcedures is clicked, change btnClicked to true. When you call Addprocedure check if btnClicked variable is true and if so, that button has been clicked.
Example:
var btnClicked = false;
function Addprocedure() {
if (btnClicked) {
//Do something...
} else {
//Do something else...
}
}
$('BUTTON[name="btnAddSelectedProcedures"]').click(function() {
btnClicked = true;
});
$('BUTTON[name="Addprocedure"]').click(function() {
Addprocedure();
});
Try
$('#btnAddSelectedProcedures').click(function(){
$(this).data('clicked', true)
})
then
function Addprocedure(){
if($('#btnAddSelectedProcedures').data('clicked')){
//clicked
} else {
//not clicked
}
}
It is simple, check id
function Addprocedure(){
if(this.id === 'btnAddSelectedProcedures')// Check if Button is clicked, button id = `btnAddSelectedProcedures`
{
//Do Something
}
else{
//Do nothing
}
}
One possiblity,
You can declare a global variable and mark it as true when yourbtnAddSelectedProcedures clicked and use that to check in your Addprocedure() function.
var isButton1Clicked =false;
onButton1Click{
isButton1Clicked ==true
}
onButton2Click{
if(isButton1Clicked){
//procedd
}
}
I suggest to avoid using global var. Use a class instead ( or You can set data-* attribute as well )
$('#btnAddSelectedProcedures').on('click', function(){
//$(this).toggleClass('clicked');
if(! $(this).hasClass('clicked') ){ //allows you to set only once the class
$(this).addClass('clicked');
}
Addprocedure();
});
then
function Addprocedure(){
if( $("#btnAddSelectedProcedures").hasClass('clicked') ) //I guess you can call $(this) too
{
//Do Something
}
else{
//Do nothing
}
}
I used toggleClass because I think you want to check every time if the user clicked .
Use addClass in the other way.
<button id="1" onClick="Addprocedure(this.id)">B1</button>
and then
function Addprocedure(clicked_id)
{
alert(clicked_id);
}

How to enable on click after removing it?

I have two conditions here, cond1 and cond2 .If its the cond1 I will disable my onclick event, else I will enable it.
This is what I fished out :
if(cond1) {
document.getElementById('mTag').removeAttribute("onclick");
} else {
document.getElementById('mTag').setAttribute('onclick');
}
The problem is once the onclick gets disabled , its not getting enabled again. If its cond2 , then it must be enabled . What am I doing wrong? Kindly suggest some solution to this.
Why would you do that? This will be annoying user experience anyway. Better is to disable/enable the tag:
document.getElementById('mTag').disabled = cond1;
To prevent the click event, you have to prevent the event from bubbling upwards.
document.getElementById('mTag').onclick = function(e) {
if (!e) var e = window.event;
event.cancelBubble = !cond1;
...
};
You did it wrong. Removing the attribute doesn't unbind the event.
This is the right way:
document.getElementById("mTag").onclick = null;
you don't need to remove onclick attribute you can set a flag in your handler
var enable;
function myhandler() {
if (enable) {
//my code
}
}
if(cond1){
enable = false;
} else {
enabled = true;
}
I think it's better to set a flag, and check for that flag at the beginning of your handler:
function handler(event) {
if ( !this.flag )
return;
// do the actual handling
}

How to check/uncheck checkboxes by clicking a hyperlink?

I have 11 checkboxes with individual ids inside a modal popup.I want to have a hyperlink called SelectAll,by clicking on which every checkbox got checked.I want this to be done by javascript/jquery.
Please show me how to call the function
You could attach to the click event of the anchor with an id selectall and then set the checked attribute of all checkboxes inside the modal:
$(function() {
$('a#selectall').click(function() {
$('#somecontainerdiv input:checkbox').attr('checked', 'checked');
return false;
});
});
You can do like this in jquery:
$(function(){
$('#link_id').click(function(){
$('input[type="checkbox"]').attr('checked', 'checked');
return false;
});
});
If you have more than one form, you can specify form id like this:
$(function(){
$('#link_id').click(function(){
$('#form_id input[type="checkbox"]').attr('checked', 'checked');
return false;
});
});
This should work, clicking on the element (typically an input, but if you want to use a link remember to also add 'return false;' to prevent the page reloading/moving) with the id of 'selectAllInputsButton' should apply the 'selected="selected"' attribute to all inputs (refine as necessary) with a class name of 'modalCheckboxes'.
This is un-tested, writing on my phone away from my desk, but I think it's functional, if not pretty.
$(document).ready(
function(){
$('#selectAllInputsButton').click(
function(){
$('input.modalCheckboxes').attr('selected','selected');
}
);
}
);
$(function(){
$('#link_id').click(function(e){
e.preventDefault(); // unbind default click event
$('#modalPopup').find(':checkbox').click(); // trigger click event on each checkbox
});
});
function CheckUncheck(obj) {
var pnlPrivacySettings = document.getElementById('pnlPrivacySettings');
var items = pnlPrivacySettings.getElementsByTagName('input');
var btnObj = document.getElementById('hdnCheckUncheck');
if (btnObj.value == '0') {
for (i = 0; i < items.length; i++) {
if (items[i].type == "checkbox") {
if (!items[i].checked) {
items[i].checked = true;
}
}
}
btnObj.value = "1";
}
else {
for (i = 0; i < items.length; i++) {
if (items[i].type == "checkbox") {
if (items[i].checked) {
items[i].checked = false;
}
}
}
btnObj.value = "0";
}
}

Categories