« first day (3373 days earlier)      last day (1799 days later) » 

03:25
Hii is there anyone to help me in javascript.
Just a small issue
 
2 hours later…
05:05
05:25
I want to print the percentage value of two text boxes into another text box. My JavaScript code is
<script>
function showtxt(val){
var label1=document.getElementById('label1');
var label2=document.getElementById('label2');
var label3=document.getElementById('label3');
var label4=document.getElementById('label4');
var a1=document.getElementById('a1');
var a2=document.getElementById('a2');
var a3=document.getElementById('a3');
var a4=document.getElementById('a4');
var b1=document.getElementById('b1');
var b2=document.getElementById('b2');
var b3=document.getElementById('b3');
var b4=document.getElementById('b4');
and html code is:
1 message moved to Trash can
@SanghamitraLahiri Please don't post unformatted code - hit Ctrl+K before sending, use up-arrow to edit messages, and see the faq. Please separate code blocks from your actual question. Put your question in 1 message and then your code in a 2nd and format it. For posting large code blocks, use a paste site like like gist.github.com, hastebin.com, pastie.org or a demo site like jsbin.com
@JamesBot thanks, but as i have already posted my question. so please solve it. i know its very easy but i'm unable to solve it
 
2 hours later…
07:43
@SanghamitraLahiri pastebin.com
anything bigger than 5 or 6 lines of code should probably be presented in the form of a pastebin link
07:56
@Neil this is js room :o
@KarelG your point? o_O
we're more flexible here 😀
tell that to JamesBot
08:16
Hi ! I have a react app and I want to make an image upload system, but I don't know how to do it. This image is going to be uploaded in S3 and I have an Express API, what you guys think I should do ?
At the moment I can preview the image selected by the user thanks a FileReader, I'll post my code below
handleImageUpload(event) {

        event.preventDefault();

        let reader = new FileReader();
        let file = event.target.files[0];

        reader.onloadend = () => {
            this.setState(prevState => ({
                data: {
                    ...prevState.data,
                    requiredInfos: {
                        ...prevState.data.requiredInfos,
                        "imageUrl": reader.result
                    }
                }
            }))
        }
        reader.readAsDataURL(file);
But I don't know what to do know, how to send it to my API and post it to S3
08:27
@Neil that one here above is fine imo
:P
@KarelG sure, according to you it is
@neil please answer my question. I have asked that question yesterday also
@Neil
@SanghamitraLahiri and I understood that it got fixed yesterday
@Neil nope it was not solved.:)
take this an apply what you see
this is important because rarely will anyone hand you a solution exactly as you need it
study why this works and then use it in your context
08:49
@Neil thank you very much. it is working. :)
*nod*
09:33
1 message moved to Trash can
@Zeta.Investigator Please don't post unformatted code - hit Ctrl+K before sending, use up-arrow to edit messages, and see the faq. Please separate code blocks from your actual question. Put your question in 1 message and then your code in a 2nd and format it.
How can I simultaneously add event for an input field and catch its value without writing document.getEle... twice?
 // Input Event Listeners and Model Updating
let a = '';
let number_of_oranges_select = document.getElementById('number-of-oranges');
number_of_oranges_select.addEventListener('input', function() {
a = number_of_oranges_select.value;
console.log(a);
})
@Zeta.Investigator but, that's what you did, isn't it?
where's the second document.getElementById?
@Neil I don't like this solution either
@Zeta.Investigator well you could do away with "a"
You see, I have a User class which for example can but 2 oranges, 3 apples, 5 kiwis etc...I have like 60 input fields in my index.html. What is the most elegant way for updating my User class params as soon as an input changes?
09:38
@Zeta.Investigator create a function which when passed the name of the user class property and the id of the input field, will return another function which updates that property whenever it changes
it would be difficult directly wiring the property and the input as it changes with each input/property
you'd have to do it 60 times otherwise
@Neil I don't know about this "propery" feature. Is it similar to Java when we want to "bind" two variables together (so when a changes b also changes and vice versa)?
suppose user is your User class instance
You can do user["telephoneNumber"] = "+005551834"
this is the equivalent of user.telephoneNumber
it's the only way you can assign the telephone number using a dynamic property name
and it makes what I'm talking about possible
function generateHandler(classProperty, inputId) {
    return function() {
        user[classProperty] = document.getElementById(inputId).value;
    };
}
@Zeta.Investigator use this in the event listener
that's the input element
document.getElementById('telephoneNumberTxtBox').addEventListener('change', generateHandler('telephoneNumber', 'telephoneNumberTxtbox'));
or yeah, you could use this instead.. you wouldn't have to pass the inputId
I feel like there should already be gazillion examples showing this trivial application but I can't find any...Should I search for vanilla js MVC examples?
@KarelG thanks
09:45
function generateHandler(classProperty) {
    return function(e) {
        user[classProperty] = document.getElementById(e.target.id).value;
    };
}
note that it does not work if you use the arrow syntax
but you've used function there, which binds the element to this
@Neil This is for arrow notation?
document.getElementById('foo').addEventListener('input', function() {
  console.log(this.id); // should give "foo"
})
@Zeta.Investigator this would work with arrow notation because it's not using "this"
it uses the event information
bah
09:47
@Neil Your former function also didn't use this
only useful if you want to stop the event bubbling or propagation
@Zeta.Investigator no, I just removed the excessive additional parameter
document.getElementById('telephoneNumberTxtBox').addEventListener('change', generateHandler('telephoneNumber'));
assuming that there's a global variable user of course
you might also want to pass that to the function
@Neil nice! thanks. So how can I "double-bind" my input fields in View and my User user params?
you could do something similar, except your User class's setter will update the text box
in addition to setting its value
hmm, no wait, that would create a cyclic loop :)
@Neil So you mean I should add an event listener to plain js variables?
09:50
it would work, but you couldn't use change event. it would have to be like on keyup or something
Isn't there a feature in js for this?
@Zeta.Investigator no, no event listener, I just meant when the value gets assigned, you also update the text input
if you had all this information in, say, an array, you could do it systematically
value is getting updated in class User.. can I find this in the array of user property / text input pairs? yes? okay, then update the equivalent text input for this property
@Neil Let's take a step back a little. Am I over-complicationg things by using a User class? I mean I should add a constructor for it and stuff?
it's probably how the bindings are done with react and the like
nah, a User class in itself is not that complicated
depends what you intend to do with it, but a class is probably a lot more clearer than say an object or something
10:08
@Neil can I do user.classProperty instead of user[classProperty]?
@Neil What's the difference?
@Zeta.Investigator you can, but then you'd need to necessarily write out 60 handlers
they're not all writing to the same property of user
so you'd need one like user.telephoneNumber and another like user.name and another like user.address, etc.
no point. if you make it dynamic, you can simply do user[classProperty] of whatever is passed to the function generator
oh I get it...You wanted to auto input the property name and that is only possible by [] notation
@Zeta.Investigator yes exactly
But other than that, there is no difference, right?
you're binding the textbox and the user property, so both need to be dynamic values
@Zeta.Investigator no, no difference otherwise
you can get away with writing untraditional property names using user[classProperty] as well
like you could have a property "0" this way, but you couldn't do user.0 = value
10:12
nice :D
but that's also probably not the best idea :P
in the interests of clarity
There is also no functional dif between getelementbyid and queryselector right?
queryselector has to be used like #id
so there's a bit of additional logic there, because it has to parse the input
So it's slower
getElementById is slightly faster but otherwise the same conceptually
10:14
thanks
if you don't like having to type it out, remember you can always do like var $$ = document.getElementById;
then you do $$('someId')
or likewise for queryselector for that matter
Yeah hackernews people suggested local function el for id and qs for queryselector to make it similar (in succincity) to jQuerry
What VScode is spamming me with nodeValue when I type value? Which one should I use?
not sure what nodeValue is
just use value
What event is best for input trigger? I guess input but I also want to have the default-value of my select form when user didn't change its value...
well assuming there isn't a cyclic loop, change would probably be best
but not sure if change event triggers if you assign it programmatically or if that's only regarding change made by the user
10:37
@Neil What about default form values? How can I catch them when there is no events? I should just write a good 'ol getElementById when page loads or something?
@Zeta.Investigator when you generate the handler, you can also call it right away
so whatever default value it has is copied into your user instance
you could pass a boolean parameter to your generator and if true, you call it, if sometimes you may not wish to do this
Like this?
@GunthervonGoetzenSanchez yes?
@FahadMahmood Welcome to the JavaScript chat! Please review the room rules. If you have a question, just post it, and if anyone's free and interested they'll help. If you want to report an abusive user or a problem in this room, visit our meta.
@Zeta.Investigator I didn't see, sorry
10:46
@Neil It was wrong :)
function generateHandler(userInstance, classProperty) {
    const fun = function (e) {
        userInstance[classProperty] = document.getElementById(e.target.id).value;
    };
    fun();
    return fun;
}
Also this is wrong
Hi All I am using this site codepen.io/valaxin/pen/reQMXp to create a sliding effect how to add angular input field for this slides. I have a modal popping asking user to enter the slide name. This slide name I want to display in the top of the slide. can anyone help me
@JananiHariharan Welcome to the JavaScript chat! Please review the room rules. If you have a question, just post it, and if anyone's free and interested they'll help. If you want to report an abusive user or a problem in this room, visit our meta.
@Zeta.Investigator hmm, true.. to call it you'd need the id
so you'd either bind 'this' param and then use 'this' or you pass the id as a parameter
@Neil Is'nt it more clean if I just update my user when the page finishes loading?
@Zeta.Investigator not really, because in addition to assigning handlers for all the text boxes, you'd need to trigger them all one at a time
wouldn't it be simpler to create a User instance with the default properties already in place?
or in addition to the text input / user property pairing, you could add a third parameter for default value
10:54
@Neil Then there would be 2 sets of default values. One in my js file and one in html file (like input number value = 1)
so say, in the constructor you'd assign the default value to both the text input and the user instance
@Zeta.Investigator no, again, not if you had one single array holding all the pairings
you can do everything with that without repeating the information twice
@Neil You mean constructor of the class? Shouldn't constructor just handle building up the class and not messing with UI?
@Neil So an array of default values in my js and a method in my User class to sync UI with that array?
@Zeta.Investigator then if you want, after the constructor
yeah, have all the information you require to bind that user class with the UI
or you could create a method inside User which lets you manually add the bindings
same same ultimately
If I used Vue.js for example, these things would be done much easier, wouldn't it?
lol, I don't know you tell me
you wanted to do it this way
11:41
How can I add duplicate/remove functionality similar to this link but without explicitly writing the form structure as a js variable?
@Zeta.Investigator not sure I know what you mean
have a class which represents that dialog
pass the model and you bind the model with the text inputs
or you create a new user if it is a new user
when dialog is closed, you trigger an event which you listen to where you initially called to open the dialog
@Neil I guess the word for it is "dynamic form" ... like an input form but user can duplicate and remove a group of forms
@Zeta.Investigator ah, so not a User class, but any class
you're probably going to have to use a JS object for that
@Neil not a class but a group of html inputs
there is FormData to write or read data in a form on the page
might be useful in your case
12:01
afaik the format depends on the browser locale
or do you mean output?
yeah actual value is always like yyyy/mm/dd
yeah, which is reasonable
@GNi33 But why default is like this?
dd/mm/yyyy
my locale is US-en according to stackoverflow.com/questions/25606730/…
in the UI you mean?
yeah
I want it to be like yyyy/mm/dd
12:09
hm, then it should be mm/dd/yyyy for you, no?
it is dd.mm.yyyy for me, so I'm fairly certain it is based on browser locale and/or preferences
oh damn yeah
Who uses that ? :(
the month before day thing? americans
don't ask me why, I gave up on getting used to it
yeah I know but why year is written as the right most parameter?
How can I force it to show up as yyyy-nn-dd (like its value)?
well that's just how it is :D
I'm not sure you can
12:11
but why would you want to?
i just force the iso date format on my sites
it's a good thing that the native browser UI handles some localization for you
I don't care about the user's locale 😀
@KarelG How?
yeah I guess it's possible somehow, let me have a look
@Zeta.Investigator maybe this will help? developer.mozilla.org/en-US/docs/Web/HTML/Element/…
no I guess it's not possible
you'd probably need a script for that rather than just using the native input
12:17
716
Q: Is there any way to change input type="date" format?

Tural AliI'm working with HTML5 elements on my webpage. By default input type="date" shows date as YYYY-MM-DD. The question is, is it possible to change its format to something like: DD-MM-YYYY?

Yeah not possible
But at least how can I make it show up as dd/mm/yyyy instead of the current mm/dd/yyyy?
why would you want to?
users with en_us locale will want to have the date that way
I've got some de locale, and it shows up in the format that I'm used to
My locale is set to en_us but I'm not in us. I want to use european style for it so dd/mm/yyyy
I really think the problem you're trying to solve here isn't one
well then change the locale :D
On browser?
Where?
Your browser/OS
12:20
Can't I just force something in my webpage?
without js
no
firefox let's you set a general language, as well as a preferred locale that is used in the requests for example
this is a user setting and that browsers are displaying native UI elements differently based on that is not a problem, it's there to make your life easier
Even when I use German for display language, the date is the same as US
So it is probably looking at system level settings
I've come from a different field and I thought web dev to have much more flexibility
12:37
it is very flexible
you can always replace the native inputs with some solution that involves javascript. So in that regard it is much more flexible than most platforms
native DOM elements are sometimes opinionated, that's true, but that's because there needs to be a standard that all the browser vendors need to adhere by, unless you want the browser compatibility issue to get even more messy than it already is
as to why you cannot set the format here, I really don't know. I'd imagine there's some mailing list or board where you could find lengthy discussions about it when drafting the standard
personally, I think it's good that you can't force it
but I wouldn't be angry if it was different
Is adding properties to strings bad practice?
 const x = "foo"; x.isSomething = true;
@JBis yes ಠ_ಠ
Darn it.
ok thanks
12:57
@Zeta.Investigator regular text input and put a datepicker library on it
then you have control on the formatting
13:40
What is the best way of doing svg icons instead of font-awesome fonts?
<img> or <svg> or ?
And how can I change the size of the icon?
13:56
I usually just use <svg>
So I have to manullay open the svg in my editor and copy past a long elemnt into my dom?
@Zeta.Investigator get an icon sheet if you're going to use more than one, then just change the viewport to show the icon you want
It's much work compared to -fas fas-arrow
you could also include it with your server side language
or use <object>
if you really only need the icon, <img> will do fine, but afair doesn't allow you to style with CSS or manipulate it with js
@GNi33 yeah it can't be styled
@GNi33 Shouldn't UI code be seperated from server side?
14:02
well I suppose the view/page the server sends out is generated to some extent on the server?
i love this tool for creating svg sheets. icomoon.io/app/#/select
What is a svg sheet?
Currently only two buttons are this long:
<button class="btn btn-sm btn-danger d-inline-flex"> <svg class="bi bi-dash"
                                            width="1.5em" height="1.5em" viewBox="0 0 20 20" fill="currentColor"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd"
                                                d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z"
                                                clip-rule="evenodd" />
what server side language are you using?
there's no problem with using it in an img tag btw
if you don't need to manipulate it in any way
@GNi33 Django
I guess it would be something like {% include "example.svg" %} in your view then
which would result in the same thing being put out into the delivered HTML
if you have larger SVGs, it'd probably be best to use a tag like <img> or <object>
14:11
@GNi33 Yeah that's Jinja's template
                                <button class="btn btn-primary my-1 d-flex" style="size: 3rem;">+</button>
Figured it would be better to use 1 byte instead of 500 bytes for a + and a -
But why font size isn't changing...ughhhh front-end is soooo nitpicking :(
Does anyone have the chops to see if this can be reduced to a single statement?
        function saveAsDialogAndValidations(isSaveAsOpenDialog) {
            if (ConversionTimeValidation.isIncludeAnimations()) {
                if (ConversionTimeValidation.isValid()) {
                    isValidRepeatingSchedule(isSaveAsOpenDialog);
                }
                else {
                    ConversionTimeValidation.validate();
                }
            }
            else {
                isValidRepeatingSchedule(isSaveAsOpenDialog);
I am not seeing a refactor yet..
sure i can
but you shouldn't
yeah, I mean it reads fine to me... but lead dev pulling his weight....
   const saveAsDialogAndValidations  = _ => { ConversionTimeValidation.isIncludeAnimations() ? ( ConversionTimeValidation.isValid() ? isValidRepeatingSchedule(isSaveAsOpenDialog) :  isValidRepeatingSchedule(isSaveAsOpenDialog) ) :  isValidRepeatingSchedule(isSaveAsOpenDialog); }
oh wow, double ternary?
14:16
Yes
very nice, and setting precedense
but don't do that
its horrible to read and difficult to understand
^^
yes I agree, thank you for showing me. Good to know I can do double ternary's if needed
np
i might do it just to pop his bubble in my next PR .. lol
:D hahahaha
14:28
I have a 60 line HTML code inside a string. How can I make it proper for insertBefore?
15:08
isNaN is bad
my colleague fell victim because isNaN('2 ') apparently returns false
he was using it to validate input from the user to ensure only strictly numbers are entered
the problem was he was adding the current value with the newly pressed key and checking using isNaN, so isNaN('2 ') returned false and then anything which followed was like isNaN('2 0') which returns true
so a user with a 2 and a space in the input couldn't enter anything else
just that the user is stupid and didn't realize there was a space
I have this weird problem. I've created a dynamic form with a counter (appended to each form id). But no matter what I set the counter , console.log(i) shows it starts from 10 !!
@Zeta.Investigator if i is an index in a loop and you're printing the value after the loop, yes, it'll be the last possible value
@Neil No I'm printing inside the listener
@Zeta.Investigator is i defined inside the listener?
I want each of my form to have a unique id...that's why I set a global counter and increment on each event firing
let  m = 1;
add_button.addEventListener('click', e => {
    let form = document.createElement('div');
    form.id = `custom-stuff-${m}`;
    console.log(m);
    m++;
    form.innerHTML = custom-stuff-html;
    container.insertBefore(form, add_button);
    console.log(form);
})
15:23
forget the idea of naming arrays of DOM elements with ids
that's not what ids should be used for
use classes if you have more than one
ids identify exactly one of something on your page
if you're having to use a counter, you no longer have a situation where an id is suitable
15:39
@Neil Well I use classes but the logic is the same isn't it?
Why m is starting at 2 in this case? (or 10 for other initial values)
why would it be the same?
if you have 10 of them, when are you only going to need to grab the 1st?
that's like having an array and always calling it with array[0]
16:00
@Neil I just want a marker to be able to delete a div for example. I could append the counter to its id or its class. What's the difference?
In fairness
> "I have no delusions that it’s going to pass," Rodgers said of his bill. "I wouldn’t probably vote for it myself."
16:41
Hi all
1 message moved to Trash can
@Richard Please don't post unformatted code - hit Ctrl+K before sending, use up-arrow to edit messages, and see the faq. Please separate code blocks from your actual question. Put your question in 1 message and then your code in a 2nd and format it. For posting large code blocks, use a paste site like like gist.github.com, hastebin.com, pastie.org or a demo site like jsbin.com
I'm trying to do something really simple but for some reason I'm stuck and I need some help.

So I just try to upload an XML file using react hooks but for some reason the state in which I save the input file is always empty. Here is what I do:

<div className="uploadXML">
<input type="file" onChange={uploadXMLHandler}/>
</div>

Here is the JS
const [xmlUpload, setXmlUpload] = useState(null);

const uploadXMLHandler = e => {
setXmlUpload(e.target.files[0]);
};
when I console.log  console.log(xmlUpload);  inside the uploadXMLHandler I always get null
But if I console.log(e.target.files[0]);
Then i get the file that was uploaded. I do not understand the problem
ok, so...
what does setXmlUpload do?
it puts the e.target.files[0] File inside the xmlUpload
16:49
What is updating xmlUpload?
When are you console.logging it?
because I want to see what is inside
when
after onChange is called
where?
show more of the code
1 message moved to Trash can
@Richard Please don't post unformatted code - hit Ctrl+K before sending, use up-arrow to edit messages, and see the faq. Please separate code blocks from your actual question. Put your question in 1 message and then your code in a 2nd and format it.
16:50
const uploadXMLHandler = e => {
setXmlUpload(e.target.files[0]);
console.log(xmlUpload);
};
and what does setXmlUpload do?
bsides the obvious
how does it do it
As far as I understood it updates the values of xmlUpload
or am I mistaken ?
i assume it's using setState, which is async
which would mean you need to wait before logging the value
should I use useEffect hook or is there a way to wait before logging inside the function ?
lol
using useEffect fixes the problem
dunno, i don't mess with react hooks
16:55
ok
how could I wait inside the uploadXMLHandler until upload file is registered ?
i don't see a reason to wait
you have the file
Why bother with that other var at all?
I'm using an XML parser and it says that this file is empty
maybe the parser is broken
17:39
I upload an XML file to and what I get at the end is a File type variable
how to get the xml from this file ?
1 message moved to Trash can
@Zeta.Investigator Please don't post unformatted code - hit Ctrl+K before sending, use up-arrow to edit messages, and see the faq. Please separate code blocks from your actual question. Put your question in 1 message and then your code in a 2nd and format it. For posting large code blocks, use a paste site like like gist.github.com, hastebin.com, pastie.org or a demo site like jsbin.com
Can anyone figure out why I can't get remove-button of for my js added forms?

let add_button = document.getElementById('custom-add-button');
let container = document.getElementById('custom-container');
add_button.addEventListener('click', e => {
    let form = document.createElement('div');
    form.className = `custom`;
    form.innerHTML = custom_form_string;
    container.insertBefore(form, add_button);
    console.log(form);
})
let stuff = document.querySelectorAll('.custom-remove-button');
18:14
@ndugger Can you explain the issue you have with EME and its API?
I understand wanting DRM to be free to use but I don't understand why its existence is an issue.
@Zeta.Investigator Can you use a fiddle site like jsfiddle.net to show your HTML and JS in a MCVE?
18:31
any idea how to get the contents of a File upload via <input type='file' />
18:43
on the client side?
Hey!
the UI Engineer sounds great!
LMK if you want to apply :D
hi shrek
IIRC one of the youngest I remember in UI team was 19 :)
I don't think I'd be able to do it full time.
we also have an internship programming under works rn
so I'll ask around
18:45
Internship would work better now. Maybe in a couple years I can apply for the real job.
thanks btw
 
1 hour later…
20:06
@JBis Thanks I fixed it
Anyone knows how can I use css animations?
        // Adding animation
        dynamic_form.classList.add('animated', 'bounceInRight');
Animating adding form works fine. But I also want to see an animation when form is deleted
 
2 hours later…
22:11
@forresthopkinsa I'd like to thank you for your pro-UBI arguments. I used some of them in a school debate as I had to argue in favor of adopting UBI.
lol
hahaha glad I could help
how convenient lol
anyone been using jsfiddle lately? it seems that dark theme is all they offer now

« first day (3373 days earlier)      last day (1799 days later) »