İ tried to do it simply by assign the files of the input into a variable:
var files = document.getElementById("upload").files;
but there seems to be a connection created with this assign so every time the input changes the variable changes too.
so how can I do that without this connection?
You just want the filenames? Then just get the filenames :
var files = [],
upload = document.getElementById("upload");
upload.onchange = function() {
for (var i=0;i<upload.files.length;i++) {
files.push(upload.files[i].fileName);
}
}
??? No "inherited" behaviour from FileList, but I assume I misunderstand.
That's because it's being used as a reference to the files property. If you don't know what that means, do some reading on Google for "pass by value vs pass by reference."
What you need to do to copy the value unfortunately is something like this:
var files = (function() { return document.getElementById("upload").files; })();
In order to copy the value with no reference to the .files property.
The simplistic answer of what is happening here is that var files references the memory address of the files property of that DOM element. It looks to you like it's copying the value when in fact it is pointing to that memory slot and access it is just following a trail to whatever is stored there and accessing it.
I have modified #Mike's answer and came to a result where it actually works. I am writing the answer for a single file which can be converted to support multiple files.
var file = document.getElementById("upload").files[0]
this will store the file and not the refrence to the file hence if the value of upload file type changes the value in file remains unchanged.
Hope this might help someone else
Related
Hey everyone, i need help with something.
I've divided the picture into sections so it's easier to look at.
This is really bugging me and i don't know if i can solve it this way.
Thanks to anyone that can help me... Here i go:
So in section 1 i've created a basic input with a name property, actually i've made 4 of them but this one is the example (the name property is important)
In section 2 , those are the inputs on the page and i need to change the variable depending if the inputs is checked or not
The variable in JS file is called requireInteraction and it's set to false
So im doing a forEach on those 4 inputs (each one has a name property that matches the variable name in JS) and i want to change the variable in JS if the checkbox with that name is Checked. I tried using Computed Properties.
So when silent is checked (with the silent name property) i want the variable "silent" in JS to switch to true.
How can i extract the input name (which has the same name of the JS variable) and make it so it's like i actually typed "silent = true" and changed the JS variable.
I don't really know why you can't use
requireInteraction = true;
but here, in case that you have some reason you can't just use the variable directly, you could use an object to serve as a target to index into:
const context = {
requireInteraction: false,
};
Then later on, you can use something similar to your original code:
context[el.name] = true;
I am currently learning Web Workers in JavaScript, and therefore, making a script says something 8 times, every thread does 1.
So to make it, I use this code:
main.js
for (let workersAmount = 0; workersAmount < 4; workersAmount++)
{
var socketWorker = new Worker("worker.js");
}
socketWorker.onmessage = function(event)
{
console.log(event.data);
}
worker.js:
postMessage("Why can't it just work!")
And this is the result (this is my first post here so I can't embed):
image
As you can see, it only shows the text 1 time, while there are 4 workers. Which (I think) is because is replace the variable "socketWorker" everytime, but still keeps the old worker.js
So, does anyone know how to fix this? Thanks in advance for you help!
They don't have the same name. They don't have names at all.
The socketWorker variable has a name. It also has a value.
First it has the value that is a reference to the first worker. Then you immediately overwrite it with the value that is a reference the second worker. And so on.
When you overwrite the first reference you no longer have that reference.
You have thrown it away.
You can't get it back.
By the time you get to the line socketWorker.onmessage = function(event), you've only got the last reference you stored in socketWorker available to you.
Assign a value to the onmessage property inside the for loop, before you overwrite the value of socketWorker.
If you need to keep a reference to each of your workers around for the future, then push them into an array instead of using a single variable which you keep overwriting.
I would like to use a query string parameter so that way I can specify the name of a DOM element.
I have some code that requires the height of the header and I would like that code to work for any theme. Only at times the header uses the <header> tag, at times it has a specific identifier, at times it is a specific class... to be able to reuse that code over and over again, I'd like to include it in a way such as:
<script src="https://www.example.com/js/my-script.js?c=header"></script>
What I want to be able to do is get the "?c=header" part from that JavaScript URL to send search a DOM object with jQuery(".header"). Do we have a way to know the URL of the JavaScript itself from the JavaScript being executed?
Obviously, I know of window.location.href and that's not the URL I'm looking for.
As mentioned by #Kaiido in a comment, there is the document.currentScript parameter that gives you access to the <script> tag which is currently running. Only there is a small trick to it, that parameter is defined on the first pass, not when executing functions within your script.
So what one can do is save that information, or at least what you need from that object, in the global scope or a static in your object.
In my case, I just did the following:
// Script to tweak things on many websites
var this_script_url = document.currentScript.src;
jQuery(document).ready(function()
{
// at this point: "document.currentScript === null"
var qs = this_script_url.split("?", 2);
if(qs && 2 == qs.length)
{
... // handle qs[1] which is the query string (a=1&b=3&...)
}
});
Please make sure you don't use a global name that's too generic. It should include the name of your script or abbreviation thereof. Otherwise you are likely to clash with another script's global.
Now if you have a prototype object, I would suggest you use a static member instead of a global.
var my_class = {};
my_class.script_url = document.currentScript.src;
// and later you can reference it directly as in:
url = my_class.script_url;
This way you are more likely to avoid clashing problems (the only thing that needs to be changing in case of a clash is the name my_class).
At this point, the ES5 or ES6 class keyword does not offer you to create variables.
I have a site with multiple Javascript files included. Two of the JS files have the following variable:
var $gridName
Will this cause any conflicts for me in my site? For example, will the value of $gridName be set by the last JS file that got included or some other type of unwanted behavior?
Here is the top of one of my files, where the variable is declared:
$(function () {
var intlastRowId;
var strAppName = 'allocation-details';
var $gridName = $("#grid-allocation-details");
Yes same variable named may give conflicts i.e one value can overwrite other it depends on few things like are those variables global or local.
Working with JSON for the first time, I'm trying to call strings stored in a JSON file like this:
var getText = function(pat,id){
$.getJSON('assets/brospeak.json',function(js){
$('#pim1').append(js.pat.id);
});
}
So my intent is that pat and id get passed to getText when it's called to find the string. The problem is, the local variables in the line $('#pim1').append(js.pat.id); aren't getting called properly, so basically every time I call getText it looks for myfile.pat.id instead of, say, myfile.pattern.a. It works fine when I do just the getJSON part and explicitly tell it where the strings are.
The heck am I doing wrong?
Use js[pat][id] instead if the property name is dynamic:
var getText = function(pat,id){
$.getJSON('assets/brospeak.json',function(js){
$('#pim1').append(js[pat][id]);
});
}