appelant une variable à l'intérieur de html

Question

J'essaye de faire un script que lorsque vous tapez une valeur hexadécimale et que vous appuyez sur submit itchangements la couleur du texte à la couleur entrée.

Il semble que le problème est la façon dont je fais appel à la variable « UserInput » dans la variable nouvelle html

Des idées?

<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

Je suggère d'utiliser la référence de style au lieu d'ajouter de plus en plus portées:

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

Answer 2

Il est juste la ligne qui est à l'origine du problème:

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

Answer 3

vous devez "injecter" la variable UserInput dans votre variable newHTML. Voir ci-dessous;

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