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);
});
Related
I have this kind of structure
<button ng-click="something(1)">click!</button>
<div id="place"></div>
something() works in this situation, but if I try to make another button with innerHTML on a js code
str="<button ng-click=\"something(2)\">click 2!</button>"
document.getElementById("place").innerHTML = str;
thrn the 2nd button, the one created by innerHTML, apears normal, but doesn't call the function something() when clicked
Is there a nother way to add the button? the buttons should be generated proceduraly as the page runs
Thank you very much!
<script>
let btn = document.createElement("button");
btn.innerText = "click2"
// class
btn.classList = [];
// on click function
btn.onclick = () => {
}
document.getElementById("place").innerHTML = "";
document.getElementById("place").appendChild(btn)
</script>
I wanted to:
play the animation on my first click and
stop it on my second click of the same button.
Thanks.
Here is the simplest solution using closures, you should learn more on how closures work.
function generateMyStatefullFunction(){
var someState = false;
return function theActualFunctionThatDoesThings(){
if (someState){
console.log("State will be set to false, next click wont trigger this message");
}
someState = !someState;
}
}
var onClickHandler = generateMyStatefullFunction();
document.getElementById("button").addEventListener('click', onClickHandler);
<button id="button"> Fire every second click</button>
You can do like this
function performAction(event){
var button = event.currentTarget;
var action = button.innerHTML;
if(action == "Play"){
button.innerHTML = "Stop"
//play animation
} else {
button.innerHTML = "Play"
//stop animation
}
}
<div>
<button onclick="performAction(event)" >Play</button>
</div>
I am trying to make a function that would allow me to toggle eventListener of an element.
In the example below, I have three buttons: main, on and off. When I click on the on button, the main button becomes functional. After I click off button, the main button should not work anymore (but now it still does).
Now I can achieve a desired behavior by clicking on button for the second time, but I guess it's a bad coincidence and it's not supposed to work that way.
Maybe I should add that I would like to work this out without using jQuery or similar and it needs to be a function, because I am going to use it for a lot of buttons.
(I suspect something with scope causes the problem (clickHandler when calling the function to activate the button is not the same as the clickHandler when calling the function to disable the button), but I can't think of a way to test it.)
// buttons definitions, not important
var mainButton = document.querySelector("#mainButton");
var onButton = document.querySelector("#onButton");
var offButton = document.querySelector("#offButton");
// main function
var toggleButtons = function(toggleVal, button, element) {
var activateButton, clickHandler, disableButton;
// callback function for listener bellow
clickHandler = function() {
document.querySelector(element).classList.toggle("yellow");
};
activateButton = function() {
button.addEventListener("click", clickHandler);
};
disableButton = function() {
button.removeEventListener("click", clickHandler);
};
// when first argument is 1, make the button functional, otherwise disable its functionality
if (toggleVal === 1) {
activateButton();
} else {
disableButton();
}
};
// when onButton is clicked, call main function with arguments
// this works
onButton.addEventListener("click", function() {
toggleButtons(1, mainButton, "body");
});
// this fails to disable the button
offButton.addEventListener("click", function() {
toggleButtons(0, mainButton);
});
.yellow {
background-color: yellow;
}
<button type="button" id="mainButton">mainButton
</button>
<button type="button" id="onButton">onButton
</button>
<button type="button" id="offButton">offButton
</button>
<p>mainButton: toggles background color on click
</p>
<p>onButton: turns on mainButtons's functionality</p>
<p>offButton: supposed to turn off mainButton's functionality</p>
var mainButton = document.querySelector("#mainButton");
var onButton = document.querySelector("#onButton");
var offButon = document.querySelector("#offButton");
var element; // declare the element here and change it from toggleButtons when needed.
function clickHandler() {
document.querySelector(element).classList.toggle('yellow');
}
function activateButton(button) { // You missed this part
button.addEventListener('click', clickHandler);
}
function disableButton(button) { // You missed this part
button.removeEventListener('click', clickHandler);
}
function toggleButtons(value, button) {
if (value === 1) {
activateButton(button); // You missed this part
} else {
disableButton(button); // You missed this part
}
};
onButton.addEventListener('click', function() {
element = 'body'; // you can change it to some other element
toggleButtons(1, mainButton);
});
offButton.addEventListener('click', function() {
element = 'body'; // you can change it to some other element
toggleButtons(0, mainButton);
});
Below code helps to toggle between two functions from an eventListener:
var playmusic=false;
function playSound() {
const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
audio.currentTime = 0
audio.play()
playmusic=true;
}
function stopSound() {
const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
audio.pause()
playmusic=false;
}
window.addEventListener('keydown',
function(){playmusic?stopSound():playSound()} )
I tried to disable my button with an onClick function using this:
document.getElementById("btn").onClick = null;
How can I reenable it back again?
example:
if(some condition)
document.getElementById("btn").onClick = null;
else
//reenable it again
Try like this
disable
document.getElementById("btn").disabled=true;
enable
document.getElementById("btn").disabled=false;
Simple way is that save old onclick's method to value (tempFn). Then you can reenable again.
var tempFn;
document.getElementById("btn2").onclick = function () {
if (!tempFn) {//some condition
tempFn = document.getElementById("btn").onclick;
document.getElementById("btn").onclick = null;
} else {
document.getElementById("btn").onclick = tempFn;
tempFn = null;
}
}
document.getElementById("btn").onclick = function () {
alert("btn");
}
<button id="btn">btn</div>
<button id="btn2">Disable/Enable</div>
You can do it with jquery
$(function(){
if(smth){
//Set button disabled
$("#btn").attr("disabled", "disabled");
}else{
$("#btn").removeAttr("disabled");
}
Sorry for mistakes - my first post. I'd like to click on the 'Try it' button and change the type of the first 'ok' input. After this change I'd like to click the 'Try it' button again and change the type of the element with id="inputt" to INPUT again. I think it's sth wrong with the range of my variable done which tells if i have 2 buttons or input and button.
//JS
window.onload = function Load(){
var done = false;
var foo = document.getElementById('g');
if(!done){
foo.onclick = Change1;
}else{
foo.onclick = Change2;
}
};
function Change1(){
inp = document.getElementById('inputt');
inp.setAttribute('type', 'button');
done = true;
}
function Change2(){
but = document.getElementById('inputt');
but.setAttribute('type','input');
}
//HTML
<input value="ok" id="inputt">
<p>Click the button below to set the type attribute of the button above.</p>
<button id="g">Try it</button>
The window.onload event is not going to get executed again, it only happens once when the window...loads
see if this is what you want.
http://jsfiddle.net/7W4Xw/1/
//JS
window.onload = function Load(){
var foo = document.getElementById('g');
foo.onclick = Change1;
};
function Change1(){
inp = document.getElementById('inputt');
inp.setAttribute('type', 'button');
var foo = document.getElementById('g');
foo.onclick = Change2;
}
function Change2(){
but = document.getElementById('inputt');
but.setAttribute('type','input');
}