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>
Related
I am trying to automate somethings on some website
It has textarea and send btn (it all automatically generated with vue.js if it is matters, and this website is not mine)
<textarea class="index_textarea_1O4S1 mb2"></textarea>
<btn disabled='disabled> <span>send </span> </btn>
I need to set some text to textarea and press this button
But this code doesn't work
document.querySelector('textarea').textContent = "hello there"
document.querySelector('button').click()
As you can see btn stays disabled
I tried to remove disabled attribute of btn, but doesn't help also
So I guess the best option is to try to send keypress event to textarea
How do I do it?
BTW I don't know why but jquery $ functions seems to work strange from console on this website, so vanilla js is preferable
Assuming I understand correctly,
When I have run into this problem in the past, it's because there is some event listener that I'm trying to trigger and the element I send the event to is either targeting the wrong event or the wrong element. You can use dev tools to try and isolate the desired event, and you can send an event by creating it manually instead of calling the .click method.
For example:
const txtArea = document.querySelector('textarea');
txtArea.textContent = "hello there";
const inputEv = new Event("input", { bubbles: true });
const keydownEv = new Event("keydown", { bubbles: true });
const keyupEv = new Event("keyup", { bubbles: true });
txtArea.dispatchEvent(inputEv);
txtArea.dispatchEvent(keydownEv);
txtArea.dispatchEvent(keyupEv);
document.querySelector('button')
.dispatchEvent(new Event("click", { bubbles: true });
creating the event this way lets you even trigger custom events, once identified, by changing the first argument passed to the new Event constructor, and triggers parent elements by setting the option bubbles to true.
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/
Wanna simulate a click on href element, but without redirect the page on browser. Actually without the user's knowledge. How can I achieve this?
Example:
var books = new Array();
$('p.tree_item_leaf').each(function(){
books.push($(this).find('a').attr('href'));
})
// for each book I wanna get the link and 'simulates' a click such that I can get the loaded content returned from the link in a variable
Thanks in advance!
Your remote click needs to be triggered somehow. In this example its being done by the click-this button
HTML:
<div class="myDiv" style="color: red;">Clicking this should open google even though this doesn't have an href</div>
<a class= "click-this" href="https://www.google.com">click this</a>
JS:
$(".myDiv").on("click mousedown mouseup focus blur keydown change", function(e) {
$link = $(".click-this");
console.log($link);
$(".click-this")[0].click();
});
jsFiddle: https://jsfiddle.net/0oecovtj/1/
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 can't seem to get this to work in JavaScript. I've tried using plain old JavaScript and also JQuery but nothing seems to work.
Here's my situation:
I have this PopUp "Panel" and in it I have a Button. The button has an event listener for click and I want that handler to fire off a custom event that the Panel will listen for. This is because I need to handle all the logic of the button click in the Panel.
Here's what I'm doing:
Before I launch the Panel I call a constructor for my "Class":
function PopUpStageAsssignmentTaker(content) {
PopUpStage.call(this);
this.allPagesAdded = false;
this.questionsCreated = [];// will be an array of pages that will be submitted
this.listLabel = null;
addAssignmentTakerParts.call(this);
this.popUpDiv.addEventListener("assignmentTakingSubmitEvent", handleAssignmentSubmit, true);
function handleAssignmentSubmit(event) {
alert("YESSS!");
}
}
This does quite a bit but just know that in the call to PopUpStage it creates the div that represents the Panel and saves that in this.popUpDiv. So I add a event listener to this.popUpDiv listening for some custom event that I'm making up.
Later on I have code that creates the content in the Panel and we have something like this:
SubmitQuestionTakingPage.prototype.makeContent = function(question) {
var questionWrapper = getQuestionWrapper();
var submitDiv = document.createElement("section");
submitDiv.innerHTML = "Pressing Submit will cause this Assignment to be submitted and you will be unable to make any changes after that. If this " +
"Assignment is automatically graded you will receive a Grade upon clicking submit. If this Assignment is not automatically submitted you must wait" +
" for the creator of this Assignment to assign you a Grade. To continue, please press Submit.";
submitDiv.setAttribute("class", "separatedSmaller");
questionWrapper.appendChild(submitDiv);
var submitButton = document.createElement("input");
submitButton.setAttribute("type", "submit");
submitButton.setAttribute("class", "fancyButton");
submitButton.addEventListener("click", handleSubmitButtonClick);
questionWrapper.appendChild(submitButton);
return questionWrapper;
};
function handleSubmitButtonClick(event) {
var event = document.createEvent("Event");
event.initEvent("assignmentTakingSubmitEvent", true, true);
window.dispatchEvent(event);
// $(this).trigger("assignmentTakingSubmitEvent");
}
So we create some content and in it we create a button that has a listener for click. In the click handler you can see how I fire off the event.
Problem: I'm reading that this does not work in IE under version 9+. What can I do in to make it work in all browsers? Is there a way?