Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #37061 > unrolled thread

Is the input type ID passed as a parameter onChange? If not how can i achieve it.

Back to article view | Back to comp.lang.javascript

Contents

  Is the input type ID passed as a parameter onChange? If not how can i achieve it. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-08-08 16:50 -0700
    Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-08-08 16:55 -0700
    Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-08-09 00:16 -0700
      Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Julio Di Egidio <julio@diegidio.name> - 2019-08-09 00:46 -0700
        Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-08-10 02:03 -0700
          Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-08-10 11:12 +0200
        Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-08-10 02:08 -0700
          Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Julio Di Egidio <julio@diegidio.name> - 2019-08-10 03:14 -0700
            Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-08-10 16:32 -0700
              Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-08-10 16:36 -0700
              Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. dr.j.r.stockton@gmail.com - 2019-08-11 01:39 -0700
                Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-08-11 02:38 -0700
                  NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-08-11 11:58 +0200
                    Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "R.Wieser" <address@not.available> - 2019-08-11 12:13 +0200
                      Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-08-11 12:31 +0200
                        Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "R.Wieser" <address@not.available> - 2019-08-11 20:15 +0200
                      Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Arno Welzel <usenet@arnowelzel.de> - 2019-08-11 17:50 +0200
                        Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "R.Wieser" <address@not.available> - 2019-08-11 20:20 +0200
                          Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. dr.j.r.stockton@gmail.com - 2019-08-11 13:54 -0700
                            Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "R.Wieser" <address@not.available> - 2019-08-12 08:48 +0200
                              Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. dr.j.r.stockton@gmail.com - 2019-08-13 14:43 -0700
                                Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "R.Wieser" <address@not.available> - 2019-08-14 08:43 +0200
                            Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-08-12 12:13 +0200
                          Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Arno Welzel <usenet@arnowelzel.de> - 2019-08-12 11:24 +0200
                            Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-08-12 12:14 +0200
                              Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "R.Wieser" <address@not.available> - 2019-08-12 12:42 +0200
                            Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "R.Wieser" <address@not.available> - 2019-08-12 22:48 +0200
                              Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Arno Welzel <usenet@arnowelzel.de> - 2019-08-13 15:06 +0200
                                Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Arno Welzel <usenet@arnowelzel.de> - 2019-08-13 15:07 +0200
                                Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "R.Wieser" <address@not.available> - 2019-08-13 20:22 +0200
                                  Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Arno Welzel <usenet@arnowelzel.de> - 2019-08-14 08:47 +0200
                                    Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "R.Wieser" <address@not.available> - 2019-08-14 10:23 +0200
                                      Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-08-14 13:45 +0100
                                        Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "R.Wieser" <address@not.available> - 2019-08-14 15:10 +0200
                                          Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-08-15 00:42 +0100
                                            Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Julio Di Egidio <julio@diegidio.name> - 2019-08-14 20:51 -0700
                                              Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-08-15 14:12 +0100
                                            Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "R.Wieser" <address@not.available> - 2019-08-15 09:09 +0200
                                              Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-08-15 14:11 +0100
                                                Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "R.Wieser" <address@not.available> - 2019-08-15 17:34 +0200
                                                  Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Julio Di Egidio <julio@diegidio.name> - 2019-08-19 10:43 -0700
                                      Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Arno Welzel <usenet@arnowelzel.de> - 2019-08-14 17:25 +0200
                                        Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-08-14 13:10 -0700
              Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Julio Di Egidio <julio@diegidio.name> - 2019-08-12 09:30 -0700
                Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-08-12 11:55 -0700
                  Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-08-12 11:58 -0700
            Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-08-10 18:48 -0700
              Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Ben Bacarisse <ben.usenet@bsb.me.uk> - 2019-08-11 16:25 +0100
                Extracting numbers from strings, using templates (was: Is the input type ID passed as a parameter onChange? If not how can i achieve it.) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-08-12 22:10 +0200
                  Re: Extracting numbers from strings, using templates (was: Is the input type ID passed as a parameter onChange? If not how can i achieve it.) Jon Ribbens <jon+usenet@unequivocal.eu> - 2019-08-13 00:23 +0000
    Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Arno Welzel <usenet@arnowelzel.de> - 2019-08-09 11:59 +0200
      Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-08-09 13:54 +0200
        Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Arno Welzel <usenet@arnowelzel.de> - 2019-08-09 14:53 +0200
          Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-08-09 15:35 +0200
            Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it. Arno Welzel <usenet@arnowelzel.de> - 2019-08-09 17:16 +0200

Page 3 of 3 — ← Prev page 1 2 [3]

#37152 — Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it.

On Thursday, 15 August 2019 17:34:36 UTC+2, R.Wieser  wrote:
> Ben,
> 
> >> It looks like that my "don't re-use global names"
> >> stance does cut some wood after all.
> >
> > I don't know what you mean by this.
> 
> The whole thing started with the statement as in the subjectline: NEVER use 
> "this" as a variable.
> 
> The reason for it was that you could easily run into mistakes that way

No, the use of a keyword as an identifier is an *error*.

What you could do, and is indeed strongly discouraged, is use a keyword
for a property name.

<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Reserved_word_usage>

Julio

[toc] | [prev] | [next] | [standalone]

#37136 — Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it.

On 14.08.19 10:23, R.Wieser wrote:
> Arno,
> 
>> The difference is, that "this", "document" and "window"
>> name an *existing* object and "that" not.
> 
> Exactly that.   And AFAICT thats the /only/ difference.

So what?

> I rather go with the generic rule that global variable name re-use should 
> not be a common thing to do as opposed to give a few "special" names undue 
> attention.

I know you refuse to learn to understand
<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this>
- but "this" is *not* always a global variable!

That's why I said: just don't use "this" as a variable name - even if
you don't understand why. If you want to understand, than you have to learn.


-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [next] | [standalone]

#37139 — Re: NEVER use "this" as a variable Re: Is the input type ID passed as a parameter onChange? If not how can i achieve it.

Den onsdag 14 augusti 2019 kl. 17:25:49 UTC+2 skrev Arno Welzel:
> On 14.08.19 10:23, R.Wieser wrote:
> > Arno,
> > 
> >> The difference is, that "this", "document" and "window"
> >> name an *existing* object and "that" not.
> > 
> > Exactly that.   And AFAICT thats the /only/ difference.
> 
> So what?
> 
> > I rather go with the generic rule that global variable name re-use should 
> > not be a common thing to do as opposed to give a few "special" names undue 
> > attention.
> 
> I know you refuse to learn to understand
> <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this>
> - but "this" is *not* always a global variable!
> 
> That's why I said: just don't use "this" as a variable name - even if
> you don't understand why. If you want to understand, than you have to learn.
> 
> 
> -- 
> Arno Welzel
> https://arnowelzel.de

I am not sure what the problem is but i have accepted that this is a reserved word only used in the function call.

[toc] | [prev] | [next] | [standalone]

#37105

On Sunday, 11 August 2019 01:32:10 UTC+2, Jonas Thörnvall  wrote:

With reference to code similar to this:

<button id="myId" onclick="korgvol(this.id)">Click me</button>

> If this.id containd the idput id, why can't i reach the id from script?
> 
> function korgvol(){

Obviously, your function signature should rather look like:

  function korgvol(elementId) {}

as that's what you are passing, the id of the element as the first and
only argument.

But that's not all you need, it was only meant as a starting example, for
you to get your head in the right direction: RTFM...

That said, this thread is hilarious, now into string manipulations.

> function korgvol(){ 
> 	if(this.id=="korgvol1") {CCtype=0}
> 	else if (this.id=="korgvol2") {CCtype=1}
...
> 	CCVol=document.getElementById(this.id").value;

That's a plain syntax error, BTW.

> 	settingChange=[CCchan,CCtype,CCvol];
> 	outportarr[outportindex].send(settingChange);
> }

If that's all you need, you could simplify to something like this:

<input type="range" onchange="korgvol(this, 0)" min="0" ... />
<input type="range" onchange="korgvol(this, 1)" min="0" ... />
...

function korgvol(el, id) {   // here the id is just a number
    var ccChan = 176 + channelTRX - 1;
    var ccType = id;
    var ccVol = parseInt(el.value);   // element value is a string

    var volChange = [ccChan, ccType, ccVol];

    outportarr[outportindex].send(volChange);
}

As long as it's inline handlers, seems clean enough...

HTH,

Julio

[toc] | [prev] | [next] | [standalone]

#37107

Den måndag 12 augusti 2019 kl. 18:30:57 UTC+2 skrev Julio Di Egidio:
> On Sunday, 11 August 2019 01:32:10 UTC+2, Jonas Thörnvall  wrote:
> 
> With reference to code similar to this:
> 
> <button id="myId" onclick="korgvol(this.id)">Click me</button>
> 
> > If this.id containd the idput id, why can't i reach the id from script?
> > 
> > function korgvol(){
> 
> Obviously, your function signature should rather look like:
> 
>   function korgvol(elementId) {}
> 
> as that's what you are passing, the id of the element as the first and
> only argument.
> 
> But that's not all you need, it was only meant as a starting example, for
> you to get your head in the right direction: RTFM...
> 
> That said, this thread is hilarious, now into string manipulations.
> 
> > function korgvol(){ 
> > 	if(this.id=="korgvol1") {CCtype=0}
> > 	else if (this.id=="korgvol2") {CCtype=1}
> ...
> > 	CCVol=document.getElementById(this.id").value;
> 
> That's a plain syntax error, BTW.
> 
> > 	settingChange=[CCchan,CCtype,CCvol];
> > 	outportarr[outportindex].send(settingChange);
> > }
> 
> If that's all you need, you could simplify to something like this:
> 
> <input type="range" onchange="korgvol(this, 0)" min="0" ... />
> <input type="range" onchange="korgvol(this, 1)" min="0" ... />
> ...
> 
> function korgvol(el, id) {   // here the id is just a number
>     var ccChan = 176 + channelTRX - 1;
>     var ccType = id;
>     var ccVol = parseInt(el.value);   // element value is a string
> 
>     var volChange = [ccChan, ccType, ccVol];
> 
>     outportarr[outportindex].send(volChange);
> }
> 
> As long as it's inline handlers, seems clean enough...
> 
> HTH,
> 
> Julio

Nah then i rather prefer John Stocktons approach.
function korgvol(kid,kvol){
	CCchan=176+channelTRX-1;
	CCvol=kvol;
	CCtype = this.id.substring(7) -1;
	settingChange=[CCchan,CCtype,CCvol];
	outportarr[outportindex].send(settingChange);
}

[toc] | [prev] | [next] | [standalone]

#37108

Den måndag 12 augusti 2019 kl. 20:55:16 UTC+2 skrev Jonas Thörnvall:
> Den måndag 12 augusti 2019 kl. 18:30:57 UTC+2 skrev Julio Di Egidio:
> > On Sunday, 11 August 2019 01:32:10 UTC+2, Jonas Thörnvall  wrote:
> > 
> > With reference to code similar to this:
> > 
> > <button id="myId" onclick="korgvol(this.id)">Click me</button>
> > 
> > > If this.id containd the idput id, why can't i reach the id from script?
> > > 
> > > function korgvol(){
> > 
> > Obviously, your function signature should rather look like:
> > 
> >   function korgvol(elementId) {}
> > 
> > as that's what you are passing, the id of the element as the first and
> > only argument.
> > 
> > But that's not all you need, it was only meant as a starting example, for
> > you to get your head in the right direction: RTFM...
> > 
> > That said, this thread is hilarious, now into string manipulations.
> > 
> > > function korgvol(){ 
> > > 	if(this.id=="korgvol1") {CCtype=0}
> > > 	else if (this.id=="korgvol2") {CCtype=1}
> > ...
> > > 	CCVol=document.getElementById(this.id").value;
> > 
> > That's a plain syntax error, BTW.
> > 
> > > 	settingChange=[CCchan,CCtype,CCvol];
> > > 	outportarr[outportindex].send(settingChange);
> > > }
> > 
> > If that's all you need, you could simplify to something like this:
> > 
> > <input type="range" onchange="korgvol(this, 0)" min="0" ... />
> > <input type="range" onchange="korgvol(this, 1)" min="0" ... />
> > ...
> > 
> > function korgvol(el, id) {   // here the id is just a number
> >     var ccChan = 176 + channelTRX - 1;
> >     var ccType = id;
> >     var ccVol = parseInt(el.value);   // element value is a string
> > 
> >     var volChange = [ccChan, ccType, ccVol];
> > 
> >     outportarr[outportindex].send(volChange);
> > }
> > 
> > As long as it's inline handlers, seems clean enough...
> > 
> > HTH,
> > 
> > Julio
> 
> Nah then i rather prefer John Stocktons approach.
> function korgvol(kid,kvol){
> 	CCchan=176+channelTRX-1;
> 	CCvol=kvol;
> 	CCtype = this.id.substring(7) -1;
> 	settingChange=[CCchan,CCtype,CCvol];
> 	outportarr[outportindex].send(settingChange);
> }

Ooops CCtype = kid.substring(7)-1;

[toc] | [prev] | [next] | [standalone]

#37083

Den lördag 10 augusti 2019 kl. 12:14:06 UTC+2 skrev Julio Di Egidio:
> On Saturday, 10 August 2019 11:09:02 UTC+2, Jonas Thörnvall  wrote:
> > Den fredag 9 augusti 2019 kl. 09:46:54 UTC+2 skrev Julio Di Egidio:
> <snip>
> > > <button id="myId" onclick="alert(this.id)">Click me</button>
> > > 
> > > RTFM.
> > 
> > Honestly i think you would be hardpressed to find the manual page for that one. I could find it answered using Google but "only if you knew" that the parameter passed was "this.id".
> 
> You miss the point: you should to read "the manual" *before* you get
> seriously involved with any language (or technology, or platform, etc.).
> 
> Last year I learned Python: I went through a couple of tutorials, then the
> main guide, finally a quick look across the reference documentation.  Well,
> Python is a relatively simple language and I am quite an expert programmer,
> anyway in some half a day I was done and now I know Python.  Not that I
> remember all the details by heart, also as I haven't used it much since,
> but I do remember: the philosophy underlying the language and the approach
> to implementation in that language, as well as the overall capabilities,
> and I can certainly find my way through the documentation if I need anything
> specific.
> 
> I have been doing that for all languages I have learned across my career,
> and not just I: that is how professional programmers work, the opposite of
> proceeding by trial and error.
> 
> So the point is not that you struggle with something then look it up and
> find a page in the manual that deals exactly with that: no, you first
> study the language, then just know what to look for...  (at least
> essentially.)
> 
> Back to JavaScript:
> 
> As for your specific problem, here is a relevant page (read to the bottom):
> <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this>
> And that's a topic so fundamental that, as a JS programmer, you are actually
> expected to know about the this reference almost by heart, at least what
> you do use.
> 
> But, back to the main issue, here is what you should really read once and for
> all, and then you can start "programming in JS":
> <https://developer.mozilla.org/en-US/docs/Web/JavaScript>
> (I'd say get at least 2-3 levels deep through the links).
> 
> > It would been more natural with "korgvol(korgvol1)" but that is just an opinion.
> 
> That's called "hard-coding things" and it's a no no.
> 
> E.g. "alert(this.id)" you can copy-paste into any inline handler and it'll
> just work, it is "abstract" enough: if you instead hard-code that id, you'll
> have to put and keep the right id everywhere by hand...
> 
> That said, get your head around nested quotes: you could do that, just an
> id is a string: "korgvol('korgvol1')".  Without quotes, it's interpreted
> as an identifier, and of course you get an error of the sort object is
> undefined.
> 
> HTH, and if you liked it you can send a donation to the Bitcoin address
> in my signature.
> 
> Julio

Ok sorted out.

function korgvol(kid,kvol){
	CCchan=176+channelTRX-1;
	alert("id="+kid+" vol="+kvol);
	CCvol=kvol;
	if(kid=="korgvol1") {CCtype=0}
	else if (kid=="korgvol2") {CCtype=1}
	else if (kid=="korgvol3") {CCtype=2}
	else if (kid=="korgvol4") {CCtype=3}
	else if (kid=="korgvol5") {CCtype=4}
	else if (kid=="korgvol6") {CCtype=5}
	else if (kid=="korgvol7") {CCtype=6}
	else if (kid=="korgvol8") {CCtype=7}
	else if (kid=="korgvol9") {CCtype=8}
	else if (kid=="korgvol10") {CCtype=9}
	else if (kid=="korgvol11") {CCtype=10}
	else if (kid=="korgvol12") {CCtype=11}
	else if (kid=="korgvol13") {CCtype=12}
	else if (kid=="korgvol14") {CCtype=13}
	else if (kid=="korgvol15") {CCtype=14}
	else if (kid=="korgvol16") {CCtype=15}
	settingChange=[CCchan,CCtype,CCvol];
	outportarr[outportindex].send(settingChange);
}

<tr bgcolor=chartreuse height=120>
							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol1" min="0" max="127" orient="vertical"/></td>
							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol2" min="0" max="127" orient="vertical"/></td>
							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol3" min="0" max="127" orient="vertical"/></td>
							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol4" min="0" max="127" orient="vertical"/></td>
							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol5" min="0" max="127" orient="vertical"/></td>
							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol6" min="0" max="127" orient="vertical"/></td>
							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol7" min="0" max="127" orient="vertical"/></td>
							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol8" min="0" max="127" orient="vertical"/></td>
							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol9" min="0" max="127" orient="vertical"/></td>
							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol10" min="0" max="127" orient="vertical"/></td>
                             <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol11" min="0" max="127" orient="vertical"/></td>
							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol12" min="0" max="127" orient="vertical"/></td>
							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol13" min="0" max="127" orient="vertical"/></td>
							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol14" min="0" max="127" orient="vertical"/></td>
                             <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol15" min="0" max="127" orient="vertical"/></td>
							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol16" min="0" max="127" orient="vertical"/></td>
							</tr>

[toc] | [prev] | [next] | [standalone]

#37092

Jonas Thörnvall <jonas.thornvall@gmail.com> writes:

> Ok sorted out.
>
> function korgvol(kid,kvol){
> 	CCchan=176+channelTRX-1;
> 	alert("id="+kid+" vol="+kvol);
> 	CCvol=kvol;
> 	if(kid=="korgvol1") {CCtype=0}
> 	else if (kid=="korgvol2") {CCtype=1}
> 	else if (kid=="korgvol3") {CCtype=2}
> 	else if (kid=="korgvol4") {CCtype=3}
> 	else if (kid=="korgvol5") {CCtype=4}
> 	else if (kid=="korgvol6") {CCtype=5}
> 	else if (kid=="korgvol7") {CCtype=6}
> 	else if (kid=="korgvol8") {CCtype=7}
> 	else if (kid=="korgvol9") {CCtype=8}
> 	else if (kid=="korgvol10") {CCtype=9}
> 	else if (kid=="korgvol11") {CCtype=10}
> 	else if (kid=="korgvol12") {CCtype=11}
> 	else if (kid=="korgvol13") {CCtype=12}
> 	else if (kid=="korgvol14") {CCtype=13}
> 	else if (kid=="korgvol15") {CCtype=14}
> 	else if (kid=="korgvol16") {CCtype=15}
> 	settingChange=[CCchan,CCtype,CCvol];
> 	outportarr[outportindex].send(settingChange);
> }

Or maybe

function korgvol(kid, kvol)
{
 	outportarr[outportindex].send([
              176 + channelTRX - 1, parseInt(kid.substr(7)) - 1, kvol
        ]);
}

> <tr bgcolor=chartreuse height=120>
> 							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol1" min="0" max="127" orient="vertical"/></td>
> 							 <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range" onChange="korgvol(this.id,this.value)" id="korgvol2" min="0" max="127" orient="vertical"/></td>

... etc.

This looks like something that should be generated by some code.  Then
you'd have the 'CCType' ready to pass to the onChange handler.  You'd
append it to the string 'korgvol' to make the ID rather than doing it
the other way round.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#37109 — Extracting numbers from strings, using templates (was: Is the input type ID passed as a parameter onChange? If not how can i achieve it.)

Ben Bacarisse wrote:

> function korgvol(kid, kvol)
> {
>  outportarr[outportindex].send([
>               176 + channelTRX - 1, parseInt(kid.substr(7)) - 1, kvol
>         ]);
> }

  function korgvol (kid, kvol)
  {
    outportarr[outportindex].send([
      176 + channelTRX - 1,
      kid.match(/\d+/)[0] - 1,
      kvol
    ]);
  }

is safer and more flexible (for example, you can match explicitly for 
strings beginning with “korgvol” if you then use a backreference).

>> <tr bgcolor=chartreuse height=120>
>> <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range"
>> onChange="korgvol(this.id,this.value)" id="korgvol1" min="0" max="127"
>> orient="vertical"/></td>
>> <td valign=bottom align=middle>	<B>VOLUME</B><BR><input type="range"
>> onChange="korgvol(this.id,this.value)" id="korgvol2" min="0" max="127"
>> orient="vertical"/></td>
> 
> ... etc.
> 
> This looks like something that should be generated by some code.  Then
> you'd have the 'CCType' ready to pass to the onChange handler.  You'd
> append it to the string 'korgvol' to make the ID rather than doing it
> the other way round.

It is the classical use-case for a template engine.

While there are template engines like Mustache, a minimal template engine is 
also easily written:

  /**
   * A simple template engine.
   *
   * @author © 2019 Thomas 'PointedEars' Lahn <js@PointedEars.de>
   */
  class TemplateEngine
  {
    /**
     * Renders a template, using the specified variable set.
     *
     * @param {String} template
     * @param {Object} variables
     * @return {string}
     */
    render (template, variableSet) {
      return template.replace(
         /\\{|\{([^}]+)\}/g,
        (match, name) => (
          (name && variableSet.hasOwnProperty(name))
            ? variableSet[name]
            : match
        )
      ); 
    }

    /**
     * Repeats a template for each set of variables.
     *
     * @param {String} template
     * @param {Array}  variableSets
     * @return {string}
     */
    repeat (template, variableSets) {
      return variableSets.map(
        (variables) => this.render(template, variables)
      ).join('');
    }

  }
 
  const engine = new TemplateEngine();

  /*
   * NOTE: One of the few instances where .innerHTML,
   *       _in the absence of an alternative such as a doctree builder_,
   *       is a good idea.
   */
  table_row.innerHTML = engine.repeat(
    `
      <td valign="bottom" align="middle"><B>VOLUME</B><BR>
        <input type="range" onchange="korgvol(this.id, this.value)"
          id="{id}" min="0" max="127" orient="vertical"/></td>
    `,
    Array.from(new Array(16), (e, i) => ({id: `korgvol${i + 1}`}))
  );

Note that, pretty-printing aside, I have not attempted to correct
the abysmally bad, potentially invalid, markup, or a bad approach.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#37111 — Re: Extracting numbers from strings, using templates (was: Is the input type ID passed as a parameter onChange? If not how can i achieve it.)

On 2019-08-12, Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
>     render (template, variableSet) {
>       return template.replace(
>          /\\{|\{([^}]+)\}/g,
>         (match, name) => (
>           (name && variableSet.hasOwnProperty(name))
>             ? variableSet[name]
>             : match

The 1990s called and asked for their XSS-ridden template system back.

[toc] | [prev] | [next] | [standalone]

#37068

On 09.08.19 01:50, Jonas Thörnvall wrote:

> <input type="range" onChange="korgvol()" id="korgvol1" min="0"
> max="127" orient="vertical"/>
> 
> Well i guess it is not, korgvol() will not know it was called from
> korgvol1?

Wrong.

See
<https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange>



-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [next] | [standalone]

#37070

Arno Welzel <usenet@arnowelzel.de> wrote on 09 Aug 2019 in
comp.lang.javascript: 

> On 09.08.19 01:50, Jonas Thörnvall wrote:
> 
>> <input type="range" onChange="korgvol()" id="korgvol1" min="0"
>> max="127" orient="vertical"/>
>> 
>> Well i guess it is not, korgvol() will not know it was called from
>> korgvol1?
> 
> Wrong.
> 
> See
> <https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onc
> hange> 

So what is so wrong with:

onChange="korgvol(this)" 

or

onChange="korgvol(this.value)" 

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#37071

On 09.08.19 13:54, Evertjan. wrote:

> Arno Welzel <usenet@arnowelzel.de> wrote on 09 Aug 2019 in
> comp.lang.javascript: 
> 
>> On 09.08.19 01:50, Jonas Thörnvall wrote:
>>
>>> <input type="range" onChange="korgvol()" id="korgvol1" min="0"
>>> max="127" orient="vertical"/>
>>>
>>> Well i guess it is not, korgvol() will not know it was called from
>>> korgvol1?
>>
>> Wrong.
>>
>> See
>> <https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onc
>> hange> 
> 
> So what is so wrong with:
> 
> onChange="korgvol(this)" 
> 
> or
> 
> onChange="korgvol(this.value)" 

The first one is correct. You pass a reference to the element itself, so
you can query the value and the id from the element.

Also note, that "orient" is not a valid attribute! This is only specific
to Firefox and not allowed in HTML5. If you want to get a slider which
is vertical and uses valid HTML you need to use CSS.

Also see:
<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range>

Minimal example:

<!DOCTYPE html>
<html>
<head>
<title>Example for onChange</title>
<style>
.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}
.vertical-slider {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}
</style>
</head>
<body>
<div class="slider-wrapper">
<input type="range" class="vertical-slider" id="korgvol1"
       min="0" max="127"
       onChange="korgvol(this)"
/>
</div>
<script>
function korgvol(e)
{
    alert('ID: ' + e.id + ' / Selected value: ' + e.value);
}
</script>
</body>
</html>


-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [next] | [standalone]

#37072

Arno Welzel <usenet@arnowelzel.de> wrote on 09 Aug 2019 in 
comp.lang.javascript:

>> So what is so wrong with:
>> 
>> onChange="korgvol(this)" 
>> 
>> or
>> 
>> onChange="korgvol(this.value)" 
> 
> The first one is correct. You pass a reference to the element itself, so
> you can query the value and the id from the element.

Strange idea of 'correctness'.

It depends on the korgvol().

If you *also* want the have a button doing

<button onclick="korgvol('3.17');">3.17</button>

the secoond one might be the preferred choice.

Even

onChange="korgvol2(this.value, this.id)"

and

<button onclick="korgvol2('3.17','button23');">3.17</button>

might be someone's preference in a specific case.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#37073

On 09.08.19 15:35, Evertjan. wrote:

> Arno Welzel <usenet@arnowelzel.de> wrote on 09 Aug 2019 in 
> comp.lang.javascript:
> 
>>> So what is so wrong with:
>>>
>>> onChange="korgvol(this)" 
>>>
>>> or
>>>
>>> onChange="korgvol(this.value)" 
>>
>> The first one is correct. You pass a reference to the element itself, so
>> you can query the value and the id from the element.
> 
> Strange idea of 'correctness'.

No, the only possible answer in this case.

> It depends on the korgvol().

You proposed two possible solutions and only one is correct for the
specific requirement.

The OP said, quote:

<input type="range" onChange="korgvol()" id="korgvol1" min="0" max="127"
orient="vertical"/>

Well i guess it is not, korgvol() will not know it was called from korgvol1?

(end of quote)

So it seems the onchange handler should not only get the value but also
the information which element was changed. And for *THIS* requirement,
using onchange="korgvol(this)" is a correct way to achieve this and not
onchange="korgvol(this.value)" since the latter one will only pass a
value and not the information which element got changed.

> If you *also* want the have a button doing
> 
> <button onclick="korgvol('3.17');">3.17</button>
> 
> the secoond one might be the preferred choice.

This is a different case:

1) onclick() and not onchange()

2) *set* a value and not *read* a value from control


> Even
> 
> onChange="korgvol2(this.value, this.id)"
> 
> and
> 
> <button onclick="korgvol2('3.17','button23');">3.17</button>
> 
> might be someone's preference in a specific case.

Sure. But the original question did not include these.



-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [standalone]

Page 3 of 3 — ← Prev page 1 2 [3]

Back to top | Article view | comp.lang.javascript

csiph-web