Develop Reference

why remove class not working in javascript?

I have tried this before and it worked well but here i dont know...
<div onclick="choose(this)">
<div class="choose">
<button><a>click</a></button>
</div>
</div>
my JavaScript:
function choose(obj) {
obj = obj || document.activeElement;
var res_item = obj.querySelector(".choose");
res_item.classList.add("choosed_item");
var close = obj.querySelector(".choose button a");
close.addEventListener("click", function closemodal() {
if (res_item.classList.contains("choosed_item")) {
res_item.classList.remove("choosed_item");
}
});
}
choose and choosed_item have custom style
This is strange, but if i change remove to add and choose another class it works well !

The event is not updated because its child of onclick function. Thats why I integrated an interval. That will help to update the eventlistener:
function choose(obj) {
obj = obj || document.activeElement;
var interval;
var res_item = obj.querySelector(".choose");
res_item.classList.add("choosed_item");
var close = obj.querySelector(".choose button a");
close.addEventListener("click", function closemodal() {
if (res_item.classList.contains("choosed_item")) {
interval = setInterval(function () {
res_item.classList.remove("choosed_item");
stopInterval();
}, 0);
function stopInterval() {
clearInterval(interval);
}
}
});
}
Hope I could help!

Change image of button when pressed, using javascript

I am trying to set a value in variable when a specific button is pressed. I want this button to be in pressed state when i again reload the page. I am trying to check the value of variable in pageloaded function but i don't know that how can change the state of button in javascript. Pls help

HTML:
<button onclick="changeit()"><img src="bla.jpg" id="changevalue"></button>
JS:
function changeit(){
document.getElementById("changevalue").src = "newimg.jpg";
}

HTML:
<button id="myButton"><img src="myImage.jpg" id="myImage"></button>
JS:
var NEW_IMAGE_URI = "myNewImage.jpg";
var buttonState = false;
function changeButtonImage(){
if (buttonState) {
return;
}
document.querySelector("#myImage").src = NEW_IMAGE_URI;
buttonState = true;
}
document.addEventListener("DOMContentLoaded", function(event) {
var buttonElement = document.querySelector('#myButton');
buttonElement.addEventListener('click',changeButtonImage);
});

In Javascript, how can I prevent the second function from running unless the first function has been invoked?

This has probably been covered before, but what I'm seeing online is confusing, or at least too advanced for a beginner like myself. Here's an example....
var funcA = function() {
alert("Button A has been pressed");
};
var funcB = function() {
if (funcA === false){
alert("press Button A");
}
else{
alert("Button B has been pressed");
}
};
var buttonA = document.getElementById('button1');
buttonA.onclick = funcA;
var buttonB = document.getElementById('button2');
buttonB.onclick = funcB;
If I click on Button A or Button B in any order, they work; but I don't want Button B to work unless Button A has been clicked first. With the code I have now, the if statement in funcB never runs, but the else statement always runs.

I might create a variable that would effectively function as a switch that you hit when you run function A. :
var funcAPressed = false;
var funcA = function() {
alert("Button A has been pressed");
funcAPressed = true;
};
var funcB = function() {
if (funcAPressed === false){
alert("press Button A");
}
else{
alert("Button B has been pressed");
}
};
var buttonA = document.getElementById('button1');
buttonA.onclick = funcA;
var buttonB = document.getElementById('button2');
buttonB.onclick = funcB;

The code block inside the following if statement will never run because funcA is not a boolean, it is a function that has no return value.
if (funcA === false){
alert("press Button A");
}
What you can do however is just declare a boolean that serves as a flag, like so:
(function() {
let called = false;
var funcA = function() {
called = true;
alert("Button A has been pressed");
};
var funcB = function() {
if (!called) {
alert("press Button A");
} else {
alert("Button B has been pressed");
}
};
var buttonA = document.getElementById('button1');
buttonA.onclick = funcA;
var buttonB = document.getElementById('button2');
buttonB.onclick = funcB;
})();
<button id="button1">button 1</button>
<button id="button2">button 2</button>

This could be dirty but can work `
var count = 0;
function funcA(){
count = 1;
}
function funcB(){
if(count == 1){
alert("OKAy!")
}else{
alert("Press Button A");
}
}
<button id="a" onclick="funcA();">A</button>
<button id= "b" onclick="funcB();">B</button>
`

I think you have already got the answer but just to add that when you do:
var funcA = function() {
alert("Button A has been pressed");
}
And later check:
if (funcA === false){
alert("press Button A");
}
Then funcA will not be false. The reason is that you have assigned a function object to funcA variable and hence it is truthy. It doesn't represent the fact that button1 has been pressed earlier or not. Javascript is different from other classical languages and hence in javascript function can be assigned to a variable. Hope it helps you learn the language better!

Just change Button B's behavior in the click handler of button A:
document.getElementById('a').onclick = () => {
alert("Button A has been pressed");
document.getElementById('b').onclick = () => {alert("Button B has been pressed") };
}
document.getElementById('b').onclick = () => { alert("press Button A") };
<button id="a">a</button>
<button id="b">b</button>

How can I disable window.onbeforeunload using jQuery class click function?

I want to make a button that toggles a new class when it's clicked, then when that new class is clicked, it sets goAway to true. Here's what I'm using, does anyone notice something that would prevent this? It works in all other onclick functions that have the line: goAway = true;
var goAway = false;
$("button:not(.MyNewClass)").click(function(){
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
$(document).ready(function() {
$('.MyNewClass').click(function() {
goAway = true;
});
});
I have also tried this below, but neither seem to work...
var goAway = false;
$("button:not(.MyNewClass)").click(function(){
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
$(document).ready(function() {
$('.MyNewClass').click(function() {
window.onbeforeunload = null;
});
});

You can try either one of this.
First one:
$(window).unbind('onbeforeunload');
Second one:
window.onbeforeunload = false;
I hope this works for you.
Update:
I noticed you placed onbeforeunload function inside click function.
Once try by placing this function out side of click function.
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}

Finally! I figured it out. Attached a JavaScript onClick event to the element set to toggle with jQuery ;)
The html button:
<button onclick="removeWarning()">This is the button</button>
Then the rest:
<script>
var goAway = false;
$("button").click(function(){
$(this).toggleClass('MyNewClass');
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
function removeWarning(){
if ($("button").hasClass('MyNewClass')){
goAway = true;
}
}
</script>

disable function using javascript

I can not seem to find the code to disable a javascript function. What I want to do is have a javascript function and then I want to disable it. Here is the code:
<script>
var fooFunc = function fooFunction() {
alert("HELLO");
};
$(document).ready(function() {
fooFunc.disable();
});
</script>
<button onclick="fooFunc()">Button</button>
Basically, when the button is click the function should not work, it should be disabled. Thanks

"Disabling" fooFunc is the same as setting it to an empty function (not to null--that will cause an error when it is called the next time). In this case:
$(document).ready(function() {
fooFunc = function() { };
});
But I don't see how this is different from simply removing the onclick handler from the HTML element.
If you want the ability to disable/re-enable the function, you can write it like this:
fooFunc = function() {
function _fooFunc() {
if (!enabled) return;
alert("HELLO");
}
var enabled = true;
_fooFunc.enable = function() { enabled = true; };
_fooFunc.disable = function() { enabled = false; };
return _fooFunc;
}();
If you want to extend this to allow any function to be enabled/disabled, you can write a higher-order function, which takes any function as a parameter, and returns a function with enable and disable methods attached to it:
function disablable(fn) {
function inner() {
if (!enabled) return;
fn();
}
var enabled = true;
inner.enable = function() { enabled = true; };
inner.disable = function() { enabled = false; };
return inner;
}
Now you can define fooFunc as
var fooFunc = disablable(function fooFunction() {
alert("HELLO");
});
and the rest of your code will work as you want.

You can access the onclick property of the element..
<button id="id" onclick="fooFunc()">Button</button>
<script>
document.querySelector('#id').onclick = '';
</script>

If you don't want the function to work at all and be totally disabled then use the below.
If you want the function to work only under certain conditions then you will need if/else statements so it will work only when the conditions that you have set are met.
$(document).ready(function(){
$("button").onclick(function(event){
event.preventDefault();
});
});

You were going to define it back to undefined or null.
fooFunc=undefined;

You Should be doing this :) Change function definition on very first run and you are good to go.
<! DOCTYPE html>
<html lang="en">
<body>
<script>
var fooFunc = function() {
alert("HELLO");
fooFunc = function(){};
};
var enablefooFunc = function()
{
fooFunc = function() {
alert("HELLO");
fooFunc = function(){};
};
}
</script>
<button onclick="fooFunc()">Run once and Disable FooFunc</button>
<button onclick="enablefooFunc()">Enable FooFunc</button>
</body>
</html>