<div id="nav">
Some Text
</div>
<input type="text" id="color"><button onClick="changeColor()">Change</button>
<script>
function changeColor(){
var colorCode = document.getElementById('color').value;
var nav = document.getElementById('nav');
nav.style.background = "'"+colorCode+"'";
}
</script>
When i enter for ex.: red in the input field and than press the button, nothing happens.
You don't need those single quotes, just pass the value itself into the background attribute.
function changeColor(){
var nav = document.getElementById('nav');
nav.style.background = document.querySelector("#color").value;
}
1.please refer to below code which should help you
function changeColor() {
var colorCode = document.getElementById('color').value;
var nav = document.getElementById('nav');
nav.style.background = colorCode;
}<div id="nav">
Some Text
</div>
<input type="text" id="color"><button onClick="changeColor()">Change</button>change
nav.style.background = "'"+colorCode+"'";
to
nav.style.background = colorCode;
<div id="nav">
Some Text
</div>
<input type="text" id="color"><button onClick="changeColor()">Change</button>
<script>
function changeColor(){
var colorCode = document.getElementById('color').value;
var nav = document.getElementById('nav');
nav.style.backgroundColor = colorCode;
}
</script>
Try this this will work:
function changeColor(){
var colorCode = document.getElementById('color').value;
$("#nav").css('background', colorCode);
}
Below code will work. Sir check.
function changeColor(){
var colorCode = document.getElementById('color').value;
document.getElementById("nav").style.color = '#'+colorCode;
}<div id="nav">
Some Text
</div>
<input type="text" id="color" maxlength ="6"><button onClick="changeColor()">Change</button>