HTML 내부에서 변수 호출

Question

나는 당신이 16 진수를 입력 할 때 입력 된 색상에 텍스트 색상을 제출하는 스크립트를 만들려고합니다.

문제는 변수 New HTML 내부의 변수 "userInput"을 호출하는 방법 인 것 같습니다.

어떤 아이디어?

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