I'm trying to call OnClick() on a file input field but the window for selecting the file doesn't appear. I tried the same on Chrome and Edge and it works perfectly.    var input = document.createElement('input'); input.setAttribute('id', 'InputField'); input.setAttribute('type', 'file'); input.setAttribute('accept', 'image/*');  input.style.visibility = 'hidden'; input.onclick = function() {   console.log('File loading clicked'); }; input.click()     PS: in the 'duplicated' i didn't finded any working functions, probably because the answers are from 7 years ago.
9012
I'd like to make a click event fire on an &lt;input type="file"&gt; tag programmatically.  Just calling click() doesn't seem to do anything or at least it doesn't pop up a file selection dialog.  I've been experimenting with capturing events using listeners and redirecting the event, but I haven't been able to get that to actually perform the event like someone clicked on it.
49974
How can you reliably and dynamically load a JavaScript file?  This will can be used to implement a module or component that when 'initialized' the component will dynamically load all needed JavaScript library scripts on demand.  The client that uses the component isn't required to load all the library script files (and manually insert &lt;script&gt; tags into their web page) that implement this component - just the 'main' component script file.  How do mainstream JavaScript libraries accomplish this (Prototype, jQuery, etc)?  Do these tools merge multiple JavaScript files into a single redistributable 'build' version of a script file?  Or do they do any dynamic loading of ancillary 'library' scripts?  An addition to this question: is there a way to handle the event after a dynamically included JavaScript file is loaded?  Prototype has document.observe for document-wide events. Example:  document.observe("dom:loaded", function() {   // initially hide all containers for tab content   $$('div.tabcontent').invoke('hide'); });   What are the available events for a script element?
113150
I'm making an HTML 5 game. I want mouse clicks on sprites drawn in a canvas element cause events that my code can react to. At the moment, I'm doing it by checking through all of my sprites in a for-loop on each click.  Is there a way to do that by adding an event listener to a sprite so it would respond just like that?  Are Javascript's custom events useful in this situation? I know it's possible with KinectJS, but I don't have any experience with it and really I'd like to learn how to do this myself without the help of a library.
66978
I have got a problem with JavaScript. I want to add a drop down list control with a link as Value of it. After it will be choosen and clicked button it schould redirect me to chosen link. I tried this code from this Article:       &lt;select name="list" id="list" accesskey="target"&gt;     &lt;option value='none' selected&gt;Choose a theme&lt;/option&gt;     &lt;option value="index.html"&gt;Theme 1&lt;/option&gt;     &lt;option value="theme2.html"&gt;Theme 2&lt;/option&gt;     &lt;option value="theme3.html"&gt;Theme 3&lt;/option&gt; &lt;select&gt; &lt;input type=button value="Go" onclick="goToNewPage()" /&gt;  &lt;script type="text/javascript"&gt; function goToNewPage() {     var url = document.getElementById('list').value;     if(url != 'none') {         window.location = url;     } }     but when I tried to add by the script, or by html on site, or by designer its erase me that sort of text:  &lt;input type=button value="Go" onclick="goToNewPage()" /&gt;   It's live only:  &lt;input type=button value="Go" /&gt;
113059
LWC rookie here, How can we call a JavaScript function from LWC? For example I have the following static resource helloWorld.js and I'll like to use and call the function in the file. How can I accomplish this?   JavaScript file:      function helloWorld(name) {         let hello = 'Hi ' + name;         return hello     }   LWC controller:   import { LightningElement, track, api } from "lwc";  import helloWorld from "@salesforce/resourceUrl/helloWorld";  import { loadScript } from "lightning/platformResourceLoader";   export default class testLwc extends LightningElement {    @track message;    renderedCallback() {     Promise.all([loadScript(this, helloWorld)])       .then(() =&gt; {         this.error = undefined;         // Call back function if scripts loaded successfully         console.log('load correctly')       })       .catch(error =&gt; {        });   }    handleOnChange() {        //how can I do something like this below ?      this.message = window.helloWorld('test');     }   Thank you
95602
How can I add an application to the Open With menu (shown after right-clicking) for a given file type, without making that file always open with that application?  In this specific instance, I'd like to the option to open an Web site location (.URL) file with TextEdit, while still defaulting to Safari.    I'm running OS 10.7.4.
29988
I have a problem with an object I have created that looks something like this:  var myObject = {      AddChildRowEvents: function(row, p2) {         if(document.attachEvent) {             row.attachEvent('onclick', function(){this.DoSomething();});         } else {             row.addEventListener('click', function(){this.DoSomething();}, false);         }     },      DoSomething: function() {         this.SomethingElse(); //&lt;-- Error here, object 'this' does not support this method.     } }   The problem is that when I am inside the 'DoSomething' function, 'this' does not refer to 'myObject' what am I doing wrong?
39132
I created a custom button for custom object to place in the related list. The custom object has two look-ups, one for case and one for account. This button, when clicked, should open in a new window to save a record of the custom object, with the default values for each look-up to populate automatically depending on the record where the button was clicked. It works for every record so far, except one case. It then throws the error: A problem with the Onclick Javascript for this button or link was encountered: Unexpected identifier.  I couldn't find any differences between records where it works and doesn't.  Code:  window.open('a2U/e?CF00N600000037HI4={!Account.Name}&amp;CF00N600000037HI4_lkid={!Account.Id}&amp;retURL=%2F{!Account.Id}&amp;CF00N600000037HI5={!Case.CaseNumber}&amp;CF00N600000037HI5_lkid={!Case.Id}&amp;retURL=%2F{!Case.Id}','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=yes,location=yes,status=yes');
24449
The JFileChooser seems to be missing afeature: a way to suggest the file name when saving a file (the thing that usually gets selected so that it would get replaced when user starts typing).  Is there a way around this?
3635
How do you style an input type="file" button?
75034
I have an input form that lets me select from multiple options, and do something when the user changes the selection. Eg,  &lt;select onChange="javascript:doSomething();"&gt;   &lt;option&gt;A&lt;/option&gt;   &lt;option&gt;B&lt;/option&gt;   &lt;option&gt;C&lt;/option&gt; &lt;/select&gt;   Now, doSomething() only gets triggered when the selection changes.  I want to trigger doSomething() when the user selects any option, possibly the same one again.  I have tried using an "onClick" handler, but that gets triggered before the user starts the selection process.  So, is there a way to trigger a function on every select by the user?  Update:  The answer suggested by Darryl seemed to work, but it doesn't work consistently. Sometimes the event gets triggered as soon as user clicks the drop-down menu, even before the user has finished the selection process!
29272
The dialog above is created with the code below. When I click on the file icon (see red arrow), nothing happens. Is there a proper way to get these to just work or at least point to a custom operator which invokes context.window_manager.fileselect_add(self) or something similar?  It really seems like the functionality I want should be built into the StringProperty when using FILE_PATH as a subtype... I must be missing something obvious.  What I am trying to do is execute a single operation that requires selecting more than one file path. I can invoke 2 fileselect_add's one after the other, but it becomes confusing because right when you click to accept the path the new path window opens immediately. It is just too confusing as to which one is being selected as there is really no way to customize the fileselect_add window to any usefull degree (as far as I am aware) to make it more obvious what the user is selecting.  Dialog code:  class mydialog(bpy.types.Operator):         bl_idname = "tools.mydialog"         bl_label = "My Dialog"          inFilePath = StringProperty(name="input file", subtype="FILE_PATH")         outFilePrefix = StringProperty(name="out prefix", subtype="FILE_PATH")      def invoke(self, context, event):         return context.window_manager.invoke_props_dialog(self)      def execute(self, context):         print(self.inFilePath)         print(self.outFilePrefix)         return {'FINISHED'}
115027
Looking for a quick and dirty way to automate . I presume this could be done with an automation to press the mouse button from two separate pixel coordinates, with delay, so long as the browser window doesn't move -- unless there's a better way.  I tried building a Watch Me Do workflow, in Automator, but can't seem to get it to work.  I get the error "application Chrome is not running when it is expected to." It also never lists mouse clicks for some reason.  I do have accessibility set up, in system preferences > security &amp; privacy > privacy > accessibility.  Automator, Chrome and System Events are all checked within there (among other stuff of course).  I tried the markashworth workaround as detailed  -- which also doesn't seem to work. Using his method, I get this error:    UPDATE: I just downloaded "cliclick" and figured out how do both clicks as a terminal command, with the proper delays.  BUT -- I don't know code and need a way for this terminal command to repeat "x" amount of times.  Anyone know how I could do that in Script Editor?  The command line is:  cliclick c:132,286 w:100 c:132,286 w:5000 c:1100,238   I would need a few seconds of delay before the loop repeats, which I presume I could do with a final "w:" in that line.  Thanks for the help!!
2912
Occasionally, I've come across a webpage that tries to pop open a new window (for user input, or something important), but the popup blocker prevents this from happening.  What methods can the calling window use to make sure the new window launched properly?
12181
Is there a best-practice or common way in JavaScript to have class members as event handlers?  Consider the following simple example:  &lt;head&gt;     &lt;script language="javascript" type="text/javascript"&gt;          ClickCounter = function(buttonId) {             this._clickCount = 0;             document.getElementById(buttonId).onclick = this.buttonClicked;         }          ClickCounter.prototype = {             buttonClicked: function() {                 this._clickCount++;                 alert('the button was clicked ' + this._clickCount + ' times');             }         }      &lt;/script&gt; &lt;/head&gt; &lt;body&gt;     &lt;input type="button" id="btn1" value="Click me" /&gt;     &lt;script language="javascript" type="text/javascript"&gt;         var btn1counter = new ClickCounter('btn1');     &lt;/script&gt; &lt;/body&gt;   The event handler buttonClicked gets called, but the _clickCount member is inaccessible, or this points to some other object.  Any good tips/articles/resources about this kind of problems?
103418
HTML  more code here...  &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="https://example.com/sites/all/modules/ac_modules/ac_exercise/ac_exercise.js?nkuo2r"&gt;&lt;/script&gt;   more code here...  &lt;div class="form-item form-type-textfield form-item-time-start"&gt;   &lt;label for="edit-time-start"&gt;Time Start &lt;/label&gt;  &lt;input type="text" id="edit-time-start" name="time_start" value="11:28:12" size="4" maxlength="8" class="form-text" /&gt; &lt;/div&gt;   more code here...  Javascript - ac_exercise.js  $(document).ready(function(){    $("#edit-time-start").on("change paste keyup", function() {      alert($(this).val());    }); });   In Chrome's console I get the following error: Uncaught TypeError: undefined is not a function - ac_exercise.js?nkuo2r:1 which is this line of code:  $(document).ready(function(){
76419
I'm using jQuery to hide and show elements when a radio button group is altered/clicked. It works fine in browsers like Firefox, but in IE 6 and 7, the action only occurs when the user then clicks somewhere else on the page.  To elaborate, when you load the page, everything looks fine. In Firefox, if you click a radio button, one table row is hidden and the other one is shown immediately. However, in IE 6 and 7, you click the radio button and nothing will happen until you click somewhere on the page. Only then does IE redraw the page, hiding and showing the relevant elements.  Here's the jQuery I'm using:  $(document).ready(function () {   $(".hiddenOnLoad").hide();    $("#viewByOrg").change(function () {     $(".visibleOnLoad").show();     $(".hiddenOnLoad").hide();   });    $("#viewByProduct").change(function () {     $(".visibleOnLoad").hide();     $(".hiddenOnLoad").show();   }); });   Here's the part of the XHTML that it affects. The whole page validates as XHTML 1.0 Strict.  &lt;tr&gt;   &lt;td&gt;View by:&lt;/td&gt;   &lt;td&gt;     &lt;p&gt;       &lt;input type="radio" name="viewBy" id="viewByOrg" value="organisation"       checked="checked" /&gt;Organisation&lt;/p&gt;     &lt;p&gt;       &lt;input type="radio" name="viewBy" id="viewByProduct" value="product" /&gt;Product&lt;/p&gt;   &lt;/td&gt; &lt;/tr&gt; &lt;tr class="visibleOnLoad"&gt;   &lt;td&gt;Organisation:&lt;/td&gt;   &lt;td&gt;     &lt;select name="organisation" id="organisation" multiple="multiple" size="10"&gt;       &lt;option value="1"&gt;Option 1&lt;/option&gt;       &lt;option value="2"&gt;Option 2&lt;/option&gt;     &lt;/select&gt;   &lt;/td&gt; &lt;/tr&gt; &lt;tr class="hiddenOnLoad"&gt;   &lt;td&gt;Product:&lt;/td&gt;   &lt;td&gt;     &lt;select name="product" id="product" multiple="multiple" size="10"&gt;       &lt;option value="1"&gt;Option 1&lt;/option&gt;       &lt;option value="2"&gt;Option 2&lt;/option&gt;     &lt;/select&gt;   &lt;/td&gt; &lt;/tr&gt;   If anyone has any ideas why this is happening and how to fix it, they would be very much appreciated!