Chamando uma variável dentro de HTML
-
19-09-2019 - |
Pergunta
Estou tentando fazer um script de que, quando você digita um valor hexadecimal e pressione, envie as co -internas da cor do texto para a cor inserida.
Parece que o problema é a maneira como estou chamando a variável de "UserInput" dentro da variável nova html
Alguma ideia?
<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'/>
Solução
Eu sugeriria usar a referência de estilo em vez de adicionar mais e mais vãos:
document.getElementById('para').style.color = userInput;
Outras dicas
É apenas a única linha que está causando o problema:
var newHTML = "<span style='color:" + userInput + "'>" + oldHTML + "</span>";
Você precisa "injetar" a variável UserInput na sua variável newhtml. Veja abaixo;
<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'/>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow