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

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

Re: input type="color"

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

This discussion starts older than the indexed window; earlier articles aren't shown. The article labeled Started by below is the oldest one visible, not the original post.

Contents

  Re: input type="color" Andrew Poulos <ap_prog@hotmail.com> - 2019-11-25 07:12 +1100
    Re: input type="color" Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-11-28 18:52 +0100

#37775 — Re: input type="color"

On 24/11/2019 8:12 pm, Evertjan. wrote:
> Andrew Poulos <ap_prog@hotmail.com> wrote on 23 Nov 2019 in
> comp.lang.javascript:
> 
>> No, if I pick a colour it must also display a string representation of
>> that colour
> 
> It "must" not, you are just adding specs to show you "are" right.

You're mistaken if you believe I'm scoring my posts.

>> so that, should I want to use that colour again, I would be
>> able to enter that value instead of trying to find it
> 
>> ?
> 
> "?" ?

'"?" ?' ?

> <style>
> 	#showColour {width:120px;height:50px;border:black 2px solid;}
> </style>
> <div id='showColour'></div>
> <div id='showColourString'></div>
> <br><br>
> <input id='getColour' value='#'>
> <script>
> const getColour = document.querySelector('#getColour');
> const showColour = document.querySelector('#showColour');
> const showColourString = document.querySelector('#showColourString');
> 
> getColour.addEventListener("keyup", function() {
> 	if (this.value.length == 4 || this.value.length == 7) {
> 		showColour.style.backgroundColor = this.value;
> 		showColourString.innerHTML =  this.value;
> 	};
> });
> </script>

Ok.

Andrew Poulos

[toc] | [next] | [standalone]

#37890

Andrew Poulos wrote:

> On 24/11/2019 8:12 pm, Evertjan. wrote:
>> <style>
>> #showColour {width:120px;height:50px;border:black 2px solid;}
>> </style>
>> <div id='showColour'></div>
>> <div id='showColourString'></div>
>> <br><br>
>> <input id='getColour' value='#'>
>> <script>
>> const getColour = document.querySelector('#getColour');
>> const showColour = document.querySelector('#showColour');
>> const showColourString = document.querySelector('#showColourString');

This is much more efficient when written as follows:

  const getColour = document.getElementById('getColour');
  const showColour = document.getElementById('showColour');
  const showColourString = document.getElementById('showColourString');

See also: <https://gist.github.com/chitsaou/3066411>

Also, using these variable identifiers and therefore the IDs is unwise at 
best.  Those (verb + object) are identifiers that should only be used for 
*functions* and *methods*.
 
>> getColour.addEventListener("keyup", function() {
>> if (this.value.length == 4 || this.value.length == 7) {
>> showColour.style.backgroundColor = this.value;
>> showColourString.innerHTML =  this.value;

  showColourString.textContent = this.value;

But see above.

-- 
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] | [standalone]

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

csiph-web