вызов переменной внутри html

Question

Я пытаюсь создать скрипт, который, когда вы вводите шестнадцатеричное значение и нажимаете кнопку отправки, изменяет цвет текста на введенный цвет.

Кажется, проблема в том, как я зову переменную «UserInput» внутри переменной нового HTML

Любые идеи?

<script type="text/javascript"> 

function changeText3(){ 
    var userInput = document.getElementById('userInput').value; 
    var oldHTML = document.getElementById('para').innerHTML; 
    var newHTML = "<span style='color:userInput'>" + oldHTML + "</span>"; 
    document.getElementById('para').innerHTML = newHTML; 
} 

</script> 

<p id='para'>Welcome to the site <b>dude</b> </p> 
<input type='text' id='userInput' value='#' /> 
<input type='button' onclick='changeText3()' value='Change Text'/> 

Answer 1

Я бы предложил использовать ссылку стиль вместо того, чтобы добавлять все больше и больше пролетов:

document.getElementById('para').style.color = userInput; 

Answer 2

Это только одна линия, которая вызывает проблему:

var newHTML = "<span style='color:" + userInput + "'>" + oldHTML + "</span>"; 

Answer 3

вам нужно «впрыснуть» переменную UserInput в переменную newHTML. Смотри ниже;

<script type="text/javascript"> 

function changeText3(){ 
    var userInput = document.getElementById('userInput').value; 
    var oldHTML = document.getElementById('para').innerHTML; 
    var newHTML = "<span style='color:" + userInput + "'>" + oldHTML + "</span>"; 
    document.getElementById('para').innerHTML = newHTML; 
} 

</script> 

<p id='para'>Welcome to the site <b>dude</b> </p> 
<input type='text' id='userInput' value='#' /> 
<input type='button' onclick='changeText3()' value='Change Text'/>