Here is the html document. why doesn't css properties specified in the header execute? what can i do to make them work (properties: "border-radius:4px;background-color:#1B35E0;")
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript|Practice</title>
<style type="text/css"><!--Here goes inner design with CSS-->
#factorial {
border-radius:4px;
background:yellow;
}
</style>
<script>
//Recursion
//---------
var x;
var factorialValue;
function start(){
var startButton=document.getElementById("start");
startButton.addEventListener("click",getInput,false);
}
function getInput(){
x=window.prompt("Enter a positive integer");
factorialValue=doRecursion(x);
displayResult(factorialValue);
}
function doRecursion(n){
if(n<=1){
return 1;
}
else
return n*doRecursion(n-1);
}
function displayResult(result){
var output = "<p>"+x+"!="+result+" </p>";
document.getElementById("factorial").innerHTML=output;
}
window.addEventListener("load",start,false);
</script>
</head>
<body>
<p>Factorial number Calculator</p>
<input id="start" type="button" value="Start" />
<p id="factorial"></p>
</body>
</html>