Every time I try to add an onclick event to a newly created button, the event seems to get triggered before the button is even pressed. Here is how I've been trying to go about it:
var que = document.createElement("BUTTON");
var text = document.createTextNode("Question1");
que.appendChild(text);
document.body.appendChild(que);
que.setAttribute("onclick", function1());
Each time function1() is run before I even have a chance to press the button. Does anyone have any ideas of why?
Try this:
que.setAttribute("onclick",function() {function1();})
or this:
que.onclick = function() {function1();}
It should be que.setAttribute("onclick", "function1()");
See fiddle: https://jsfiddle.net/free_soul/L5s1x1nz/
Related
I made this eventlistener function in JS:
document.addEventListener("keydown", function(event) {
if (event.code == "KeyA") {
let audioA = new Audio("https://docs.google.com/...");
audioA.currentTime = 0;
audioA.play();
}
Now I wanted to add changes in style too, but I have no idea how to add these changes, nothing seems to work. I tried *classname*.style.backgroundColor = "red"; after the "audioA.play()", but nothing changed. I also tried to keep the class "playing" (which should be the result of pressing the button) visible and make in invisible in JS BEFORE pressing the button, but this was also not working, the style was still "playing". How can I add the "playing" changes to my existing code? The sound's working perfectly.. Thanks for your help.
Assuming you have a button
<button id='playbutton' className='myclass'>play</button>
to set the background color you need to get the element first
by using an id
document.getElementById('playbutton').style.backgroundColor = 'red'
or the classname
document.getElementsByClassName('myclass')[0].style.backgroundColor = 'red'
there is a lot of ways to get a DOM element
note: you might want to use onClick on the button instead of using an event listener
I want to click a button (see attached) with javascript, in chrome console, but it doesn't work. I tried with ID and Class but no chance. If I want to click on an a element on the same site it's working fine with both lines..
What I tried:
document.getElementById('account-settings-save-button').click()
document.getElementsByClassName('btn-progress btn btn-primary icon-btn icon-right IDLE null')[0].click()
Sometimes click won't work for example if you use it on <a> tags it won't trigger link. You can try using MouseEvent API to simulate click event.
Here you can find nice example How to simulate a click event with vanilla JavaScript
In short, what you can try doing is:
//From the example above
var simulateClick = function (elem) {
// Create our event (with options)
var evt = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
});
// If cancelled, don't dispatch our event
var canceled = !elem.dispatchEvent(evt);
};
var buttonToClick = document.getElementById('account-settings-save-button');
simulateClick(buttonToClick);
var buttonToClick = document.getElementById('account-settings-save-button');
simulateClick(buttonToClick);
I solved it. This website is using vue. So the command is:
document.getElementById('account-settings-save-button').__vue__.onClick();
Sorry this question wasn't able to be answered by you.
What do you want to do when this button clicked. You must say onclick="your_code_here"
Working example fiddle: here
<button
id="account-settings-save-button"
onclick="alert('click event occured')">
BUTTON
</button>
Is there any way in Javascript or jquery using which we can internally click the "Delete" button to delete some text in HTML web pages?
I don't want my users to click the "Delete" button physically but I want to give them interface where when they click I will apply the "Delete" button functionality there.
You can trigger it using the keydown function:
$(function(){
var press = jQuery.Event("keyup");
press.ctrlKey = false;
press.which = 46;
$('#check').keyup(function(e){
alert(e.which);
}).trigger(press);
});
But this solution does NOT simulate a natural keypress event on the HTML element. This method only triggers the keyup event, it does not replicate the user going into the element and pressing that key. For doing that you can refer HERE.
But this dispatch event is also not globally supported.
I think applying the functionality of delete button on click of button can fullfill your requirement
Just write $("input").val("") on click of button or follow the answer of #haxxton given above, OR SEE DEMO HERE
Further to my comment on the OP.
Assuming your HTML looks something like
<p id="deleteMe">This text should be deleted</p>
<button id="deleteButton">DELETE</button
Option 1
if your intention is to remove the entire text of an element you could use
var deleteButton = document.getElementById('deleteButton');
deleteButton.onclick = function(){
var deleteItem = document.getElementById('deleteMe');
deleteItem.innerHTML = '';
}
Option 2
However, if it is your intention to only remove one character per click you could use something like
var deleteButton = document.getElementById('deleteButton');
deleteButton.onclick = function(){
var deleteItem = document.getElementById('deleteMe');
deleteItem.innerHTML = deleteItem.innerHTML.substring(0, deleteItem.innerHTML.length - 1);
}
Please visit : Is it possible to simulate key press events programmatically?
you can use the keycode as 46 insetead of
character.charCodeAt(0)
Call internally to a event is simple with jQuery:
$('#delete').click(); // call internally to 'Delete' button
It launchs the click event which contains your delete functionality.
See a demo more complete: http://jsfiddle.net/581env0c/2/
I am trying to restrict the user from clicking on a button multiple times. They can click on the button once when the page loads. If the page is reloaded the same should apply the user can click on the button only once.
I am using the following code however it doesn't seem to work for me
$("#doAccess").click(function() {
$("#doAccess").removeAttr('onclick');
DoSave();
});
Disable the button after it's been clicked
var accessBtn = $('#doAccess');
accessBtn.click(function() {
accessBtn[0].disabled = true;
DoSave();
});
Sounds like what you really need is:
$("#doAccess").one('click', DoSave);
jsFiddle example
.one() - Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
Why not this?
$("#doAccess").once('click', function() {
DoSave();
});
You should probably also gray out or disable #doAccess, whatever it is.
i am programming in java script to set two button in Gmail page.
i have done it.In that button click event,i have to insert some content.
button creation code:
var btnEncrypt=document.createElement('input');
btnEncrypt.type='button';
btnEncrypt.value='Encrypt';
btnEncrypt.id='btn11';
var btnDecrypt=document.createElement('input');
btnDecrypt.type='button';
btnDecrypt.value='Encrypt';
btnDecrypt.id='btn10';
and the onclick function is,
btnEncrypt.onclick = function()
{
className1 = document.getElementsByClassName('aa')[0].innerHTML;
};
btnDecrypt.onclick = function()
{
className1 = document.getElementsByClassName('bb')[0].innerHTML;
document.getElementsByClassName('bb')[0].innerHTML=decodeData;
};
in first time, i would click the both btnEncrypt and btnDecrypt button it will correctly triggered btnEncrypt.onclick and btnDecrypt.onclick.But again i click the btnDecrypt button are not invoked.
i remove each line from that onclick and check,after i got the problem.
document.getElementsByClassName('bb')[0].innerHTML=decodeData;
using the above line in buttonclick,hereafter only btnDecrypt and btnEncrypt not invoked.
note:both buttons are placed in that bb class using like bb.appendchild(buttons)
How can i resolve that?
Thank u.