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

Groups > comp.lang.javascript > #37890

Re: input type="color"

Show all headers | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

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

csiph-web