Как изменить цвет div из заданного значения в JavaScript

Question

<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>

Когда я ввожу, например, красный в поле ввода, а затем нажимаю кнопку, ничего не происходит.

Answer 1

1. Пожалуйста, обратитесь к приведенному ниже коду, который должен помочь вам

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>

Answer 2

Вам не нужны эти одинарные кавычки, просто передайте само значение в атрибут background.

function changeColor(){

        var  nav = document.getElementById('nav');
        nav.style.background = document.querySelector("#color").value;
    }

Answer 3

Попробуйте, это будет работать:

function changeColor () {

var colorCode = document.getElementById('color').value;
 $("#nav").css('background', colorCode);
   }

Answer 4

Ниже код будет работать. Сэр, проверьте.

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>

Answer 5

<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>

Answer 6

изменить
nav.style.background = "'"+colorCode+"'";
на
nav.style.background = colorCode;