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

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

InnerHTML quirks

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

Contents

  InnerHTML quirks Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-06-26 22:51 -0700
    Re: InnerHTML quirks Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-06-26 23:00 -0700
      Re: InnerHTML quirks Arno Welzel <usenet@arnowelzel.de> - 2019-06-27 10:20 +0200
        Re: InnerHTML quirks Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-06-27 01:53 -0700
          Re: InnerHTML quirks Arno Welzel <usenet@arnowelzel.de> - 2019-06-27 10:55 +0200
            Re: InnerHTML quirks Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-06-27 02:21 -0700
              Re: InnerHTML quirks Arno Welzel <usenet@arnowelzel.de> - 2019-06-27 17:26 +0200
          Re: InnerHTML quirks Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-06-27 01:59 -0700
            Re: InnerHTML quirks Arno Welzel <usenet@arnowelzel.de> - 2019-06-27 11:01 +0200
    Re: InnerHTML quirks Arno Welzel <usenet@arnowelzel.de> - 2019-06-27 10:18 +0200
      Re: InnerHTML quirks Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-06-27 01:43 -0700
        Re: InnerHTML quirks Arno Welzel <usenet@arnowelzel.de> - 2019-06-27 11:00 +0200
          Re: InnerHTML quirks Silvio <silvio@internet.com> - 2019-06-27 15:05 +0200

#36935 — InnerHTML quirks

Given i have an option list generated dynamically and then inserted to my main HTML file with using div.

<div id="bankOptList"></div>

And inserted using javascript.
function bankOptionList(){
bankOptNames="";	
bankSelect ="<font color=white><b>BANK:</b></font> <select id='selBank' onChange='bankSelection()'>\n";
for (var r=0;r<bankName.length;r++){
bankOption=bankName[r];
//alert(bankName[r]);
bankOptNames+="<option value="+r+"> "+r+"  "+bankOption+"</option>\n";
}
bankOptEnd="</select> \n";
bankOptionString=bankSelect+bankOptNames+bankOptEnd;
//alert(bankOptionString);
document.getElementById("bankOptList").innerHTML=bankOptionString;
}


How can i set selected index?
The usual way below do not work.
document.getElementById("selBansk").selectedIndex;

I must somehow also refer to "bankOptList" to set index of option list?
How is this done in most obvious straightforward way.

I find it weird though that the innerHTML part has no problem reach functions in main. But main seem unaware of the id's within innerHTML.

"well expcept for the container id" bankOptList. 

[toc] | [next] | [standalone]

#36936

Den torsdag 27 juni 2019 kl. 07:51:54 UTC+2 skrev Jonas Thörnvall:
> Given i have an option list generated dynamically and then inserted to my main HTML file with using div.
> 
> <div id="bankOptList"></div>
> 
> And inserted using javascript.
> function bankOptionList(){
> bankOptNames="";	
> bankSelect ="<font color=white><b>BANK:</b></font> <select id='selBank' onChange='bankSelection()'>\n";
> for (var r=0;r<bankName.length;r++){
> bankOption=bankName[r];
> //alert(bankName[r]);
> bankOptNames+="<option value="+r+"> "+r+"  "+bankOption+"</option>\n";
> }
> bankOptEnd="</select> \n";
> bankOptionString=bankSelect+bankOptNames+bankOptEnd;
> //alert(bankOptionString);
> document.getElementById("bankOptList").innerHTML=bankOptionString;
> }
> 
> 
> How can i set selected index?
> The usual way below do not work.
> document.getElementById("selBansk").selectedIndex;
> 
> I must somehow also refer to "bankOptList" to set index of option list?
> How is this done in most obvious straightforward way.
> 
> I find it weird though that the innerHTML part has no problem reach functions in main. But main seem unaware of the id's within innerHTML.
> 
> "well expcept for the container id" bankOptList.

I have tried
  document.getElementById('selBank').selectedIndex.innerHTML = 4	;
It does not protest, but it does not change the selected option....

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

#36938

On 27.06.19 08:00, Jonas Thörnvall wrote:

> I have tried
>   document.getElementById('selBank').selectedIndex.innerHTML = 4	;

This is nonsense!

You can either read it the index:

myindex = document.getElementById('selBank').selectedIndex;

or set it:

document.getElementById('selBank').selectedIndex = 4;

But using "innerHTML" is nonsense! Why do you even think, that
"innerHTML" is used to set the index?



-- 
Arno Welzel
https://arnowelzel.de

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

#36940

Den torsdag 27 juni 2019 kl. 10:20:56 UTC+2 skrev Arno Welzel:
> On 27.06.19 08:00, Jonas Thörnvall wrote:
> 
> > I have tried
> >   document.getElementById('selBank').selectedIndex.innerHTML = 4	;
> 
> This is nonsense!
> 
> You can either read it the index:
> 
> myindex = document.getElementById('selBank').selectedIndex;
> 
> or set it:
> 
> document.getElementById('selBank').selectedIndex = 4;
> 
> But using "innerHTML" is nonsense! Why do you even think, that
> "innerHTML" is used to set the index?
> 
> 
> 
> -- 
> Arno Welzel
> https://arnowelzel.de

When you generate an option list dynamically and insert it with innerHTML
HTML document
<div id="bankOptList"></div>
Javascript
document.getElementById("bankOptList").innerHTML=bankOptionString; 

The "dynamically generated id selBank" is not available from main
Thus your suggested.
document.getElementById("selBansk").selectedIndex = 1; 

Will not work...

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

#36941

On 27.06.19 10:53, Jonas Thörnvall wrote:

> Den torsdag 27 juni 2019 kl. 10:20:56 UTC+2 skrev Arno Welzel:
>> On 27.06.19 08:00, Jonas Thörnvall wrote:
>>
>>> I have tried
>>>   document.getElementById('selBank').selectedIndex.innerHTML = 4	;
>>
>> This is nonsense!
>>
>> You can either read it the index:
>>
>> myindex = document.getElementById('selBank').selectedIndex;
>>
>> or set it:
>>
>> document.getElementById('selBank').selectedIndex = 4;
>>
>> But using "innerHTML" is nonsense! Why do you even think, that
>> "innerHTML" is used to set the index?
>>
>>
>>
>> -- 
>> Arno Welzel
>> https://arnowelzel.de
> 
> When you generate an option list dynamically and insert it with innerHTML

Yes - than it *is* HTML.

But the index is *not* HTML! It is just a number which you assign to the
property "selectedIndex".

> The "dynamically generated id selBank" is not available from main
> Thus your suggested.
> document.getElementById("selBansk").selectedIndex = 1; 
> 
> Will not work...

That's why I also suggested adding the "selected" attribute for the
selected option when you generate the HTML code.


-- 
Arno Welzel
https://arnowelzel.de

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

#36945

Den torsdag 27 juni 2019 kl. 10:55:17 UTC+2 skrev Arno Welzel:
> On 27.06.19 10:53, Jonas Thörnvall wrote:
> 
> > Den torsdag 27 juni 2019 kl. 10:20:56 UTC+2 skrev Arno Welzel:
> >> On 27.06.19 08:00, Jonas Thörnvall wrote:
> >>
> >>> I have tried
> >>>   document.getElementById('selBank').selectedIndex.innerHTML = 4	;
> >>
> >> This is nonsense!
> >>
> >> You can either read it the index:
> >>
> >> myindex = document.getElementById('selBank').selectedIndex;
> >>
> >> or set it:
> >>
> >> document.getElementById('selBank').selectedIndex = 4;
> >>
> >> But using "innerHTML" is nonsense! Why do you even think, that
> >> "innerHTML" is used to set the index?
> >>
> >>
> >>
> >> -- 
> >> Arno Welzel
> >> https://arnowelzel.de
> > 
> > When you generate an option list dynamically and insert it with innerHTML
> 
> Yes - than it *is* HTML.
> 
> But the index is *not* HTML! It is just a number which you assign to the
> property "selectedIndex".
> 
> > The "dynamically generated id selBank" is not available from main
> > Thus your suggested.
> > document.getElementById("selBansk").selectedIndex = 1; 
> > 
> > Will not work...
> 
> That's why I also suggested adding the "selected" attribute for the
> selected option when you generate the HTML code.

Honestly Arno why the fuck would one have to do that, and that will only work for initiation, you could never use it to select any  
 
> -- 
> Arno Welzel
> https://arnowelzel.de

Well i retract everything i said... It works perfectly well.
It was some months since i wrote the code and now i found, in code.

defaultBank=0;
document.getElementById("selBank").selectedIndex = defaultBank;
ListBankInstruments(defaultBank);

That is why it refused to change... It changed back...

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

#36947

On 27.06.19 11:21, Jonas Thörnvall wrote:

> Den torsdag 27 juni 2019 kl. 10:55:17 UTC+2 skrev Arno Welzel:
[...]
>> That's why I also suggested adding the "selected" attribute for the
>> selected option when you generate the HTML code.
> 
> Honestly Arno why the fuck would one have to do that, and that will only work for initiation, you could never use it to select any  

Well - you first asked how you can set the selected index when
generating the options list. And this would be one solution.

If you need to change the index afterwards - then use the selectedIndex
property.

However - you can also use the DOM to create a new select element with
options as well and *then* using selectedIndex afterwards would work
fine as well.

As an example on how to manipulate the DOM: I did this on my own website
to generate a dynamic chart on the fly:

<https://arnowelzel.de/en/tools/statistics>

See the source for how the generic placeholder gets replaced by the
chart canvas if the browser is able to support canvas elements at all.

> Well i retract everything i said... It works perfectly well.
> It was some months since i wrote the code and now i found, in code.
> 
> defaultBank=0;
> document.getElementById("selBank").selectedIndex = defaultBank;
> ListBankInstruments(defaultBank);
> 
> That is why it refused to change... It changed back...

Well - problem solved ;-)


-- 
Arno Welzel
https://arnowelzel.de

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

#36942

Den torsdag 27 juni 2019 kl. 10:53:25 UTC+2 skrev Jonas Thörnvall:
> Den torsdag 27 juni 2019 kl. 10:20:56 UTC+2 skrev Arno Welzel:
> > On 27.06.19 08:00, Jonas Thörnvall wrote:
> > 
> > > I have tried
> > >   document.getElementById('selBank').selectedIndex.innerHTML = 4	;
> > 
> > This is nonsense!
> > 
> > You can either read it the index:
> > 
> > myindex = document.getElementById('selBank').selectedIndex;
> > 
> > or set it:
> > 
> > document.getElementById('selBank').selectedIndex = 4;
> > 
> > But using "innerHTML" is nonsense! Why do you even think, that
> > "innerHTML" is used to set the index?
> > 
> > 
> > 
> > -- 
> > Arno Welzel
> > https://arnowelzel.de
> 
> When you generate an option list dynamically and insert it with innerHTML
> HTML document
> <div id="bankOptList"></div>
> Javascript
> document.getElementById("bankOptList").innerHTML=bankOptionString; 
> 
> The "dynamically generated id selBank" is not available from main
> Thus your suggested.
> document.getElementById("selBansk").selectedIndex = 1; 
> 
> Will not work...

This is just one of a million negative effects of the parent->child methodology used for dynamically generate "HTML text";

It probably has some uses, but sometimes dynamically generated HTML is just HTML precisely like dynamic pages created in PHP.

I am not interested in the structure, i just want some fucking text inserted.

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

#36944

On 27.06.19 10:59, Jonas Thörnvall wrote:

> This is just one of a million negative effects of the parent->child methodology used for dynamically generate "HTML text";

Then use the DOM to create elements! You don't have to use innerHTML at all.


-- 
Arno Welzel
https://arnowelzel.de

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

#36937

On 27.06.19 07:51, Jonas Thörnvall wrote:
> Given i have an option list generated dynamically and then inserted to my main HTML file with using div.
> 
> <div id="bankOptList"></div>
> 
> And inserted using javascript.
> function bankOptionList(){
> bankOptNames="";	
> bankSelect ="<font color=white><b>BANK:</b></font> <select id='selBank' onChange='bankSelection()'>\n";
> for (var r=0;r<bankName.length;r++){
> bankOption=bankName[r];
> //alert(bankName[r]);
> bankOptNames+="<option value="+r+"> "+r+"  "+bankOption+"</option>\n";
> }
> bankOptEnd="</select> \n";
> bankOptionString=bankSelect+bankOptNames+bankOptEnd;
> //alert(bankOptionString);
> document.getElementById("bankOptList").innerHTML=bankOptionString;
> }
> 
> 
> How can i set selected index?

By setting the "selected" attribute for the option, which should be
selected intially.

Also see:
<https://developer.mozilla.org/de/docs/Web/HTML/Element/option>

> The usual way below do not work.
> document.getElementById("selBansk").selectedIndex;

This does nothing.

If you want to *set* the index you have to assign it:

document.getElementById("selBansk").selectedIndex = 1;

Also see
<https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex>



-- 
Arno Welzel
https://arnowelzel.de

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

#36939

Den torsdag 27 juni 2019 kl. 10:18:30 UTC+2 skrev Arno Welzel:
> On 27.06.19 07:51, Jonas Thörnvall wrote:
> > Given i have an option list generated dynamically and then inserted to my main HTML file with using div.
> > 
> > <div id="bankOptList"></div>
> > 
> > And inserted using javascript.
> > function bankOptionList(){
> > bankOptNames="";	
> > bankSelect ="<font color=white><b>BANK:</b></font> <select id='selBank' onChange='bankSelection()'>\n";
> > for (var r=0;r<bankName.length;r++){
> > bankOption=bankName[r];
> > //alert(bankName[r]);
> > bankOptNames+="<option value="+r+"> "+r+"  "+bankOption+"</option>\n";
> > }
> > bankOptEnd="</select> \n";
> > bankOptionString=bankSelect+bankOptNames+bankOptEnd;
> > //alert(bankOptionString);
> > document.getElementById("bankOptList").innerHTML=bankOptionString;
> > }
> > 
> > 
> > How can i set selected index?
> 
> By setting the "selected" attribute for the option, which should be
> selected intially.
> 
> Also see:
> <https://developer.mozilla.org/de/docs/Web/HTML/Element/option>
> 
> > The usual way below do not work.
> > document.getElementById("selBansk").selectedIndex;
> 
> This does nothing.
> 
> If you want to *set* the index you have to assign it:
> 
> document.getElementById("selBansk").selectedIndex = 1;
> 
> Also see
> <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex>
> 
> 
> 
> -- 
> Arno Welzel
> https://arnowelzel.de

The whole point with my post is that it does not work for innerHTML Arno.
"yes i missed the =1"; that you posted sorry.

What worse is
  document.getElementById('selBank').selectedIndex.innerHTML = 1;S 
does not work either.

So the question is howto set the selected index for an option list "within a segment of innerHTML".

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

#36943

On 27.06.19 10:43, Jonas Thörnvall wrote:

> Den torsdag 27 juni 2019 kl. 10:18:30 UTC+2 skrev Arno Welzel:
>> On 27.06.19 07:51, Jonas Thörnvall wrote:
>>> Given i have an option list generated dynamically and then inserted to my main HTML file with using div.
>>>
>>> <div id="bankOptList"></div>
>>>
>>> And inserted using javascript.
>>> function bankOptionList(){
>>> bankOptNames="";	
>>> bankSelect ="<font color=white><b>BANK:</b></font> <select id='selBank' onChange='bankSelection()'>\n";
>>> for (var r=0;r<bankName.length;r++){
>>> bankOption=bankName[r];
>>> //alert(bankName[r]);
>>> bankOptNames+="<option value="+r+"> "+r+"  "+bankOption+"</option>\n";
>>> }
>>> bankOptEnd="</select> \n";
>>> bankOptionString=bankSelect+bankOptNames+bankOptEnd;
>>> //alert(bankOptionString);
>>> document.getElementById("bankOptList").innerHTML=bankOptionString;
>>> }
>>>
>>>
>>> How can i set selected index?
>>
>> By setting the "selected" attribute for the option, which should be
>> selected intially.
>>
>> Also see:
>> <https://developer.mozilla.org/de/docs/Web/HTML/Element/option>
[...]
> The whole point with my post is that it does not work for innerHTML Arno.

It DOES:

For a selected element - and ONLY for this - use:

if(r == my_selected_index) {
    selattr = " selected=\""selected\\"";
} else {
    selattr = ""
}

bankOptNames+="<option value="+r+selattr+"> "+r"  "+
    bankOption+"</option>\n";


> So the question is howto set the selected index for an option list "within a segment of innerHTML".

See above. And you should really try to *LEARN* how to use JavaScript
and HTML and not just do copy & paste.




-- 
Arno Welzel
https://arnowelzel.de

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

#36946

On 27-06-19 11:00, Arno Welzel wrote:
> On 27.06.19 10:43, Jonas Thörnvall wrote:
> 
>> Den torsdag 27 juni 2019 kl. 10:18:30 UTC+2 skrev Arno Welzel:
>>> On 27.06.19 07:51, Jonas Thörnvall wrote:
>>>> Given i have an option list generated dynamically and then inserted to my main HTML file with using div.
>>>>
>>>> <div id="bankOptList"></div>
>>>>
>>>> And inserted using javascript.
>>>> function bankOptionList(){
>>>> bankOptNames="";	
>>>> bankSelect ="<font color=white><b>BANK:</b></font> <select id='selBank' onChange='bankSelection()'>\n";
>>>> for (var r=0;r<bankName.length;r++){
>>>> bankOption=bankName[r];
>>>> //alert(bankName[r]);
>>>> bankOptNames+="<option value="+r+"> "+r+"  "+bankOption+"</option>\n";
>>>> }
>>>> bankOptEnd="</select> \n";
>>>> bankOptionString=bankSelect+bankOptNames+bankOptEnd;
>>>> //alert(bankOptionString);
>>>> document.getElementById("bankOptList").innerHTML=bankOptionString;
>>>> }
>>>>
>>>>
>>>> How can i set selected index?
>>>
>>> By setting the "selected" attribute for the option, which should be
>>> selected intially.
>>>
>>> Also see:
>>> <https://developer.mozilla.org/de/docs/Web/HTML/Element/option>
> [...]
>> The whole point with my post is that it does not work for innerHTML Arno.
> 
> It DOES:
> 
> For a selected element - and ONLY for this - use:
> 
> if(r == my_selected_index) {
>      selattr = " selected=\""selected\\"";
> } else {
>      selattr = ""
> }
> 
> bankOptNames+="<option value="+r+selattr+"> "+r"  "+
>      bankOption+"</option>\n";
> 
> 
>> So the question is howto set the selected index for an option list "within a segment of innerHTML".
> 
> See above. And you should really try to *LEARN* how to use JavaScript
> and HTML and not just do copy & paste.
> 
> 
> 
> 

Save your breath. He understands nothing and just copy/pastes shit 
around. Explanation is lost on him, he only wants working code, which 
you provided already.

[toc] | [prev] | [standalone]

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

csiph-web