Path: csiph.com!3.eu.feeder.erje.net!feeder.erje.net!weretis.net!feeder7.news.weretis.net!news.mb-net.net!open-news-network.org!.POSTED.2.226.197.178.dynamic.wless.zhbmb00p-cgnat.res.cust.swisscom.ch!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: input type="color"
Supersedes: <5321457.DvuYhMxLoT@PointedEars.de>
Date: Thu, 28 Nov 2019 18:52:18 +0100
Organization: PointedEars Software (PES)
Lines: 40
Message-ID: <5564197.lOV4Wx5bFT@PointedEars.de>
References: <EuOdnX4YMNxVk0vAnZ2dnUU7-LfNnZ2d@westnet.com.au> <h3pnucFua1sU1@mid.individual.net> <qr8fig$9qm$1@dont-email.me> <XnsAB0F86568E313eejj99@194.109.6.166> <-oydnbqUVL4VAkXAnZ2dnUU7-dnNnZ2d@westnet.com.au> <XnsAB108C3B8DBBEeejj99@194.109.6.166> <DuWdnZpAVtpqKETAnZ2dnUU7-TXNnZ2d@westnet.com.au> <XnsAB1167E5E72A1eejj99@194.109.6.166> <ibudnSCvzuOJeUfAnZ2dnUU7-Q_NnZ2d@westnet.com.au>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="ISO-8859-1"
Content-Transfer-Encoding: 7Bit
Injection-Info: gwaiyur.mb-net.net; posting-host="2.226.197.178.dynamic.wless.zhbmb00p-cgnat.res.cust.swisscom.ch:178.197.226.2"; logging-data="16654"; mail-complaints-to="abuse@open-news-network.org"
User-Agent: KNode/4.14.10
Cancel-Key: sha1:VqbhC9uZxD31XiijWx0qCn+udOI=
Cancel-Lock: sha1:/kmK2FjYPSauzY3X2aeMZlkiQdQ=
X-Face: %i>XG-yXR'\"2P/C_aO%~;2o~?g0pPKmbOw^=NT`tprDEf++D.m7"}HW6.#=U:?2GGctkL,f89@H46O$ASoW&?s}.k+&.<b';Md8`dH6iqhT)6C^.Px|[=M@7=Ik[_w<%n1Up"LPQNu2m8|L!/3iby{-]A+#YE}Kl{Cw$\U!kD%K}\2jz"QQP6Uqr],./"?;=4v
X-User-ID: U2FsdGVkX193azMYvTrXd18JyefdKB610Q9tYQEhRI/vMt19u7Eviw==
Face: iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAGFBMVEXTxa4RFk5dUWANED8PFEfy7+MGBiW+n3ZNF/QuAAACaElEQVQ4jVXUwVOcMBQG8Dc7Rc4PUntdWV2uxjDpGaGeozOp1woar4jd5t/v9wLstMwsA/ntlxdCAgUc1hjTc9/JCZfGoo3wG3HdmdAWrIJRHe7GM/TmpY5VFefuVcAkkPbLIaN8rmPmjloyZxgyR3GuJ4K0AGtJ2htz8o7yqikm759fldQXaMpbDzjKAG+8v+AugVTOPO5DOjLvGtUYQwh0CPjnVMyGd+8/GfUB5nLKJDD2aLDh5HYyMDJGDwQIo2ZmZcKbowNmAdB/AzyFhrmF2MHRb0QJJfaAnwGB6orZhoykLzJtGwF/xpYxI1dswomiUj3gTuAIqCn/4C7cULwGNBtwMTk3Y4LfKB5YUaOKBKYtpplm7u0vip8tU1NWWyI/7XdcSuIDoMt6rVHMWT0DbjHPGqDqZVSa6zleLcUTcIKLoMv3ueJluALtAo9B302zPPlrtiVScRdCjXvVh3e3JpYa/jjkuC9N+LrBMlz/eAN4eQijX2EdLo6c5tGGHwLyHFtXk89dDGHwCVhG9T0S/j55AhRZgkMCmUQXJ49TnS1wnQDvw0eAh9ICeMmEFbCnPMFzjAvsWoEWEFdYEx+S0MoUZ1gT1wId8+AF3Bl2OoEu906AUHx5VLw/gXYg/x84loOah/2UYNrgiwSwGO7RfUzVBbx/kgpckumGOi6QirtD6gkLTitbnxNol47S2jVc2vsN5kPqaAHT8uUdAJM4v/DanjYOwmUjWznGfwB7sGtAtor5BgofDuzaRj4kSQAqDakTsKORa3Q3xKi3gE1fhl71KRMqrdZ2AWNNg/YOhQyrVBnb+i+nEg4bsDA+egAAAABJRU5ErkJggg==
Xref: csiph.com comp.lang.javascript: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.