S.Venkat S.Venkat - 4 years ago 241
HTML Question

How to Change font color by input in Javascript

I have to change font color by get user input in Javascript. here is the HTML code:

<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="JavaScript, UserInput" />
<title>JavaScript accept user input demo</title>
<script type="text/javascript">
function displayOutput() {
var input = document.getElementById("userInput").value;
if (input.length === 0) {
alert("Please enter a valid input");
return;
}
document.getElementById("result").innerHTML = input;
}
</script>
</head>
<body>
<h1 id="result">Example</h1>
<input type="text" id="userInput" />
<select name="color" type="text" >
<option value="select">Select</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="white">White</option>
<option value="black">Black</option>
</select>
<input type="submit" value="Submit" onclick="displayOutput()" />
</body>
</html>


Could please help me to change the result font color.?

Answer Source

You can directly use style.color. Use the following code.

document.getElementById("userInput").style.color=document.getElementById('color').value

Refer the jsfiddle sample.

https://jsfiddle.net/fNPvf/22891/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download