JSFiddle - React, Tailwind, and code Playground

by Amin Kodaganur

HTML

<input type="text" id="one" value="green" />
<input type="text" id="two" value="yellow" />

<button id="button">Change</button>
<div id="test">
  
</div>

CSS

#test{
  width : 200px;
  height : 200px;
}

JavaScript

var dom = document.getElementById("test");


var colorIt = function(){
  var val1 = document.getElementById("one").value;
  var val2 = document.getElementById("two").value;
  dom.style.background = '-webkit-linear-gradient(left, ' + val1 + ', ' + val2 + ')';
}
colorIt();

document.getElementById("button").addEventListener('click',colorIt);