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

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

Adding extra element "to option list" using next loop?

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

Contents

  Adding extra element "to option list" using next loop? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2018-11-24 00:40 -0800
    Re: Adding extra element "to option list" using next loop? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2018-11-24 05:35 -0800
    Re: Adding extra element "to option list" using next loop? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2018-11-25 19:57 -0800
      Re: Adding extra element "to option list" using next loop? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2018-11-26 13:05 +0100
        Re: Adding extra element "to option list" using next loop? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2018-11-26 22:45 -0800
          Re: Adding extra element "to option list" using next loop? Jake Jarvis <pig_in_shoes@yahoo.com> - 2018-11-27 10:30 +0100
            Re: Adding extra element "to option list" using next loop? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2018-11-27 12:08 +0100
              Re: Adding extra element "to option list" using next loop? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2018-11-27 12:43 -0800
                Re: Adding extra element "to option list" using next loop? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2018-11-27 23:39 +0100
                  Re: Adding extra element "to option list" using next loop? Jonas Thörnvall <jonas.thornvall@gmail.com> - 2018-11-28 20:25 -0800

#35853 — Adding extra element "to option list" using next loop?

I have a hard time understand the intrisic works of next loops, i use examples i found on net onto create an optionlist of "devices".

But i want to add an extra "option to the list of my own", but since i do not understand the inner works of next loop, i am a bit stumped howto add my extra alternative to the option list. Here i try to add it before, and i also tried after. But i do not know howto position myself relative the next loop?

Could someone please show me?

  var optout = document.createElement("option");
  optout.text = "WEB SF2 SYNTH MY ADDED ADDED ALTERNATIVE";
  document.getElementById("out_portsel").add(optout);
  for (listoutput = Lportout.next(); listoutput && !listoutput.done; listoutput = Lportout.next()) {
    var deviceOut = listoutput.value.name;
    optout.text = deviceOut;
    document.getElementById("out_portsel").add(optout);
  }

[toc] | [next] | [standalone]

#35855

Den lördag 24 november 2018 kl. 09:40:40 UTC+1 skrev Jonas Thörnvall:
> I have a hard time understand the intrisic works of next loops, i use examples i found on net onto create an optionlist of "devices".
> 
> But i want to add an extra "option to the list of my own", but since i do not understand the inner works of next loop, i am a bit stumped howto add my extra alternative to the option list. Here i try to add it before, and i also tried after. But i do not know howto position myself relative the next loop?
> 
> Could someone please show me?
> 
>   var optout = document.createElement("option");
>   optout.text = "WEB SF2 SYNTH MY ADDED ADDED ALTERNATIVE";
>   document.getElementById("out_portsel").add(optout);
>   for (listoutput = Lportout.next(); listoutput && !listoutput.done; listoutput = Lportout.next()) {
>     var deviceOut = listoutput.value.name;
>     optout.text = deviceOut;
>     document.getElementById("out_portsel").add(optout);
>   }

for (listoutput = Lportout.next(); listoutput && !listoutput.done; listoutput = Lportout.next())

Do these listed ports have an index, i do get they have an order?
How can i insert an option before listoutput? 
Can i start listoutput at index 1 by listoutput = 1+Lportout.next()
I guess i ask what is Lportout.next() is it an index/integer?
Or maybe the idea looping by next doesn't use/have numerical indexes at all but at some point they are ordered? And anything ordered must have an index?

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

#35858

Den lördag 24 november 2018 kl. 09:40:40 UTC+1 skrev Jonas Thörnvall:
> I have a hard time understand the intrisic works of next loops, i use examples i found on net onto create an optionlist of "devices".
> 
> But i want to add an extra "option to the list of my own", but since i do not understand the inner works of next loop, i am a bit stumped howto add my extra alternative to the option list. Here i try to add it before, and i also tried after. But i do not know howto position myself relative the next loop?
> 
> Could someone please show me?
> 
>   var optout = document.createElement("option");
>   optout.text = "WEB SF2 SYNTH MY ADDED ADDED ALTERNATIVE";
>   document.getElementById("out_portsel").add(optout);
>   for (listoutput = Lportout.next(); listoutput && !listoutput.done; listoutput = Lportout.next()) {
>     var deviceOut = listoutput.value.name;
>     optout.text = deviceOut;
>     document.getElementById("out_portsel").add(optout);
>   }

What is the reason for this code not showing any element within loop just the extra added option? It seem to me it should add to the elements created in loop?

 var optout = document.createElement("option");
  for (listoutput = Lportout.next(); listoutput && !listoutput.done; listoutput = Lportout.next()) {
    var deviceOut = listoutput.value.name;
    optout.text = deviceOut;
    document.getElementById("out_portsel").add(optout);
  }
  test= document.getElementById("out_portsel");
  optout.text = "SF2 SYNTH WEB";
  test.add(optout);

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

#35859

=?UTF-8?Q?Jonas_Th=C3=B6rnvall?= <jonas.thornvall@gmail.com> wrote on 26
Nov 2018 in comp.lang.javascript: 

> Den lördag 24 november 2018 kl. 09:40:40 UTC+1 skrev Jonas Thörnvall:
>> I have a hard time understand the intrisic works of next loops, i use
>> exa 
> mples i found on net onto create an optionlist of "devices".
>> 
>> But i want to add an extra "option to the list of my own", but since i
>> do 
>  not understand the inner works of next loop, i am a bit stumped howto
>  add my extra alternative to the option list. Here i try to add it
>  before, and i also tried after. But i do not know howto position myself
>  relative the next loop? 
>> 
>> Could someone please show me?
>> 
>>   var optout = document.createElement("option");
>>   optout.text = "WEB SF2 SYNTH MY ADDED ADDED ALTERNATIVE";
>>   document.getElementById("out_portsel").add(optout);
>>   for (listoutput = Lportout.next(); listoutput && !listoutput.done; li
> stoutput = Lportout.next()) {
>>     var deviceOut = listoutput.value.name;
>>     optout.text = deviceOut;
>>     document.getElementById("out_portsel").add(optout);
>>   }
> 
> What is the reason for this code not showing any element within loop
> just the extra added option? It seem to me it should add to the elements
> created in loop? 
> 
>  var optout = document.createElement("option");
>   for (listoutput = Lportout.next(); listoutput && !listoutput.done;
>   listoutput = Lportout.next()) { 
>     var deviceOut = listoutput.value.name;
>     optout.text = deviceOut;
>     document.getElementById("out_portsel").add(optout);
>   }
>   test= document.getElementById("out_portsel");
>   optout.text = "SF2 SYNTH WEB";
>   test.add(optout);

You will need a NEW optout each time, meThinks():

[ES2015]
for (...) {
    const optout = document.createElement("OPTION");
    ...
    document.getElementById("out_portsel").appendChild(optout);
};



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

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

#35860

Den måndag 26 november 2018 kl. 13:05:57 UTC+1 skrev Evertjan.:
> =?UTF-8?Q?Jonas_Th=C3=B6rnvall?= <jonas.thornvall@gmail.com> wrote on 26
> Nov 2018 in comp.lang.javascript: 
> 
> > Den lördag 24 november 2018 kl. 09:40:40 UTC+1 skrev Jonas Thörnvall:
> >> I have a hard time understand the intrisic works of next loops, i use
> >> exa 
> > mples i found on net onto create an optionlist of "devices".
> >> 
> >> But i want to add an extra "option to the list of my own", but since i
> >> do 
> >  not understand the inner works of next loop, i am a bit stumped howto
> >  add my extra alternative to the option list. Here i try to add it
> >  before, and i also tried after. But i do not know howto position myself
> >  relative the next loop? 
> >> 
> >> Could someone please show me?
> >> 
> >>   var optout = document.createElement("option");
> >>   optout.text = "WEB SF2 SYNTH MY ADDED ADDED ALTERNATIVE";
> >>   document.getElementById("out_portsel").add(optout);
> >>   for (listoutput = Lportout.next(); listoutput && !listoutput.done; li
> > stoutput = Lportout.next()) {
> >>     var deviceOut = listoutput.value.name;
> >>     optout.text = deviceOut;
> >>     document.getElementById("out_portsel").add(optout);
> >>   }
> > 
> > What is the reason for this code not showing any element within loop
> > just the extra added option? It seem to me it should add to the elements
> > created in loop? 
> > 
> >  var optout = document.createElement("option");
> >   for (listoutput = Lportout.next(); listoutput && !listoutput.done;
> >   listoutput = Lportout.next()) { 
> >     var deviceOut = listoutput.value.name;
> >     optout.text = deviceOut;
> >     document.getElementById("out_portsel").add(optout);
> >   }
> >   test= document.getElementById("out_portsel");
> >   optout.text = "SF2 SYNTH WEB";
> >   test.add(optout);
> 
> You will need a NEW optout each time, meThinks():
> 
> [ES2015]
> for (...) {
>     const optout = document.createElement("OPTION");
>     ...
>     document.getElementById("out_portsel").appendChild(optout);
> };
> 
> 
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

Maybe i missunderstand you, but the loop reading ports/devices into the option list work just fine no matter how many ports devices i have. 

The problem arise when i want to add a pseudo port of my own to the list before, after or at index an index.

Before it will be overwritten in loop, after it will be the only option element.
JT

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

#35861

Am 27.11.2018 um 07:45 schrieb Jonas Thörnvall:
> Den måndag 26 november 2018 kl. 13:05:57 UTC+1 skrev Evertjan.:
>> =?UTF-8?Q?Jonas_Th=C3=B6rnvall?= <jonas.thornvall@gmail.com> wrote on 26
>> Nov 2018 in comp.lang.javascript:
>>
>>> Den lördag 24 november 2018 kl. 09:40:40 UTC+1 skrev Jonas Thörnvall:
>>>> I have a hard time understand the intrisic works of next loops, i use
>>>> exa
>>> mples i found on net onto create an optionlist of "devices".
>>>>
>>>> But i want to add an extra "option to the list of my own", but since i
>>>> do
>>>   not understand the inner works of next loop, i am a bit stumped howto
>>>   add my extra alternative to the option list. Here i try to add it
>>>   before, and i also tried after. But i do not know howto position myself
>>>   relative the next loop?
>>>>
>>>> Could someone please show me?
>>>>
>>>>    var optout = document.createElement("option");
>>>>    optout.text = "WEB SF2 SYNTH MY ADDED ADDED ALTERNATIVE";
>>>>    document.getElementById("out_portsel").add(optout);
>>>>    for (listoutput = Lportout.next(); listoutput && !listoutput.done; li
>>> stoutput = Lportout.next()) {
>>>>      var deviceOut = listoutput.value.name;
>>>>      optout.text = deviceOut;
>>>>      document.getElementById("out_portsel").add(optout);
>>>>    }
>>>
>>> What is the reason for this code not showing any element within loop
>>> just the extra added option? It seem to me it should add to the elements
>>> created in loop?
>>>
>>>   var optout = document.createElement("option");
>>>    for (listoutput = Lportout.next(); listoutput && !listoutput.done;
>>>    listoutput = Lportout.next()) {
>>>      var deviceOut = listoutput.value.name;
>>>      optout.text = deviceOut;
>>>      document.getElementById("out_portsel").add(optout);
>>>    }
>>>    test= document.getElementById("out_portsel");
>>>    optout.text = "SF2 SYNTH WEB";
>>>    test.add(optout);
>>
>> You will need a NEW optout each time, meThinks():
>>
>> [ES2015]
>> for (...) {
>>      const optout = document.createElement("OPTION");
>>      ...
>>      document.getElementById("out_portsel").appendChild(optout);
>> };
>>
>>
>>
>> -- 
>> Evertjan.
>> The Netherlands.
>> (Please change the x'es to dots in my emailaddress)
> 
> Maybe i missunderstand you, but the loop reading ports/devices into the option list work just fine no matter how many ports devices i have.
> 
> The problem arise when i want to add a pseudo port of my own to the list before, after or at index an index.
> 
> Before it will be overwritten in loop, after it will be the only option element.
> JT
> 

If the node argument to appendChild *already* is in the document, it 
will simply be moved to the new position.

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

#35862

Jake Jarvis <pig_in_shoes@yahoo.com> wrote on 27 Nov 2018 in
comp.lang.javascript: 

> Am 27.11.2018 um 07:45 schrieb Jonas Thörnvall:
>> Den måndag 26 november 2018 kl. 13:05:57 UTC+1 skrev Evertjan.:
>>> =?UTF-8?Q?Jonas_Th=C3=B6rnvall?= <jonas.thornvall@gmail.com> wrote on
>>> 26 Nov 2018 in comp.lang.javascript:
>>>
>>>> Den lördag 24 november 2018 kl. 09:40:40 UTC+1 skrev Jonas
>>>> Thörnvall: 
>>>>> I have a hard time understand the intrisic works of next loops, i
>>>>> use exa
>>>> mples i found on net onto create an optionlist of "devices".
>>>>>
>>>>> But i want to add an extra "option to the list of my own", but since
>>>>> i do
>>>>   not understand the inner works of next loop, i am a bit stumped
>>>>   howto add my extra alternative to the option list. Here i try to
>>>>   add it before, and i also tried after. But i do not know howto
>>>>   position myself relative the next loop?
>>>>>
>>>>> Could someone please show me?
>>>>>
>>>>>    var optout = document.createElement("option");
>>>>>    optout.text = "WEB SF2 SYNTH MY ADDED ADDED ALTERNATIVE";
>>>>>    document.getElementById("out_portsel").add(optout);
>>>>>    for (listoutput = Lportout.next(); listoutput &&
>>>>>    !listoutput.done; li 
>>>> stoutput = Lportout.next()) {
>>>>>      var deviceOut = listoutput.value.name;
>>>>>      optout.text = deviceOut;
>>>>>      document.getElementById("out_portsel").add(optout);
>>>>>    }
>>>>
>>>> What is the reason for this code not showing any element within loop
>>>> just the extra added option? It seem to me it should add to the
>>>> elements created in loop?
>>>>
>>>>   var optout = document.createElement("option");
>>>>    for (listoutput = Lportout.next(); listoutput && !listoutput.done;
>>>>    listoutput = Lportout.next()) {
>>>>      var deviceOut = listoutput.value.name;
>>>>      optout.text = deviceOut;
>>>>      document.getElementById("out_portsel").add(optout);
>>>>    }
>>>>    test= document.getElementById("out_portsel");
>>>>    optout.text = "SF2 SYNTH WEB";
>>>>    test.add(optout);
>>>
>>> You will need a NEW optout each time, meThinks():
>>>
>>> [ES2015]
>>> for (...) {
>>>      const optout = document.createElement("OPTION");
>>>      ...
>>>      document.getElementById("out_portsel").appendChild(optout);
>>> };
>>>
>>>
>>>
>>> -- 
>>> Evertjan.
>>> The Netherlands.
>>> (Please change the x'es to dots in my emailaddress)
>> 
>> Maybe i missunderstand you, but the loop reading ports/devices into the
>> option list work just fine no matter how many ports devices i have. 
>> 
>> The problem arise when i want to add a pseudo port of my own to the
>> list before, after or at index an index. 
>> 
>> Before it will be overwritten in loop, after it will be the only option
>> element. JT
>> 
> 
> If the node argument to appendChild *already* is in the document, it 
> will simply be moved to the new position.

That is why one should declare a NEW <OPTION> element each time,
or configure one's [= Jonas'es] Q better.

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

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

#35863

Den tisdag 27 november 2018 kl. 12:08:25 UTC+1 skrev Evertjan.:
> Jake Jarvis <pig_in_shoes@yahoo.com> wrote on 27 Nov 2018 in
> comp.lang.javascript: 
> 
> > Am 27.11.2018 um 07:45 schrieb Jonas Thörnvall:
> >> Den måndag 26 november 2018 kl. 13:05:57 UTC+1 skrev Evertjan.:
> >>> =?UTF-8?Q?Jonas_Th=C3=B6rnvall?= <jonas.thornvall@gmail.com> wrote on
> >>> 26 Nov 2018 in comp.lang.javascript:
> >>>
> >>>> Den lördag 24 november 2018 kl. 09:40:40 UTC+1 skrev Jonas
> >>>> Thörnvall: 
> >>>>> I have a hard time understand the intrisic works of next loops, i
> >>>>> use exa
> >>>> mples i found on net onto create an optionlist of "devices".
> >>>>>
> >>>>> But i want to add an extra "option to the list of my own", but since
> >>>>> i do
> >>>>   not understand the inner works of next loop, i am a bit stumped
> >>>>   howto add my extra alternative to the option list. Here i try to
> >>>>   add it before, and i also tried after. But i do not know howto
> >>>>   position myself relative the next loop?
> >>>>>
> >>>>> Could someone please show me?
> >>>>>
> >>>>>    var optout = document.createElement("option");
> >>>>>    optout.text = "WEB SF2 SYNTH MY ADDED ADDED ALTERNATIVE";
> >>>>>    document.getElementById("out_portsel").add(optout);
> >>>>>    for (listoutput = Lportout.next(); listoutput &&
> >>>>>    !listoutput.done; li 
> >>>> stoutput = Lportout.next()) {
> >>>>>      var deviceOut = listoutput.value.name;
> >>>>>      optout.text = deviceOut;
> >>>>>      document.getElementById("out_portsel").add(optout);
> >>>>>    }
> >>>>
> >>>> What is the reason for this code not showing any element within loop
> >>>> just the extra added option? It seem to me it should add to the
> >>>> elements created in loop?
> >>>>
> >>>>   var optout = document.createElement("option");
> >>>>    for (listoutput = Lportout.next(); listoutput && !listoutput.done;
> >>>>    listoutput = Lportout.next()) {
> >>>>      var deviceOut = listoutput.value.name;
> >>>>      optout.text = deviceOut;
> >>>>      document.getElementById("out_portsel").add(optout);
> >>>>    }
> >>>>    test= document.getElementById("out_portsel");
> >>>>    optout.text = "SF2 SYNTH WEB";
> >>>>    test.add(optout);
> >>>
> >>> You will need a NEW optout each time, meThinks():
> >>>
> >>> [ES2015]
> >>> for (...) {
> >>>      const optout = document.createElement("OPTION");
> >>>      ...
> >>>      document.getElementById("out_portsel").appendChild(optout);
> >>> };
> >>>
> >>>
> >>>
> >>> -- 
> >>> Evertjan.
> >>> The Netherlands.
> >>> (Please change the x'es to dots in my emailaddress)
> >> 
> >> Maybe i missunderstand you, but the loop reading ports/devices into the
> >> option list work just fine no matter how many ports devices i have. 
> >> 
> >> The problem arise when i want to add a pseudo port of my own to the
> >> list before, after or at index an index. 
> >> 
> >> Before it will be overwritten in loop, after it will be the only option
> >> element. JT
> >> 
> > 
> > If the node argument to appendChild *already* is in the document, it 
> > will simply be moved to the new position.
> 
> That is why one should declare a NEW <OPTION> element each time,
> or configure one's [= Jonas'es] Q better.
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

Thanks Evertjan, it finally got thru my filter understanding what you were saying.


  for (listoutput = Lportout.next(); listoutput && !listoutput.done; listoutput = Lportout.next()) {
    var optout = document.createElement("option");
    var deviceOut = listoutput.value.name;
    optout.text = deviceOut;
    document.getElementById("out_portsel").add(optout);
  }
   var optout = document.createElement("option");
   test= document.getElementById("out_portsel");
   optout.text = "SF2 SYNTH WEB";
   test.add(optout);

But i really do ot understand the reason why i have to create a new "element?" to add something to an option list. Isn't it just indexed strings, i mean optout.text is just a string?

I doubt i ever get the hang of objectoritented programming and the use of objects.

Maybe it is not necessary to have objects as elements of the option list "well the way i found it done on the web", and one just could create an option list of strings?

To me optout seem like some sort of container that have to be created before i can push a string into a list. It is not clear to me why it is so?

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

#35864

<jonas.thornvall@gmail.com> wrote on 27 Nov 2018 in comp.lang.javascript: 

> But i really do ot understand the reason why i have to create a new
> "element?" to add something to an option list. Isn't it just indexed
> strings, i mean optout.text is just a string? 

Such element becomes a node, when you insert/add/move it 
at/to the right place in the DOM-tree.

The htmltext-file that is used to build up your page 
is already parsed/executed and converted to a DOM-tree,
so forget about HTML-strings for now.

Now you are manipulating that DOM-tree [*1],
and each <option> is a new element/node, 
and each "text" in that element is a new text-node.

So if you re-use an earlier created[!] node,
you lose the function it had. 

So if you have 3 <option>-nodes and want a fourth and fiveth one,
you have to create TWO new ADDITIONAL nodes.

==============

[*1] if you use .innerHTML instead of DOM-commmands to insert something,
you in effect do a NEW parsing of that string, but that hampers your 
learning process as it does now, so better AVOID .innerHTML for now.


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

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

#35865

Den onsdag 28 november 2018 kl. 00:40:07 UTC+1 skrev Evertjan.:
> <jonas.thornvall@gmail.com> wrote on 27 Nov 2018 in comp.lang.javascript: 
> 
> > But i really do ot understand the reason why i have to create a new
> > "element?" to add something to an option list. Isn't it just indexed
> > strings, i mean optout.text is just a string? 
> 
> Such element becomes a node, when you insert/add/move it 
> at/to the right place in the DOM-tree.
> 
> The htmltext-file that is used to build up your page 
> is already parsed/executed and converted to a DOM-tree,
> so forget about HTML-strings for now.
> 
> Now you are manipulating that DOM-tree [*1],
> and each <option> is a new element/node, 
> and each "text" in that element is a new text-node.
> 
> So if you re-use an earlier created[!] node,
> you lose the function it had. 
> 
> So if you have 3 <option>-nodes and want a fourth and fiveth one,
> you have to create TWO new ADDITIONAL nodes.
> 
> ==============
> 
> [*1] if you use .innerHTML instead of DOM-commmands to insert something,
> you in effect do a NEW parsing of that string, but that hampers your 
> learning process as it does now, so better AVOID .innerHTML for now.
> 
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

Ok thanks Evertjan.

[toc] | [prev] | [standalone]

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

csiph-web