JavaScript fix for change text shadow

Question

I need some help regarding the JavaScript function I'm using which changes the text shadow based on the user input field. It is working fine when I add the complete value like 3px 3px 3px red.

But I'm trying to make it like:

Javascript automatically adds 3px 3px 3px. And the user has to write the shadow color only.

Here is the JavaScript function:

function changeBackground(obj) {
    document.getElementById("coltext").style.textShadow = obj.value;
}

And this is the HTML I'm using

<input id="color" type="text" onchange="changeBackground(this);" />
<br /><span id="coltext">CHANGE THE SHADOW OF THIS TEXT</span>

I think there should be something added in front of obj.value. As obj.value will be the color which user will add.

Answer 1

Try keyup event and the + (concat operator on strings)

HTML

<span id="coltext">This is some text</span>
<br />
<input type="text" id="model" />

Javascript

var input = document.getElementById('model');
var text = document.getElementById('coltext');

function changeTextShadow(event) {
  var value = input.value;
  var parts = value.split(' ');
  text.style.textShadow = '3px 3px 3px ' + value;
}

input.addEventListener('keyup', changeTextShadow);

Working example https://codepen.io/anon/pen/VpXmWr

---

In case you want this to run when the user press "enter". you can check the key pressed by accessing event's keyCode

function changeTextShadow(event) {
  if ( event.keyCode === 13 ) { //enter's keycode is 13 (ascii code)
    var value = input.value;
    var parts = value.split(' ');
    text.style.textShadow = '3px 3px 3px ' + value; 
  }
}

Working example https://codepen.io/anon/pen/BWrQXX