hi_mayank, 1 month ago

@Meyerweb using a <form> maybe? the form data will have up-to-date values and you can set a change listener directly on the form

edit: here's some code!

<form id=form>  
 <input name="thing" >  
</form>  

const values = {};  
const setValues = () => {  
 values = Object.fromEntries(new FormData(form));  
}

setValues();  
form.onchange = setValues;  
form.oninput = setValues;

console.log(values.thing);  

ctietze, 1 month ago

@hi_mayank @Meyerweb The form approach is pretty cool!

joelanman, 1 month ago

@Meyerweb maybe I'm not following what you need, but if they have ids you can refer to them like
window['id-here'].value

kolya, 1 month ago

@sil @joelanman @Meyerweb
Note that while CSS IDs do exist as global variables under window from the start, they can easily get overwritten, if you're not the only one scripting on that page. Also this approach doesn't change your JS variables on change of the inputs yet.
If you're alone on that page go ahead and use the global window.vars and update all of them with document.onchange. Easy. The safer way of course is to document.querySelector the IDs and write individual change listeners.

joelanman, 1 month ago

@kolya @sil @Meyerweb Agree, though I was suggesting using that instead of variables, so no listeners needed

kolya, 1 month ago

@joelanman
Sure, if that works for @Meyerweb. I was going strictly by the requirements in his post:
> I want their values to set the values of #JS variables, both on load and whenever changed
@sil

kolya, 1 month ago

@Meyerweb
Also if this is a recurring task on your site, then a simple JS frontend framework like alpinejs will help decrease development costs. I'm not a fan of frameworks but a highly interactive web app is the one use case in which they make sense.
@joelanman @sil

joelanman, 1 month ago

@kolya @Meyerweb @sil Did you see this reply? Looks nice
https://hachyderm.io/

kolya, 1 month ago

@joelanman
Yeah, I saw @hi_mayank's reply before they added the code example. It's a nice solution if you can live with its restrictions:

• all inputs need to be in one form tag
• the form elements determine the initial structure of your object
• this will fire on EVERY input eg keystrokes, which you might debounce with an individual listener
  @Meyerweb @sil

hi_mayank, 1 month ago

@kolya @joelanman @sil keep in mind it's just a toot i wrote off the top of my head, not a proper blog post or even a codepen 😅

my point is merely that form and FormData can be handy depending on what @Meyerweb is trying to do

Meyerweb, 1 month ago

@hi_mayank @kolya @joelanman @sil I can’t quite tell if the code you wrote is what I’m thinking or not — it seems like it when I squint at it one way, but then not when I squint a different way. See https://codepen.io/meyerweb/pen/GRLyZWY and let me know?

sil, 1 month ago

@Meyerweb @hi_mayank @kolya @joelanman ah, what you want can't sensibly be done in the way you're looking for, sadly. In the old days "var whatever" set window.whatever, but let (and const) variables aren't on the window object, and there's no way to set a let variable "dynamically" from code if you have its name in a string, at least not that I know of.

sil, 1 month ago

@Meyerweb global variables are properties of "window", so you can use their member names to set window[input.id] = input.value or similar, if you want the equivalent of "var myslider = 32" or whatever? Not sure I'm quite following what you're looking for here, though.