I am new to javascript and am wanting to make a html file that displays the number of days until super bowl "LIV", the current time, and an input for the user to convert a roman numeral into a number. My code is below and as it is now, the countdown element and the time element do not appear when the file is launched. However, When i remove the functions created to convert the roman numeral, both elements appear again. This tells me that the problem with my code is in these functions, however i can't find what/where needs addressing or if i've taken the wrong approach to the conversion all together. I'm wanting the user to type in a roman numeral to the rn text input and when the "Convert" button input is selected, the corresponding number appears in the result span. I am required to use the concept of the algorithm used in the function "toNumber()" however i obviously may have implemented something wrong along the way. any help is appreciated.
<html>
<head>
<title>Roman Numeral Converter</title>
</head>
<body>
<div>
<p id="countdown"></p>
<p id="time"></p>
<p> Please enter a Roman number (e.g. LIV) to convert to a number: </p>
<form action="PayslipServlet" method="get">
<input type="text" name="romannumber" id="rn"> => <span id="result"></span>
<br>
<input type="button" value="Convert" onClick="toNumber()"> <input type="button" value="Reset" onclick="empty()">
</form>
</div>
<script type="text/javascript">
function sbCountdown() {
var countdownDate = new Date("February 2, 2020").getTime();
var now = new Date();
var rn = now.getTime();
var daysLeft = countdownDate - rn;
var days = Math.floor(daysLeft / (1000 * 60 * 60 * 24));
document.getElementById("countdown").innerHTML = "There are " + days + " days until SUPER BOWL LIV 2020 (February 2, 2020)";
if(daysLeft < 0) {
document.getElementById('countdown').innerHTML = "EXPIRED";
}
setTimeout(sbCountdown, 1000);
}
sbCountdown();
function updateClock() {
var now = new Date(), // current date
months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var dateString = "*** The Current Time is: ";
var hh = now.getHours();
var dd = "AM";
var h = hh;
if(h >= 12 ) {
h = hh - 12;
dd = "PM";
}
if( h == 0 ) {
h = 12;
}
time = h + ':' + now.getMinutes() + ':' + now.getSeconds() + " " + dd;
// a cleaner way than string concatenation
date = [now.getDate(),
months[now.getMonth()],
now.getFullYear()].join(' ');
// set the content of the element with the ID time to the formatted string
document.getElementById('time').innerHTML = dateString + date + " , " + time;
// call this function again in 1000ms
setTimeout(updateClock, 1000);
}
updateClock();
function getValue(s) {
var num = 0;
if(s == 'I') { num = 1 }
else if(s == 'V') { num = 5 }
else if(s == 'X') { num = 10 }
else if(s == 'L') { num = 50 }
else if(s == 'C') { num = 100 }
else if(s == 'D') { num = 500 }
else if(s == 'M') { num = 1000 }
else { document.getElementById(result).innerHTML = "Not a Roman Numeral" }
return num;
}
function toNumber() {
var total = 0;
var romNum = document.getElementById(rn).value
var number;
while(romNum != "") {
if(getValue(romNum.charAt(0)) >= getValue(romNum.charAt(1)) || romNum.length() == 1) {
number = getValue(romNum.charAt(0));
total += number;
var temp = romNum.slice(1);
romNum = temp;
}
else {
number = getValue(romNum.charAt(1) - getValue(romNum.charAt(0));
total += number;
var temp = ronNum.slice(2);
ronNum = temp;
}
}
document.getElementById(result).innerHTML = total;
}
</script>
</body>
</html>
You just have some syntax errors.
You're missing an ending ) in number = getValue(romNum.charAt(1) - getValue(romNum.charAt(0));
Also in most of your getElementById() elements you're missing quotes around your ids. And you need to change your variable ronNum to romNum in your else block.
Fixing those seemed get some of your functionality to work. You would just need to work on your Reset Button functionality now. Hopefully this helps.
<html>
<head>
<title>Roman Numeral Converter</title>
</head>
<body>
<div>
<p id="countdown"></p>
<p id="time"></p>
<p> Please enter a Roman number (e.g. LIV) to convert to a number: </p>
<form action="PayslipServlet" method="get">
<input type="text" name="romannumber" id="rn"> => <span id="result"></span>
<br>
<input type="button" value="Convert" onClick="toNumber()"> <input type="button" value="Reset" onclick="empty()">
</form>
</div>
<script type="text/javascript">
function sbCountdown() {
var countdownDate = new Date("February 2, 2020").getTime();
var now = new Date();
var rn = now.getTime();
var daysLeft = countdownDate - rn;
var days = Math.floor(daysLeft / (1000 * 60 * 60 * 24));
document.getElementById("countdown").innerHTML = "There are " + days + " days until SUPER BOWL LIV 2020 (February 2, 2020)";
if(daysLeft < 0) {
document.getElementById('countdown').innerHTML = "EXPIRED";
}
setTimeout(sbCountdown, 1000);
}
sbCountdown();
function updateClock() {
var now = new Date(), // current date
months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var dateString = "*** The Current Time is: ";
var hh = now.getHours();
var dd = "AM";
var h = hh;
if(h >= 12 ) {
h = hh - 12;
dd = "PM";
}
if( h == 0 ) {
h = 12;
}
time = h + ':' + now.getMinutes() + ':' + now.getSeconds() + " " + dd;
// a cleaner way than string concatenation
date = [now.getDate(),
months[now.getMonth()],
now.getFullYear()].join(' ');
// set the content of the element with the ID time to the formatted string
document.getElementById('time').innerHTML = dateString + date + " , " + time;
// call this function again in 1000ms
setTimeout(updateClock, 1000);
}
updateClock();
function getValue(s) {
var num = 0;
if(s == 'I') { num = 1 }
else if(s == 'V') { num = 5 }
else if(s == 'X') { num = 10 }
else if(s == 'L') { num = 50 }
else if(s == 'C') { num = 100 }
else if(s == 'D') { num = 500 }
else if(s == 'M') { num = 1000 }
else { document.getElementById('result').innerHTML = "Not a Roman Numeral" }
return num;
}
function toNumber() {
var total = 0;
var romNum = document.getElementById('rn').value
var number;
while(romNum != "") {
if(getValue(romNum.charAt(0)) >= getValue(romNum.charAt(1)) || romNum.length == 1) {
number = getValue(romNum.charAt(0));
total += number;
var temp = romNum.slice(1);
romNum = temp;
}
else {
number = getValue(romNum.charAt(1)) - getValue(romNum.charAt(0));
total += number;
var temp = romNum.slice(2);
romNum = temp;
}
}
document.getElementById('result').innerHTML = total;
}
</script>
</body>
</html>