javascript - calling a variable inside html - Stack Overflow

admin管理员组

文章数量:1289845

I am trying to make a script that when you type in a hex value and press submit itchanges the text color to the color inputted.

It seems the problem is the way i am calling the variable "userInput" inside the variable new html

Any Ideas?

<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'>Wele to the site <b>dude</b> </p> 
<input type='text' id='userInput' value='#' />
<input type='button' onclick='changeText3()' value='Change Text'/>

I am trying to make a script that when you type in a hex value and press submit itchanges the text color to the color inputted.

It seems the problem is the way i am calling the variable "userInput" inside the variable new html

Any Ideas?

<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'>Wele to the site <b>dude</b> </p> 
<input type='text' id='userInput' value='#' />
<input type='button' onclick='changeText3()' value='Change Text'/>

• javascript
• html
• ajax
• variables
• getelementbyid

Share Improve this question Follow asked Nov 12, 2009 at 13:37 DasaDasa 29711 gold badge77 silver badges2323 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

I would suggest to use the style reference instead of adding more and more spans:

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

It's just the one line that's causing the problem:

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

you need to "inject" the userInput variable into your newHTML variable. See below;

<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'>Wele to the site <b>dude</b> </p> 
<input type='text' id='userInput' value='#' />
<input type='button' onclick='changeText3()' value='Change Text'/>

本文标签： javascriptcalling a variable inside htmlStack Overflow