We Keep Coding

Chrome console: snippet command can't open dialog

I have a simple oneline snippet to "click" on a «load file» button on a visible page to call a dialog-popup (to load an image, for example).
this.document.getElementsByName("image")[0].click() // snippet code
While manual paste and run this line in console is successful (it opens the dialog), the above snippet can't do that. Seems like Chrome doesn't allow to open dialog not by user call. So, I set browser to allow all popups but there is no result.
Tested on different pages where file load button presents.
Thanks for any ideas.
A similar but different issue, solved

Seems like Chrome doesn't allow to open dialog not by user call.
I created a snippet to test if this statement is true. It seems like it is incorrect.
Click the Run Snippet button in this answer.
Open DevTools.
Click Inspect and click the image that says 350x150.
Evaluate document.querySelector('img').click() in the Console. The text below the image increments.
Run the same statement from a Snippet. The text still increments.
document.querySelector('img').addEventListener('click', () => {
let p = document.querySelector('p');
p.textContent = parseInt(p.textContent) + 1;
});
<img src="https://via.placeholder.com/350x150"/>
<p>0</p>
Possible solutions:
Make sure that you are in the correct Console context when you run the snippet. See Selecting Execution Context.
The use of this in your statement might be causing problems. Try removing it.
Try adding an ID to your element and then referencing it by its ID, rather than the getElementsByName array. So, use document.getElementById('myCustomId').click() instead. Make sure to add the ID to the HTML element, e.g. <img id="myCustomId" .../>. It's possible that you're referencing the wrong element, so that's why you're seeing the wrong result when you execute click().
Add comments to this answer and we'll eventually figure out what's going wrong.

Attaching an event listener for left or right click - onclick doesn't work for right click

I am currently applying for an Internship Internship Link
One of the things that I noticed right away is that you click on upload cover letter or paste cover letter, you're redirected to the home page of the job invite site Job Invite and sadly you can't upload your cover letter. On the other hand, the upload resume works perfectly fine but paste resume has the same issue.
Does anyone know how to resolve this issue and and be able to submit a cover letter?
I am not a web guru but since I am applying for an engineering position, I am trying to find a way around this. I right clicked the upload cover letter link and inspected the link with the inspect element tool. I found that this function
onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')
was going to get called when the button is clicked. Now going into the JavaScript file for this html page, Inspect Element -> Sources -> *careers_8.js?v=303, I tried to do a basic alert statement, from alert dialog, to do some debugging to see what the issue is. Here's the code now
function jvAddAttachment2(id, companyId){
alert("I got here");
....
}
I then did control s and the Inspect Element console outputted "Recompilation and update succeeded." so I am assuming the JavaScript file has been updated. However when I click the link(via right click, open new window), no alert box shows up. Does anyone know how to get the alert dialog to show up? I think I've done as much as I can with my working knowledge from one web development course haha.

You're looking for the contextmenu event for right click:
element.addEventListener('contextmenu', function() {
// code here
});
Please don't use inline js, like onclick in your html. The above sample is the proper way to attach event listeners.
You should get your element reference in javascript with var myElem = document.getElementById('the-id') or some similar function like document.querySelector, etc.
Then, you can easily attach both events like this:
// left click
myElem.addEventListener('click', myFn);
// right click
myElem.addEventListener('contextmenu', myFn);
If you're adamant to do this with inline js, that would be:
<div onclick="myFn()" oncontextmenu="myFn()"></div>
Full demo of both approaches for ya:
var myElem = document.getElementById('my-element');
myElem.addEventListener('click', myClickFn);
myElem.addEventListener('contextmenu', myClickFn);
function myClickFn() {
console.log('this is myClickFn!');
}
function someFn() {
console.log('this is someFn!');
}
<div id="my-element" onclick="someFn()" oncontextmenu="someFn()">Left or Right click me!</div>
Also, since you're wanting to pass parameters to the function you'll be calling on click, it is good to use an intermediary function for the event, and have that function call the other function, passing the parameters, like this:
function myClickFn() { // this is called on click
myOtherFunction('some', 'params');
}
That prevents you having to repeat the same function call, passing those same parameters in both places.

Make sure to close your onclick string at the end with a ":
onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')"
And left click instead of right clicking.

onclick="jvAddAttachment2('jvcoverletter', 'qLY9Vfwx')"
I think that double quotation was absent.
demo

Making an image an upload function without making it an input

I'm in a sticky situation. I'm trying to make an image an upload button, but I cannot change that image at all... however, when you click the image, I have it calling a JS function I can put anything into.
How can I launch an browser upload though this function alone? Normally I would just make the image an input, but like I said, in this case I cannot do that.
Does anyone have an example they could share?
Here's my function (which is called onclick of the image):
function fnImport(elem){
var $input;
$input = $input || $("<input type='file'>");
$('#Import').append($input);
$input.click();
$input.hide();
}
However, when I run it, on the first click it adds the button, then on second it acts as an upload (and doesn't hide in either).
In addition, I'm getting a strange as well in my console?

Something like this might spark some ideas for you: http://jsfiddle.net/NKekN/2/

How to prevent page's scroll position reset after DOM manipulation?

I've got two JS functions, one that is adding options to a select box
function addOption(selectId, text, value) {
var selectbox = document.getElementById(selectId);
var optNew = document.createElement('option');
optNew.text = text;
optNew.value = value;
try {
selectbox.add(optNew, null); //page position resets after this
}
catch(ex) {
selectbox.add(optNew);
}
}
and another that is doing a document.getElementById(formId).appendChild(newHiddenInput) in a similarly simple function.
They both work, elements are added as expected. However, upon calling either of them, the page resets its scroll position to the top of the page in both IE6 and FF. There is no postback, this is purely clientside manipulation. I've set breakpoints in Firebug, and it occurs immediately after the element.appendChild or select.add gets executed. I know I can use JS to manually set a scroll position, but I didn't think it was necessary when the page isn't being re-rendered.
I'm no expert with JS or the DOM, so I may very well be missing something, but I've looked here and ran through their examples with the Try it Here options and I can't replicate the problem, indicating the codebase I'm working with is the culprit.
Any ideas why the scroll position is being reset? jQuery is available to me as well, if it provides a better alternative.

If the functions are being called from a link you might have an internal anchor in your link:
http://www.website.com/page.html#
This is causing said behavior. The default behavior is that if an anchor does not exist, the page scroll position jumps to the top (scrollTop = 0).
If this happens on every function call regardless of the source, then this can be crossed off the list.

What is activating the event?
If it's an anchor then on the click event you need to "return false;" after the call to your jQuery/Ajax/jScript code.
If it's a button you may need to do the same.
I had this issue yesterday and this was the resolution.
So My link

Changing visibility does not immediately hide iFrame

I have a page that on a certain action makes an iframe visible and fills the iframe with some HTML (say for example a multi-select box and an ok button).
The OK button on the iframe has the onClick method defined kinda like this:
onClick="parent.hideIFrame();parent.processMultiSelectBox();"
When User clicks OK on the iframe (presumably after playing with the multi-select box), I'd like the iFrame to disappear immediately and then the selected values in the multi-select box can be processed. But this is not what's happening. The iFrame remains visible during the time the other function runs and disappears only after the second function finishes.
The hideIFrame function is pretty straightforward:
function hideIFrame() {
frmObj = document.all.iFrameID;
if(frmObj) {
frmObj.style.visibility = "hidden";
}
}
I've paraphrased the above function for clarity (removed some indicator variable assignments etc.)
The second function actually loops on all the options in the multi-select object and does stuff with it. This takes about a half a second and only after that is done, does my iFrame disappear. It is a little bothersome to see it linger for half a second when I click ok.
My question is whether there is some way I can make the darn thing disappear faster. Speaking in "classical C" lingo, is there a "flush" for the change in visibility to happen immediately?
I did notice that if I put an "alert" as the first line in my second function, the iframe disappears immediately but now it is the OK on the alert box that lingers for the time it takes the second function to finish.
Thanks.
EDIT: Based on DDaviesBrackett's answer, this is what I ended up doing:
The onclick in the iframe changed to:
onClick="parent.hideAndProcessMultiSelectBox(parm1, parm2);"
The hideAndProcessMultiSelectBox function was defined as:
function hideAndProcessMultiSelectBox( parm1, parm2 ) {
hideIFrame();
setTimeout( function() { processMultiSelectBox( parm1, parm2 ); }, 0 );
}
Voila.. no delay..

You've gotten to the root of your problem already; document reflow doesn't happen until the current JS thread is done (so as not to repaint lots of times during JS execution). You need to return control to the browser before doing your expensive processing.
The simplest way to achieve that, though it doesn't make for obvious code in the slightest, is to call processMultiSelectBox in a setTimeout with a delay of 0:
onClick="parent.hideIFrame();parent.setTimeout(parent.processMultiSelectBox,0);"
If you need to pass parameters to the thing you're setting a timeout on, you have two options: set a timeout on a string that evals to Javascript (bad, bad, very bad, horrible) or define an anonymous function that calls the one you're interested in:
onClick="parent.hideIFrame();parent.setTimeout(function(){parent.processMultiSelectBox(foo, bar, 'baz');},0);"
RSolberg's response may also help, though there's a difference between visibility:hidden and display:none.