I have made an HTML document that requests 4 piece of data: asks user for board
ID: 3680756 • Letter: I
Question
I have made an HTML document that requests 4 piece of data: asks user for board color, an integer, word(all alphabetic), and a character. My question is how could I display an output inside a body from my javascript coding.
Here is my code:
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Number and Phrase Evaluator</title>
<style type="text/css">
#boxResult{
display: none;
width: auto;
padding: 15px;
border: 10px solid black;
background-color: #D3D3D3;
float: left;
}
</style>
</head>
<body>
<h1>Number and Phrase Evaluator</h1>
<h1 id="dateHeader">Date</h1>
<div id="boxResult">
<p>The word entered was <span class="wordEntered"></span></p>
<p>The length of <span class="wordEntered"></span> is <span id="wordSize"></span> characters.</p>
<p>The word <span class="wordEntered"></span> has <span id="numVowels"></span> vowels in it.</p>
<div id="vowelPositions">
</div>
<p id="letterResult"></p>
</div>
<script type="text/javascript">
function usecurrentsDate(){
var weekDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var current = new Date();
var ww = weekDays[current.getDay()];
var dd = current.getDate();
var mm = months[current.getMonth()];
var yyyy = current.getFullYear();
current = ww+' '+mm+' '+ dd +', ' +yyyy;
dateHeader.innerHTML = current;
}
function isNum(word){
var num = /^[0-9]+$/;
if(word.match(num)){
return true;
}
else
{
return false;
}
}
function isAlphaNum(word){
var regex = /^[a-z]+$/i;
if(word.search(regex) == -1){
return false;
}else{
return true
}
}
function countVowels(word){
var stTester = "aeiou";
var numVowels = 0;
for (var i = 0 ; i < word.length ; i++){
if(stTester.indexOf(word[i]) > -1){
numVowels++;
}
}
return numVowels;
}
var dateHeader = document.getElementById("dateHeader");
var boxResult =document.getElementById("boxResult");
var wordEntered = document.getElementsByClassName("wordEntered");
var wordSize = document.getElementById("wordSize");
var numVowels = document.getElementById("numVowels");
var numVowels = document.getElementById("numVowels");
var vowelPositions = document.getElementById("vowelPositions");
usecurrentsDate();
var borderColor = prompt("Please enter the border color you want for your output box: yellow, purple, or orange only");
if( borderColor == "yellow" || borderColor == "purple" || borderColor == "orange"){
boxResult.style.borderColor = borderColor;
}else{
alert("Invalid color! " + borderColor + " border will be set to black");
}
var wordNum = prompt("Enter an integer in the text field");
while(isNaN(wordNum)){
alert("You entered a non-integer value please re-load and try again!!");
wordNum = prompt("Enter an integer in the text field");
}
var count3=0;
for(var i = 0 ; i < wordNum.length ; i++){
if(wordNum[i] == '3'){
count3++;
}
}
var wordAlphaNum = prompt("Enter a word in the text field, all alphabetic characters");
while(!isAlphaNum(wordAlphaNum)){
alert("You entered an invalid word(" + wordAlphaNum + ")please re-load and try again!!");
wordAlphaNum = prompt("Enter a word in the text field, all alphabetic characters.");
}
var letter = prompt("Enter a letter in the text field bellow");
var letterString = "";
for(var i = wordAlphaNum.length ; i > 0 ; i--){
if(wordAlphaNum[i] == letter){
letterString += "<div>The word " + wordAlphaNum + " contains the letter "+ letter + " at position " + (i+1) + ".</div>";
break;
}
}
letterString += "</br><div>The no:of 3 in " + wordNum + " is "+ count3 + ".</div>";
for(var i = 0 ; i < wordEntered.length ; i++){
wordEntered[i].innerHTML = wordAlphaNum;
}
wordSize.innerHTML = wordAlphaNum.length;
numVowels.innerHTML = countVowels(wordAlphaNum);
vowelPositions.innerHTML = letterString;
boxResult.style.display = "block";
</script>
</body>
</html>
The final result appear in the board , and it starts with this line of code"The word entered was <span class="wordEntered"></span></p>". How could I add something above it. I want the final result inside the board to display the integer you have entered, then display how many 3's in that integer, which is this line of code "letterString += "</br><div>The no:of 3 in " + wordNum + " is "+ count3 + ".</div>";"
Explanation / Answer
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Number and Phrase Evaluator</title>
<style type="text/css">
#boxResult{
display: none;
width: auto;
padding: 15px;
border: 10px solid black;
background-color: #D3D3D3;
float: left;
}
</style>
</head>
<body>
<h1>Number and Phrase Evaluator</h1>
<h1 id="dateHeader">Date</h1>
<div id="boxResult">
<p>The word entered was <span class="wordEntered"></span></p>
<p>The length of <span class="wordEntered"></span> is <span id="wordSize"></span> characters.</p>
<p>The word <span class="wordEntered"></span> has <span id="numVowels"></span> vowels in it.</p>
<div id="vowelPositions">
</div>
<p id="letterResult"></p>
</div>
<script type="text/javascript">
function usecurrentsDate(){
var weekDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var current = new Date();
var ww = weekDays[current.getDay()];
var dd = current.getDate();
var mm = months[current.getMonth()];
var yyyy = current.getFullYear();
current = ww+' '+mm+' '+ dd +', ' +yyyy;
dateHeader.innerHTML = current;
}
function isNum(word){
var num = /^[0-9]+$/;
if(word.match(num)){
return true;
}
else
{
return false;
}
}
function isAlphaNum(word){
var regex = /^[a-z]+$/i;
if(word.search(regex) == -1){
return false;
}else{
return true
}
}
function countVowels(word){
var stTester = "aeiou";
var numVowels = 0;
for (var i = 0 ; i < word.length ; i++){
if(stTester.indexOf(word[i]) > -1){
numVowels++;
}
}
return numVowels;
}
var dateHeader = document.getElementById("dateHeader");
var boxResult =document.getElementById("boxResult");
var wordEntered = document.getElementsByClassName("wordEntered");
var wordSize = document.getElementById("wordSize");
var numVowels = document.getElementById("numVowels");
var numVowels = document.getElementById("numVowels");
var vowelPositions = document.getElementById("vowelPositions");
usecurrentsDate();
var borderColor = prompt("Please enter the border color you want for your output box: yellow, purple, or orange only");
if( borderColor == "yellow" || borderColor == "purple" || borderColor == "orange"){
boxResult.style.borderColor = borderColor;
}else{
alert("Invalid color! " + borderColor + " border will be set to black");
}
var wordNum = prompt("Enter an integer in the text field");
while(isNaN(wordNum)){
alert("You entered a non-integer value please re-load and try again!!");
wordNum = prompt("Enter an integer in the text field");
}
var count3=0;
for(var i = 0 ; i < wordNum.length ; i++){
if(wordNum[i] == '3'){
count3++;
}
}
var wordAlphaNum = prompt("Enter a word in the text field, all alphabetic characters");
while(!isAlphaNum(wordAlphaNum)){
alert("You entered an invalid word(" + wordAlphaNum + ")please re-load and try again!!");
wordAlphaNum = prompt("Enter a word in the text field, all alphabetic characters.");
}
var letter = prompt("Enter a letter in the text field bellow");
var letterString = "";
for(var i = wordAlphaNum.length ; i > 0 ; i--){
if(wordAlphaNum[i] == letter){
letterString += "<div>The word " + wordAlphaNum + " contains the letter "+ letter + " at position " + (i+1) + ".</div>";
break;
}
}
letterString += "</br><div>The Number entered was " + wordNum +".</div>";
letterString += "</br><div>The no:of 3 in " + wordNum + " is "+ count3 + ".</div>";
for(var i = 0 ; i < wordEntered.length ; i++){
wordEntered[i].innerHTML = wordAlphaNum;
}
wordSize.innerHTML = wordAlphaNum.length;
numVowels.innerHTML = countVowels(wordAlphaNum);
vowelPositions.innerHTML = letterString;
boxResult.style.display = "block";
</script>
</body>
</html>