вызов переменной внутри HTML - PullRequest
Новая
       8

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

0 голосов
/ 12 ноября 2009

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

Кажется, проблема в том, как я вызываю переменную "userInput" внутри переменной new 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'/>

Ответы [ 3 ]

8 голосов
/ 12 ноября 2009

Я бы предложил использовать ссылку на стиль вместо добавления новых и новых диапазонов: 

document.getElementById('para').style.color = userInput;
2 голосов
/ 12 ноября 2009

Проблема возникает только из-за одной строки: 

var newHTML = "<span style='color:" + userInput + "'>" + oldHTML + "</span>";
0 голосов
/ 12 ноября 2009

вам нужно «внедрить» переменную 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'/>
...